Une fois que vous avez lancé une transaction et que les actions sont prêtes à être traitées, les participants sont redirigés vers notre page de signature.
Pour un parcours de signature plus fluide, vous pouvez intégrer notre page de signature dans votre site web en utilisant un iframe. Pour ce faire, suivez les étapes ci-dessous.
Notez que la fonctionnalité de messagerie instantanée n’est pas disponible dans l’iframe. Pour plus d’informations sur cette fonctionnalité, consultez Chat with a participant.
Important : Vous devez autoriser le domaine iframe avant de pouvoir l’intégrer à votre site web.
1. Mettre en place l’iframe
Injecter ou appeler le script embed.js dans votre site web
Nous vous fournissons un script qui génère notre page de signature. En fonction de l’environnement que vous utilisez, injectez ou appelez l’un des scripts embed.js suivants.
- Pour l’environnement de PREPROD : https://apps.alpha.universign.com/npds/embed.js
<script src="https://apps.alpha.universign.com/npds/embed.js"></script>
- Pour l’environnement de PROD : https://apps.universign.com/npds/embed.js
<script src="https://apps.universign.com/npds/embed.js"></script>
Fournir un élément DOM
Créez une balise div avec id, width et height, comme dans l’exemple ci-dessous
<div id="container-iframe" style="width: 70%; height: 600px"></div>
La hauteur de l’élément div ne doit pas être une valeur en pourcentage car la hauteur de l’iframe est en pourcentage (100%). Si l’élément div de l’iframe n’a pas de hauteur fixe, la hauteur de l’iframe sera plus petite.
Nous vous recommandons d’avoir une valeur de height inférieure à window.innerHeight.
Pour les signatures avancées nécessitant une vérification des documents d’identité, si la hauteur de l’iframe est inférieure à 725px, un défilement apparaîtra pour les étapes de chargement des documents d’identité.
Si la largeur de l’iframe est inférieure à 768px, la navigation est réduite et les descriptions des étapes ne sont pas affichées.
Appeler la fonction initIframe
Pour afficher la page de signature dans l’iframe, appelez la fonction initIframe avec les paramètres requis (l’identifiant de l’élément DOM et l’URL complète de la page de signature), comme dans l’exemple ci-dessous.
<body onload="initIframe('container-iframe', 'https://apps.universign.com/npds/act_8JW4Dl1L5Kkzk')"></body>
Notez que vous devez récupérer l’URL complète de la page de signature (y compris l’identifiant de l’action du participant) à partir de l’objet de la transaction, comme dans l’exemple de code ci-dessous.
"actions" : [ {
"id" : "act_8JW4Dl1L5Kkzk",
"actor" : "[email protected]",
"state" : "open",
"url" : "https://apps.universign.com/npds/act_8JW4Dl1L5Kkzk",
"tasks" : [ {
"type" : "signature",
"state" : "todo",
"field" : "fld_QzBQ"
} ],
"stalled" : false
} ]
2. Écouter les événements
L’iframe intégré communique avec votre site web via des événements. Cela vous permet de lancer les workflows appropriés en fonction des actions des participants.
La liste des événements est la suivante :
Événements de transaction
actionpage.opened: la page de signature est accessible et le participant a commencé le parcours de signature.action.refused: le participant a refusé d’effectuer son action.action.closed: le participant a effectué son action.transaction.lifecycle.completed: tous les participants ont effectué leurs actions et la transaction est terminée.
Événements d’enregistrement
registration.lifecycle.open: Le participant peut commencer le parcours de création du certificat.registration.lifecycle.in_progress: Le participant effectue toujours les actions demandées dans le parcours de création du certificat.registration.lifecycle.rejected: Le participant a rejeté l’identité validée.registration.lifecycle.error: La session d’enregistrement du participant a expiré.registration.lifecycle.success: Le certificat du participant a été émis avec succès.
Notez que les événements mentionnés ci-dessus sont spécifiques à l’intégration de l’iframe.
Vous devez injecter le script suivant dans votre site web pour pouvoir suivre les événements.
<script>
window.addEventListener('npdsEvent', function(event) {
console.log(event.detail.eventType, event.detail.actionId);
}, false);
</script>
Fermeture de l’iframe et redirection
Une fois le parcours de signature terminé, c’est votre application qui décide de la suite : fermer l’iframe, afficher un message de confirmation, rediriger vers une autre page. Nous ne forçons aucun comportement — vous gardez le contrôle total sur l’expérience de vos utilisateurs, en branchant votre propre logique sur les événements action.closed et transaction.lifecycle.completed décrits ci-dessus (selon que vous souhaitez réagir dès qu’un participant a terminé, ou attendre que l’ensemble des participants ait complété le parcours).
Dans l’exemple ci-dessous, ‘npdsEvent’ désigne l’événement que vous souhaitez écouter.
<script>
window.addEventListener('npdsEvent', function(event) {
if (event.detail.eventType === 'action.closed') {
document.getElementById('container-iframe').style.display = 'none';
window.location.href = 'https://votre-site.example.com/merci';
}
}, false);
</script>
Bon à savoir — Événements client vs. webhooks
Les événements côté client sont utiles pour piloter l’interface en temps réel, mais ils ne doivent pas servir de source de vérité pour vos actions métier (mise à jour de base de données, déclenchement de workflow, validation contractuelle). Un utilisateur peut fermer son navigateur avant que l’événement ne soit reçu.
Pour les actions critiques, appuyez-vous toujours sur nos webhooks : ils vous notifient côté serveur à chaque changement de statut, de manière fiable et indépendante du comportement du navigateur (fermeture d’onglet, perte de connexion, etc.). Consultez la référence complète des webhooks pour la liste des événements et leur format.
3. Exemple de code complet
Ci-dessous un exemple d’intégration complète d’une iframe dans une seule page Web.
<!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')">
<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>
Notez que par défaut, l’accès à la page de signature est protégé par un mot de passe à usage unique (même via l’intégration iframe). Cependant, vous devrez peut-être désactiver ce contrôle d’accès. Pour plus d’informations, consultez Désactiver le contrôle d’accès à la page de signature .
Affichage de l’iframe
Une fois l’intégration terminée, la page de signature s’affichera dans un iframe intégré à votre propre site web.
