Use Universign's Iframe
It is possible to integrate Universign Signing Page in Iframe mode in order to make the signature process more fluid.
Find below the code to integrate Universign in Iframe mode to get the start and the end of a transaction:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://app.universign.com/sig/embed.js"></script>
<script>
function generateIframe() {
const configuration = {};
configuration.redirectionMode = 'IN';
const signerid = '1a5b56a0-6a58-31e8-80b7-c7601f114455';
/**
The universignSigInit function adds an iframe element as child of element with id attribute equals to containerId parameter, the attribute src is set from the universignUrl variable, it is the url of the website to be integrated in the iframe, the width and height of the iframe will take 100% of its container.
*
* @param {string} containerId The id of the element in which we will inject the iframe
* @param {string} signerId The identifier of transaction
* @param {object} configuration The list of options to customize the iframe
* * redirectionMode {string} This parameter has two possible values: IN or OUT, the default value being OUT
* if the value of this parameter is OUT, the redirection will be done outside the iframe (in the website container of the iframe)
* if the value of this parameter is equal to IN, the redirection will be done inside the iframe
* if the value of this parameter is otherwise, an exception will be triggered.
*/
universignSigInit('iframeContainerId', signerid, configuration);
}
</script>
</head>
<body onload="generateIframe()">
<div style="display:flex; justify-content:space-between; align-items:stretch; height:56vh;">
<div id="iframeContainerId" style="width:70%; display:inline-block; height:auto;">
</div>
</div>
</body>
</html>
On the test environment:
The URL of the "embed.js" script will have to be replaced by the test URL: https://sign.test.universign.eu/sig/embed.js
The /*universignSigInit*/ method also includes the test webapp URL as a fourth parameter:
https://sign.test.universign.eu
The method declaration thus goes as follows:
universignSigInit('iframeContainerId', signerid, configuration, "https://sign.test.universign.eu");
The new Event API
Add an event listener in 'pdsEvent' that will be triggered when a user starts and finishes the signature process.
Use e.detail.eventType to get the start or the end of the signature process
Use e.detail.signerId to get the Signer Id of the transaction
<script type="text/javascript">
// add an appropriate event listener
window.addEventListener('pdsEvent', (e) => {
// e.detail.eventType return 'begin' or 'end' of signature process
// e.detail.signerId get the Signer Id
});
</script>
If you are migrating from the old signature page to the new one, please keep in mind that the Iframe behavior has slightly changed: redirection is now done outside the iframe.