Use Universign's Iframe
It is possible to integrate Universign Signing Page in Iframe mode in order to smoothen the signature process.
Find below the code to integrate Universign in Iframe mode to get the begin and the end of the transaction.
<!doctype html><html><head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> function generateIframe() { const configuration = {}; configuration.redirectionMode = 'IN'; const signerid = '1a5b56a0-6a58-31e8-80b7-c7601f114455'; /** * The universignSigInit function add 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 options list to customize the iframe: * * redirectionMode {string} This params have two possible values: IN or OUT, * the dafault value is OUT, * if the value of this params is equal to OUT the redirection will be done * outside the iframe(in website container of the iframe), * if the value of this params is equal to ÌN the redirection will be done * inside the iframe, * if the value of this params 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>The new Event API
Add an event listener in 'pdsEvent' event triggered when a user starts and finishes the signature process.
Use e.detail.eventType to get the begin or the end of signature process
Use e.detail.signerId to get the Signer Id of 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 Ifram behavior is slightly changed ; indeed, the redirection is now done outside the Iframe.