Once you start a transaction and actions are ready to be processed, participants are redirected to our signature page.
For a smoother signature process, you can embed our signature page into your website using an iframe. To do so, follow the steps below.
Note that the instant messaging feature is not available in the iframe. For more details about this feature, visit Chat with a participant.
Inject or call the embed.js script in your website
We provide you with a script that generates our signature page. Depending on the environment you use, inject or call one of the following embed.js scripts.
- PREPROD environment: https://apps.alpha.universign.com/npds/embed.js
<script src="https://apps.alpha.universign.com/npds/embed.js"></script>
- PROD environment: https://apps.universign.com/npds/embed.js
<script src="https://apps.universign.com/npds/embed.js"></script>
Provide a DOM element
Create a div tag with id, width and height, as in the example below.
<div id="container-iframe" style="width: 70%; height: 600px"></div>
The div element height should not be a percentage value as the height of the iframe is in percentage (100%). If the div element of the iframe doesn’t have a fixed height, the height of the iframe will be a smaller value.
We recommend you to have a height value smaller than window.innerHeight.
For advanced signatures that require identity documents verification, if the iframe height is less than 725px, a scroll will appear for identity document loading steps.
If the iframe width is less than 768px, navigation is reduced, and steps descriptions are not displayed.
Call the initIframe function
To display the signature page in the iframe, call the initIframe function with required parameters (The DOM element id and the signature page full URL), as in the example below.
<body onload="initIframe('container-iframe', 'https://apps.universign.com/npds/act_8JW4Dl1L5Kkzk?token=ZXRfYWN0aW9ufGtvdXNzYWkuaG91c3NpbmUlNDB1bml2ZXJzaWduLmNvbXxhY3Rpb25JZDphY3RfOEpXNERsMUw1S2t6a3xnSmd4NkJ3anFBVm8tRVYxZDk2SXFDVnZ3T1lra2Y')"></body>
Monitor the signature page’s activity
The embedded iframe communicates with your website via events. This allows you to launch the appropriate workflows depending on participants actions.
The list of events is as follows:
actionpage.opened: the signature page is accessed and the participant started the signature process.action.refused: the participant refused to perform his/her action.action.closed: the participant performed his/her action.transaction.lifecycle.completed: all participants have performed their actions and the transaction is completed.
You need to inject the following script in your website, to be able to follow events.
<script>
window.addEventListener('npdsEvent', function(event) {
console.log(event.detail.eventType, event.detail.actionId);
}, false);
</script>
Full Iframe integration Code example
Below is an example of a full iframe integration within a single web page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Universign signature page iframe integration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://apps.universign.com/npds/embed.js"></script>
<script>
window.addEventListener('npdsEvent', function(event) {
console.log(event.detail.eventType, event.detail.actionId);
}, false);
</script>
</head>
<body onload="initIframe('container-iframe', 'https://apps.universign.com/npds/act_8JW4Dl1L5Kkzk?token=ZXRfYWN0aW9ufGtvdXNzYWkuaG91c3NpbmUlNDB1bml2ZXJzaWduLmNvbXxhY3Rpb25JZDphY3RfOEpXNERsMUw1S2t6a3xnSmd4NkJ3anFBVm8tRVYxZDk2SXFDVnZ3T1lra2Y')">
<div style="display:flex; justify-content:space-between; align-items:stretch; height:56vh;">
<div id="container-iframe" style="width: 70%; height: 600px">
</div>
</div>
</body>
</html>
