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)
...
| Code Block |
|---|
| language | xml |
|---|
| title | 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:
| event | post 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 |