Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Integration

If you want to integrate the webSignatureOffice viewer / document URL into your existing web application (browser), there are basically two options available:
a) Display of the document viewer in a separate browser tab.
b) Display of the document viewer within your own browser page, integrated via iFrame (see example below)


iFrame Test
<!DOCTYPE html>
<html>

	<head>
				 
		<meta charset="utf-8">
				
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	
		<title>Viewer iFrame Test</title>

		<!-- JS -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
			jQuery(document).ready(function(urlFromBackend) 
			{
				// URL from Backend
				var url = urlFromBackend; //Response from Tyrservice method calls; example URL = https://host/process?x=tldv&u=1&t=1234&d=1234&xx=abc
	        jQuery('.iframe iframe').attr('src', url);
			});
		</script>

		<!-- CSS -->
		<style>
			body
			{
				font-family: arial !important;
				font-size: 16px;
				line-height: 22px;
			}

			header
			{
				padding:15px;

				background-color: #23406b;
				color: #fff;
			}

			header .logo
			{
				display: inline-block;
				vertical-align: middle;
			}

			header nav
			{
				display: inline-block;
				vertical-align: middle;

				margin-left: 50px;
			}

			header nav a
			{
				margin-left: 10px;
				color: #fff;
			}
			header nav a:hover
			{
				opacity: 0.7;
			}

			footer
			{
				padding:10px;

				background-color: #23406b;
				color: #fff;
			}


			/* example for iframe styling */
			iframe
			{
				width: 100%;
				height:calc(100vh - 250px);
			}
		</style>
		
	</head>

	<body>
		<header>
			<div class="logo">Logo</div>
			<nav>
				<a href="#">Menu 1</a>
				<a href="#">Menu 2</a>
				<a href="#">Menu 3</a>
				<a href="#">Menu 4</a>
			</nav>
		</header>

		<main>
			<div class="intro">
				<h1>Beispielhafte Anbindung webSignatureOffice Viewer</h1>
			</div>

			<!-- iFrame start -->
			<div class="iframe">
				<iframe src="" name="iFrame" title="iFrame" allowfullscreen></iframe>
			</div>
			<!-- iFrame end -->
		</main>

		<footer><p>Footer</p></footer>
		
	</body>
</html>

Webhooks

The viewer posts messages to the parent when the user finished his signatures or clicks buttons:

eventpost message
click "finish" or "save and quit" ("X")viewerExit
finish all own signatures in a document/envelope (signatures of other users are left, the status is "waiting")finishedOwnSignatures
all signatures of all users are finished in document/envelope finishedSigning


  • No labels