Utiliser l'Iframe Universign
Il est possible d'intégrer Universign en mode Iframe afin de fluidifier votre parcours de signature.
Voici le code à utiliser pour l'intégration de l'Iframe Universign sur votre page:
En production :
<!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 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>
En recette :
Il est nécessaire de remplacer l'URL du script "embed.js" par celle de la recette :
https://sign.test.universign.eu/sig/embed.js
Aussi, la méthode /*universignSigInit*/ prend un quatrième paramètre qui est l'URL de la plateforme de recette :
https://sign.test.universign.eu
La déclaration de cette méthode devient donc :
universignSigInit('iframeContainerId', signerid, configuration, "https://sign.test.universign.eu");
La nouvelle API Evenement Universign
Utilisez e.detail.eventType pour obtenir le début de la transaction ou sa fin.
Utilisez ‘status’ pour obtenir le statut de la transaction : 'canceled', 'signed', 'failed', 'ready', 'pending-validation'.
Utilisez e.detail.signerId pour obtenir le SignerID de la 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>
Si vous passez de l'ancienne page de signature Universign à la nouvelle, il est à noter que la redirection était réalisée à l'intérieur de l'Iframe alors que désormais, la redirection se fait à l'extérieur.
Il est à noter également que l'Iframe Universign permet désormais de rediriger le signataire à l'intérieur de l'iframe ou à l'extérieur.