SignBook v3
Le SignBook constitue l’interface client permettant à l’utilisateur de réaliser son parcours de souscription. Il s’agit d’une page web hébergée par Trust and Sign.
Cette page doit être intégrée dans une page englobante sous forme d’iFrame afin de pouvoir gérer l’ensemble du cycle de vie du dossier.
Notre solution prend en charge les deux dernières versions des principaux navigateurs : Chrome (y compris sur Android), Safari (y compris sur IOS), Firefox, Samsung Browser (sur Android), et Edge.
Certains de nos clients utilisent notre interface du SignBook dans des webview d’applications mobiles développées en interne.
Nous savons que lors de votre intégration, vous pourriez rencontrer certaines difficultés, qui sont propres à votre système d'information, nos équipes ne peuvent intervenir sur ce périmètre.
Afin néanmoins d'aider vos équipes de développement, nous partageons avec vous nos retours d’expériences clients qui ont permis de résoudre certains dysfonctionnements.
Les webviews d’applications mobiles ne sont pas gérés par nos équipes et restent hors périmètre du support Namirial.
Retour d’expérience : voir Dépannage Webview mobile
Intégration du SignBook
Pour des questions de permissions, l'accès à la caméra et au microphone depuis l'iframe (fonctionnalité "face match")
nécessite l'utilisation d'une page englobante en https, et d'autoriser spécifiquement ces accès dans les attributs de
l'élément iframe :
allow="microphone *; camera *"
Désormais il n'est plus nécessaire de mettre l'URL dans l'iframe, elle sera construite et renseignée automatiquement à l'aide du script d'initialisation.
Pour charger correctement la page du SignBook et identifier le dossier client à l'aide de l'accessToken, la page devra inclure obligatoirement les trois éléments suivants en environnement de production :
L'élément iframe
<iframe id="signbook" scrolling="no" frameBorder="no" width="100%" allow="microphone *; camera *"></iframe>
Le script du Signbook
<script src="https://api.ekeynox.net/contract/signbook/v3/script/signbook.js"></script>
Le script d'initialisation
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
},
});
}
</script>
Exemple en environnement d'intégration :
<iframe id="signbook" scrolling="no" frameBorder="no" width="100%" allow="microphone *; camera *"></iframe>
<script src="https://integration-api.ekeynox.net/contract/signbook/v3/script/signbook.js"></script>
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://integration-api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
}
});
}
</script>
À noter la différence dans le nom de domaine : api.ekeynox.net vs integration-api.ekeynox.net :
- https://integration-api.ekeynox.net doit être remplacé par :
- https://preprod-api.ekeynox.net pour la préproduction
- https://api.ekeynox.net pour la production
Dans le reste du document, c'est le nom de domaine de l'environnement de production qui sera utilisé.
ATTENTION : L'utilisation de l'Identité Numérique La Poste (L'IN) nécessite obligatoirement l'intégration du script signbook.js ainsi que son script d'initialisation !
Distinction des participants
Suivant les informations envoyées à la création du dossier, il peut y avoir un ou plusieurs participants. Chaque participant dispose d'un access token unique. Par exemple, pour afficher le parcours du participant dont l’accessToken est 20140917_7HJOLUbtlKET2iQwBGtN7QkkzFgg2r, il suffit de mettre le paramètre token dans l'URL de votre page englobante comme ceci :
https://monsite/index.html?token=20140917_7HJOLUbtlKET2iQwBGtN7QkkzFgg2r&renderMode=pretty
il est aussi possible de passer ce paramètre par le javascript de votre page englobante comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
},
token: '20140917_7HJOLUbtlKET2iQwBGtN7QkkzFgg2r'
});
}
</script>
Ainsi l'URL qui sera générée automatiquement et placée dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKET2iQwBGtN7QkkzFgg2r&renderMode=pretty
Délégation pour la soumission des pièces justificatives
Il est possible de faire soumettre les pièces d'un participant par un autre participant délégué (ceci n'est possible que s'il ne s'agit pas d'une pièce justificative obligatoire avant signature, utilisée pour l'identification). La soumission des pièces est réalisée par le délégué, au nom du participant défini par l'accessToken principal. Le participant délégué doit être membre du même dossier que le participant principal.
Pour lancer le signbook avec un participant délégué, il faut ajouter l'option delegateeToken dans le script d'initialisation comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
delegateeToken: 'token_du_délégué',
renderMode: 'pretty'
},
});
}
</script>
l'URL qui sera générée automatiquement et placée dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&delegateeToken={token_du_délégué}&renderMode=pretty
il est bien entendu aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant simplement le paramètre comme suit :
https://monsite/index.html?token=20140917_7HJOLUbtlKET2iQwBGtN7QkkzFgg2r&delegateeToken={token_du_délégué}&renderMode=pretty
L'opération de délégation est tracée dans le fichier de reporting.
Prérequis d'affichage du Signbook
Pour une meilleure expérience utilisateur sur mobile, il est recommandé de ne pas mettre de marges autour de l'iframe car sur mobile la largeur minimale du SignBook à respecter est de 320px.
Afficher la nouvelle version du Signbook pour les pièces justificatives
Il est possible d'afficher la nouvelle version de la page de justificatifs, pour cela il suffit d'ajouter le paramètre renderMode=pretty
ATTENTION : L'ancienne page étant dépréciée, ce mode sera activé par défaut dans une prochaine version. Pensez à l'activer dés maintenant.
Il suffit d'ajouter l'option renderMode comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
},
});
}
</script>
il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&renderMode=pretty
l'URL qui sera générée automatiquement et placée dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=pretty
Ce mode ne peut être cumulé avec le mode tiny.
Affichage du SignBook en mode réduit pour les pièces justificatives
Il est possible d'afficher dans le SignBook la page des justificatifs en mode réduit, pour cela il suffit d'ajouter le paramètre renderMode=tiny
Il suffit d'ajouter l'option renderMode comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'tiny'
},
});
}
</script>
il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&renderMode=tiny
l'URL qui sera générée automatiquement et placée dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=tiny
Ce mode ne peut être cumulé avec le mode pretty.
Affichage d'une page unique
Il est possible de n'afficher qu'un seul des onglets par défaut (Identification, Signature et Justificatifs) à l'utilisateur lors de la complétion de son parcours, en ajoutant un paramètre de requête displayedPages. Celui-ci peut prendre plusieurs valeurs, telles que identity, signature ou attachments, ou même plusieurs. Par exemple &displayedPages=attachments,signature, le comportement par défaut du Signbook sera conservé. Si l'on renseigne une seule de ces deux valeurs, le Signbook affichera uniquement l'onglet correspondant et l'utilisateur final y sera automatiquement dirigé. L'autre onglet sera alors désactivé.'.
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
displayedPages: 'signature',
renderMode: 'pretty'
},
});
}
</script>
il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&displayedPages=signature
l'URL qui sera générée automatiquement dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&displayedPages=signature&renderMode=pretty
Filtrer l'affichage sur les catégories des justificatifs
Le SignBook offre la possibilité de filtrer la page des justificatifs en fonction des catégories de justificatifs. Par exemple n'afficher que les justificatifs d'identité, pour ce faire il suffit d'utiliser un paramètre comme ceci :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
documentCategories: 'ID_DOCUMENT', // pour afficher que les justificatifs d'identité
renderMode: 'pretty'
},
});
}
</script>
il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&documentCategories=ID_DOCUMENT
À noter que ce paramètre peut prendre plusieurs valeurs séparées par des virgules, par exemple pour filtrer sur les justificatifs d'identité et les justificatifs de revenus il suffit de mettre :
documentCategories=ID_DOCUMENT,INCOME_DOCUMENT
Voici la liste des catégories de justificatifs supportées : - ID_DOCUMENT : Justificatif d'identité - BANKING_DOCUMENT : Justificatif bancaire - ADDRESS_DOCUMENT : Justificatif d'adresse - INCOME_DOCUMENT : Justificatif de revenus - UNDEFINED : Autre document
Enfin merci de noter que la valeur est insensible à la casse.
Affichage du SignBook dans une langue donnée
Il est possible de forcer l'affichage du Signbook dans une langue définie parmi la liste suivante : - Français (fr) - Anglais (en) - Italien (it) - Espagnol (es) - Allemand (de) - Roumain (ro) - Croate (hr) - Portugais (pt) - Néerlandais (nl)
pour cela il suffit d'ajouter le paramètre lang comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
lang: 'fr',
renderMode: 'pretty'
},
});
}
</script>
Si ce paramètre n'est pas fourni alors c'est la langue définie dans le produit du parcours qui sera chargée.
Il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&lang=fr
l'URL qui sera générée automatiquement dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=pretty&lang=fr
Redéfinir le lien de retour vers la page englobante pour le SignBook
Certaines fonctionnalités du SignBook nécessitent de connaitre le lien de départ de la page englobante afin de l'utiliser comme lien de retour à la fin de certains parcours (callback url).
Par exemple si l'utilisateur préfère réaliser sa vérification d'identité avec reconnaissance faciale en utilisant son smartphone alors il peut demander au Signbook de lui envoyer la page du parcours par SMS, et à la fin de sa vérification d'identité sur mobile, on veut pouvoir revenir automatiquement vers son parcours initial.
Pour cela le lien par défaut qui sera utilisé est l'URL de la page englobante, cependant vous pouvez redéfinir cette valeur comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
callbackURL: 'https://initial-page-to-redirect',
renderMode: 'pretty'
},
});
}
</script>
Modifier le comportement du lancement d'une identification vidéo
Par défaut, lorsque l'utilisateur clique sur le bouton pour commencer sa vérification d'identité vidéo, une nouvelle fenêtre du navigateur type Popup s'ouvre. Il est possible de modifier ce comportement pour obtenir une redirection qui va remplacer la page courante directement par la page de l'identification vidéo.
Pour cela il suffit d'ajouter le paramètre vidRequestMode dans les options du SignBook.
Ce paramètre admet comme valeur possible : soit redirect ou popup sachant que le comportement par défaut est popup.
Ci-dessous un exemple montrant l'utilisation de ce paramètre :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
vidRequestMode: 'redirect', // redirect ou popup
renderMode: 'pretty'
},
});
}
</script>
Il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&vidRequestMode=redirect
l'URL qui sera générée automatiquement dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=pretty&vidRequestMode=redirect
Modifier le comportement du lancement du parcours Powens banque
Option recommandé pour les parcours sur mobile. Par défaut, lorsque l'utilisateur clique sur le bouton pour commencer le parcours Powens afin de fournir son RIB, une nouvelle fenêtre du navigateur type Popup s'ouvre. Il est possible de modifier ce comportement pour obtenir une redirection qui va remplacer la page courante directement par la page du parcourds Powens.
Pour cela il suffit d'ajouter le paramètre bankAccountMode dans les options du SignBook.
Ce paramètre admet comme valeur possible : soit redirect ou popup sachant que le comportement par défaut est popup.
Ci-dessous un exemple montrant l'utilisation de ce paramètre :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
bankAccountMode: 'redirect', // redirect ou popup
renderMode: 'pretty'
},
});
}
</script>
Il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&bankAccountMode=redirect
l'URL qui sera générée automatiquement dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=pretty&bankAccountMode=redirect
Rechargement automatique du SignBook après déblocage du dossier
Par défaut, lorsque le dossier est bloqué et nécessite l'intervention d'un opérateur alors un message est affiché à l'utilisateur soit par l'intermédiaire du SignBook ou bien par l'intermédiaire de la page englobante. Mais une fois le dossier débloqué, c'est à la charge du SI client de restaurer le parcours utilisateur afin que le participant puisse reprendre et continuer son parcours, soit en rechargeant l'iframe du SignBook en passant par des notifications WebHook par exemple ou tout simplement en notifiant l'utilisateur par Email en incluant le lien du parcours.
Nous proposons une nouvelle fonctionnalité permettant au SignBook de se recharger automatiquement à la suite d'un déblocage.
Pour cela, il suffit d'ajouter le paramètre autoReload dans les options du SignBook.
Ce paramètre admet comme valeur possible : soit true ou false sachant que le comportement par défaut est false.
Ci-dessous un exemple montrant l'utilisation de ce paramètre :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
autoReload: 'true', // reload the SignBook content after unlocking client file
renderMode: 'pretty'
},
});
}
</script>
Il est aussi possible de passer ce paramètre directement depuis l'URL de votre page englobante en ajoutant à la suite de votre URL la valeur suivante :
&autoReload=true
l'URL qui sera générée automatiquement dans l'iframe sera :
https://api.ekeynox.net/contract/signbook/signbook.html?token=20140917_7HJOLUbtlKN7QkkzFgg2r2&renderMode=pretty&autoReload=true
Interactions avec le SignBook
Le SignBook communique avec la page englobante en lui envoyant des évènements JSON sérialisés sous la forme d'une chaîne de caractères.
Ces événements peuvent être classés en quatre catégories qui ont chacune une vocation différente :
-
les événements utilisateurs : ils ont pour but de décrire les interactions de l'utilisateur avec l'interface du SignBook (voir Evénements utilisateurs)
-
les événements du dossier client : ils donnent des informations sur le dossier client, principalement son état et son passage d'un état à un autre, ou la liste des justificatifs soumis. Il se produit lorsque le dossier client vient d'être chargé pour la première fois à l'arrivée sur le SignBook ou rechargé suite à un événement (acceptation, suspension, rejet, soumission, etc.) (voir Evénements du dossier client)
-
les événements d'erreurs : ils permettent d'alerter la page englobante sur le fait qu'une erreur s'est produite (voir Evénements d'erreur)
-
les événements liés à l'affichage du SignBook : ils permettent à la page englobante de s'adapter aux modifications visuelles du SignBook (voir Evénements d'affichage)
-
les événements indiquant que l'utilisateur a cliqué sur le bouton permettant de quitter et revenir plus tard
Remarque importante : la gestion des événements comme dans le Signbook V1 est dépréciée mais restera supportée jusqu'au premier trimestre 2017.
Il est possible d'intercepter ces événements en fournissant vos propres fonctions javascript métiers en utilisant les options suivantes :
- onUserEventMessage pour les événements utilisateurs.
- onClientFileEventMessage pour les événements du dossier client.
- onErrorEventMessage pour les événements d'erreurs
- onDisplayEventMessage pour les événements liés à l'affichage du SignBook.
- onExitEventMessage pour l'événement déclenché lorsque le participant quitte le SignBook pour revenir plus tard.
La configuration s'effectue comme suit :
<script type="text/javascript">
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
},
onUserEventMessage: onUserEventMessageFn,
onClientFileEventMessage: onClientFileEventMessageFn,
onErrorEventMessage: onErrorEventMessageFn,
onDisplayEventMessage: onDisplayEventMessageFn,
onExitEventMessage: onExitEventMessageFn,
});
}
</script>
Activer / désactiver l'écoute des messages
Il est possible de désactiver l'écoute des messages qui proviennent du SignBook dans la page englobante, cela peut être utile par exemple lorsque l'iframe est démontée. Pour cela il suffit d'appeler la fonction destroy() comme ceci
<script type="text/javascript">
var signbook = new NthSignbook({...});
...
signbook.destroy(); // stop l'écoute des messages
signbook.attachEventListener(); // réactive l'écoute des messages
</script>
Exemple de page englobante complète
<!DOCTYPE html>
<html>
<head>
<title> Mon parcours client </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<style>
#container {
padding: 20px;
margin: 0 auto;
}
#message-container {
display: none;
width: 100%;
text-align: center;
margin: 200px auto;
}
#iframe-wrapper {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<header></header>
<div id="iframe-wrapper">
<iframe id="signbook" width="99%" scrolling="no" frameBorder="no" allow="microphone *; camera *"></iframe>
</div>
<div id="message-container">
<h4 id="message-title"></h4>
<p id="message-text"></p>
</div>
<footer></footer>
</div>
<script src="https://api.ekeynox.net/contract/signbook/v3/script/signbook.js"></script>
<script type="text/javascript">
var MESSAGE_TITLES = {
'EXIT': "A bientôt !",
'SUSPENDED': "Pièces justificatives en cours de contrôle",
'FINALIZED': "Dossier complet",
'WAITING': "Dossier en cours de validation",
'ACCEPTED': "Félicitations !",
'REJECTED': "Désolé"
};
var MESSAGE_TEXTS = {
'EXIT': "Vous pouvez revenir quand vous le souhaitez compléter votre dossier.",
'SUSPENDED': "Une ou plusieurs des pièces que vous avez soumises sont en cours d'examen par nos opérateurs. Merci de revenir plus tard.",
'FINALIZED': "Votre dossier est désormais complet, nous vous recontacterons quand nous l'aurons examiné.",
'WAITING': "Votre dossier est en cours d'examen.",
'ACCEPTED': "Votre dossier a été accepté.",
'REJECTED': "Votre dossier a été refusé."
};
var ERROR_TEXTS = {
'BROWSER_NOT_SUPPORTED': "Désolé, ce navigateur n'est pas supporté, veuillez utiliser Chrome, Firefox, Safari, IE10+, Edge ou Opera."
};
var GENERIC_ERROR_TEXT = "Nos serveurs sont en cours de maintenance, merci de revenir plus tard.";
/**
* Show a message instead of the SignBook
* @param title
* @param text
*/
function showMessage(title, text) {
document.getElementById('iframe-wrapper').style.display = 'none';
document.getElementById('message-container').style.display = 'block';
document.getElementById('message-title').innerHTML = title;
document.getElementById('message-text').innerHTML = text;
}
function onUserEventMessageFn(event) {
// All user actions => used by web analytics libraries like Google Analytics
console.log("user event : " + event.action);
}
function onClientFileEventMessageFn(event) {
// Event coming from eKeynox SaaS with data concerning the state of the client file
console.log("client file state : " + event.state);
if ((event.changedState &&
(event.changedState.from === 'PENDING' && (event.changedState.to === 'WAITING' || event.changedState.to === 'ACCEPTED'))) ||
(event.participantState === 'WAITING')) {
showMessage(MESSAGE_TITLES['FINALIZED'], MESSAGE_TEXTS['FINALIZED'])
} else {
if (event.state !== 'PENDING') {
showMessage(MESSAGE_TITLES[event.state], MESSAGE_TEXTS[event.state]);
}
}
}
function onExitEventMessageFn(event) {
showMessage(MESSAGE_TITLES['EXIT'], MESSAGE_TEXTS['EXIT']);
}
function onErrorEventMessageFn(event) {
// Errors detected by the SignBook (server errors, invalid state, unsupported browser, etc.)
if (event.cause === 'REJECTED_STATE' || event.cause === 'ACCEPTED_STATE'
|| event.cause === 'SUSPENDED_STATE' || event.cause === 'WAITING_STATE') {
// Do not deal with these "errors", this is just for backwards compatibility purpose...
return;
}
showMessage('Erreur', (ERROR_TEXTS[event.cause] ? ERROR_TEXTS[event.cause] : GENERIC_ERROR_TEXT) + "(" + event.cause + ")");
}
/**
* Called on page loaded
*/
window.onload = function () {
var signbook = new NthSignbook({
iframeSelectorId: 'signbook',
url: 'https://api.ekeynox.net/contract/signbook/signbook.html',
options: {
renderMode: 'pretty'
},
onUserEventMessage: onUserEventMessageFn,
onClientFileEventMessage: onClientFileEventMessageFn,
onExitEventMessage: onExitEventMessageFn,
onErrorEventMessage: onErrorEventMessageFn,
});
}
</script>
</body>
</html>
Note : afin que le composant s’adapte au mieux dans un parcours sur tablette, il est recommandé de spécifier la largeur de l’iframe en pourcentage.
Evénements utilisateurs
Ces événements peuvent typiquement être récupérés par la page englobante pour pouvoir être exploités par un outil d'analyse de type Google Analytics. Le type de ces événements est userEvent.
Tout userEvent aura les propriétés suivantes :
- action ...
- context : contexte dans lequel a été exécuté l’action utilisateur
Il s’agit d’un objet contenant les clés suivantes :
- userIndex : numéro du participant (le premier participant a le numéro 1)
- page : signature / attachments / maintenance ...
- Les autres clés du contexte dépendent de l’action (voir le tableau ci-dessous)
| Action | Description | Informations du contexte spécifiques à l’action | Exemple |
|---|---|---|---|
| ACTION_IDENTIFICATION_ENTERING_MOBILE_WAY | Au début de la vérification d'identité FAST ou MAX l'utilisateur clique pour continuer sur mobile | recorderMode (Type de la vérification d'identité vidéo FAST ou MAX) | { type: "userEvent", action: "ACTION_IDENTIFICATION_ENTERING_MOBILE_WAY", context: {type: 'VIDEO_IDENTIFICATION', recorderMode: 'FAST', userIndex: 1, page: 'identity'}} |
| ACTION_IDENTIFICATION_USING_QRCODE | Au début de la vérification d'identité FAST ou MAX l'utilisateur clique pour avoir un QRCode | recorderMode (Type de la vérification d'identité vidéo FAST ou MAX) | { type: "userEvent", action: "ACTION_IDENTIFICATION_USING_QRCODE", context: {type: 'VIDEO_IDENTIFICATION', recorderMode: 'FAST', userIndex: 1, page: 'identity'}} |
| ACTION_IDENTIFICATION_USING_SMS | Au début de la vérification d'identité FAST ou MAX l'utilisateur clique pour recevoir un SMS | recorderMode (Type de la vérification d'identité vidéo FAST ou MAX) | { type: "userEvent", action: "ACTION_IDENTIFICATION_USING_SMS", context: {type: 'VIDEO_IDENTIFICATION', recorderMode: 'FAST', userIndex: 1, page: 'identity'}} |
| ACTION_IDENTIFICATION_LEAVING_MOBILE_WAY | Au début de la vérification d'identité FAST ou MAX l'utilisateur revient sur la page principale | recorderMode (Type de la vérification d'identité vidéo FAST ou MAX) | { type: "userEvent", action: "ACTION_IDENTIFICATION_LEAVING_MOBILE_WAY", context: {type: 'VIDEO_IDENTIFICATION', recorderMode: 'FAST', userIndex: 1, page: 'identity'}} |
| ACTION_IDENTIFICATION_START | Lancement de la vérification d'identité vidéo FAST ou MAX | recorderMode (Type de la vérification d'identité vidéo FAST ou MAX) | { type: "userEvent", action: "ACTION_IDENTIFICATION_START", context: {type: 'VIDEO_IDENTIFICATION', recorderMode: 'FAST', userIndex: 1, page: 'identity'}} |
| SELECT_CONTRACT_TAB | En mode multi-contrat, sélection d’un contrat pour visualisation | contract (nom du contrat défini dans Workflow) | { type: "userEvent", action: "SELECT_CONTRACT_TAB", contract: "nom_du_contrat" } |
| ACTION_ACCEPT_GDPR | Consentement RGPD | { type: "userEvent", action: "ACTION_ACCEPT_GDPR" } | |
| INTERNAL_IDENTITY_STEP | Informe que l'utilisateur avance dans le parcours de vérification d'identité (FaceMatch Photo) | page (index de la page de destination) | {type: "userEvent", action: "INTERNAL_IDENTITY_STEP", page: "step-0"} |
| SELECT_DOCUMENT_TYPE | Sélection du type de document qui va être téléchargé | attachmentId documentType (ID_CARD ou PASSPORT par exemple) |
{ type: "userEvent", action: "SELECT_DOCUMENT_TYPE", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| SELECT_FILE | Sélection du fichier à télécharger | attachmentId documentType |
{ type: "userEvent", action: "SELECT_FILE", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| CAPTURE_FILE | Une image a été capturée à l'aide de la caméra et ajoutée dans la liste des fichiers à télécharger. | attachmentId documentType |
{ type: "userEvent", action: "CAPTURE_FILE", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| ADD_FILE | Ajout d’un fichier supplémentaire à télécharger | attachmentId documentType |
{ type: "userEvent", action: "ADD_FILE", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| REMOVE_FILE | Suppression d’un fichier supplémentaire à télécharger | attachmentId documentType |
{ type: "userEvent", action: "REMOVE_FILE", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| UPLOAD | Envoi des documents | attachmentId documentType |
{ type: "userEvent", action: "UPLOAD", attachmentId: "attachment_1", documentType: "ID_CARD" } |
| ACTION_ACCEPT_EXTERNAL_CONSENTS | Consentement pour émission du certificat lié à la signature qualifiée | { type: "userEvent", action: "ACTION_ACCEPT_EXTERNAL_CONSENTS" } | |
| CHECK_CLAUSE | Sélection d’une clause du protocole de consentement | clauseId (identifiant de la clause telle qu’il a été défini dans Workflow) checked (true / false après le clic) |
{ type: "userEvent", action: "CHECK_CLAUSE", clauseId: "clause_1", checked: true } |
| DOWNLOAD_DOCUMENT_BEFORE | Téléchargement d'un document avant signature (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "DOWNLOAD_DOCUMENT_BEFORE" } | |
| DOWNLOAD_SIGNED_DOCUMENT | Téléchargement d'un document après signature (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "DOWNLOAD_SIGNED_DOCUMENT" } | |
| CHECK_CONSENT_DOWNLOAD_DOCUMENT_BEFORE | L'utilisateur consent avoir téléchargé tous les documents requis avant signature | { type: "userEvent", action: "CHECK_CONSENT_DOWNLOAD_DOCUMENT_BEFORE" } | |
| CHECK_CONSENT_DOWNLOAD_SIGNED_DOCUMENT | L'utilisateur consent avoir téléchargé tous les documents requis après signature | { type: "userEvent", action: "CHECK_CONSENT_DOWNLOAD_SIGNED_DOCUMENT" } | |
| VALIDATE_DOWNLOAD_DOCUMENT_BEFORE | Validation du téléchargement d'un document avant signature (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "VALIDATE_DOWNLOAD_DOCUMENT_BEFORE" } | |
| VALIDATE_DOWNLOAD_SIGNED_DOCUMENT | Validation du téléchargement d'un document après signature (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "VALIDATE_DOWNLOAD_SIGNED_DOCUMENT" } | |
| FOCUS_ON_OTP | Le curseur est dans le champ de saisie de l'OTP (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "FOCUS_ON_OTP" } | |
| TYPE_OTP | Saisie d’un caractère de l’OTP | { type: "userEvent", action: "TYPE_OTP" } | |
| OPEN_NEW_OTP_DIALOG | Ouverture de la boîte de dialogue de demande d'un nouvel OTP (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "OPEN_NEW_OTP_DIALOG" } | |
| CLOSE_NEW_OTP_DIALOG | Fermeture de la boîte de dialogue de demande d'un nouvel OTP (non disponible dans la nouvelle page de signature) | { type: "userEvent", action: "CLOSE_NEW_OTP_DIALOG" } | |
| REQUEST_NEW_OTP | Demande d’un nouvel OTP | { type: "userEvent", action: "REQUEST_NEW_OTP" } | |
| SIGN | Clic sur le bouton d’exécution de la signature | { type: "userEvent", action: "SIGN" } | |
| REFUSE_SIGNATURE | Clic sur le bouton de confirmation de refus de la signature | { type: "userEvent", action: "REFUSE_SIGNATURE" } | |
| EXIT_AFTER_SUSPENSION | Clic sur “Revenir plus tard” dans la boite de dialogue qui apparaît après que le dossier a été suspendu | { type: "userEvent", action: "EXIT_AFTER_SUSPENSION" } | |
| EXIT | Clic sur “Revenir plus tard” | { type: "userEvent", action: "EXIT" } | |
| FINALIZE | Clic sur "Soumettre le dossier" | { type: "userEvent", action: "FINALIZE" } |
Remarque importante : certains événements présents dans le Signbook V1 ont été supprimés (OPEN_DOCUMENT_UPLOAD_DIALOG, CLOSE_DOCUMENT_UPLOAD_DIALOG, GO_TO_COSIGNER_SIGNATURE_PAGE).
Evénements du dossier client
Ces événements peuvent être récupérés par la page englobante pour pouvoir par exemple afficher un message contextualisé à l'utilisateur.
Le type de ces événements est clientFileEvent.
Tout clientFileEvent aura les propriétés suivantes :
-
state : l'état du dossier
-
cause : cause du rejet lorsque le dossier est à l'état "REJECTED" (voir en annexe la liste des causes de rejet)
-
participantState : état du participant, est à "PENDING" si le participant n'a pas terminé son dossier, à "WAITING" si il a terminé son dossier et à "DONE" si le dossier a été accepté ou rejeté
-
changedState : contient les clés from et to correspondant respectivement à l'état précédent du dossier et le nouvel état lorsque le dossier change d'état
-
context : contient des informations supplémentaires sur le dossier, les informations peuvent être les suivantes
-
type : nom ou thème des informations supplémentaires (type disponible: signature)
-
status : ok si l'opération s'est déroulée correctement, ko sinon
-
owner : identifiant du type de participant ayant déclenché l'opération
-
userIndex : numéro du participant (le premier participant a le numéro 1)
-
attachmentId : identifiant du document dans le cas d'un évènement de soumission
-
submittedAttachments : identifiants de tous les documents déjà soumis dans le dossier client
-
mandatoryAttachmentsToSubmit : identifiants des documents obligatoires n'ayant pas encore été soumis dans le dossier client
-
optionnalAttachmentsToSubmit : identifiants des documents optionnels n'ayant pas encore été soumis dans le dossier client
-
signatureState : état de la tâche de signature s'il y a une signature dans le parcours avec comme valeur possible ci-dessous
- TODO : la signature est à faire
- TO_RETRY : la signature est à refaire, après une réouverture de dossier
- RUNNING : la signature est en cours de traitement
- UNAVAILABLE : la signature est non disponible pour le moment
- OK : la signature est effectuée avec succès
- KO : la signature a échoué
-
liveChekState : état de la tâche LiveCheck (vérification manuelle par les opérateurs Netheos Services) le cas échéant avec comme valeur possible voir la liste d'état de tâche ci-dessous
- TODO : la vérification manuelle est à faire
- TO_RETRY : la vérification manuelle est à refaire, après une réouverture de dossier
- RUNNING : la vérification manuelle est en cours
- OK : verdict favorable de la vérification manuelle
- KO : verdict défavorable de la vérification manuelle
-
identitySubmissionDone : indique si le parcours utilisateur de la vérification d'identité est terminé, valeurs possibles true | false
-
identification : Liste le détail des tâches de la vérification d'identité, par exemple dans le cas d'un FaceMatch photo alors on aura deux tâches, l'une pour la soumission de la pièce d'identité et la seconde celle du selfie.
-
nextStep : La prochaine action à faire par le participant, les valeurs possibles sont
- IDENTITY : la prochaine action est la vérification d'identité du participant
- SIGNATURE : la prochaine action est la signature
- DOCUMENT : la prochaine action est la soumission d'un justificatif
- UNAVAILABLE : la prochaine action est non disponible
-
| type de context | Description | Exemple |
|---|---|---|
| attachmentSubmission | Une soumission d'une pièce vient d'être effectuée | { type: "clientFileEvent", state: "PENDING", participantState: "PENDING", context: { }type: "attachmentSubmission", status: 'ok', owner: "SIGNER", taskId: "1_1", attachmentId: "attachment_1", submittedAttachments: ["attachment_1"], mandatoryAttachmentsToSubmit: ["attachment_2"], optionnalAttachmentsToSubmit: [] } |
| signature | L'opération de signature vient d'être effectuée | { type: "clientFileEvent", state: "PENDING", participantState: "PENDING", context: { }type: "signature", status: 'ok', owner: "SIGNER", submittedAttachments: ["attachment_1", "attachment_2"], mandatoryAttachmentsToSubmit: [], optionnalAttachmentsToSubmit: [] } |
| signatureRefusal | L'opération de refus de la signature vient d'être effectuée | { type: "clientFileEvent", state: "PENDING", participantState: "DONE", context: { }type: "signatureRefusal", status: 'ok', owner: "SIGNER", submittedAttachments: ["attachment_1", "attachment_2"], mandatoryAttachmentsToSubmit: [], optionnalAttachmentsToSubmit: [] } |
Remarque importante : l'état FINALIZED présent dans le Signbook V1 n'existe plus. L'équivalent de cet état est le passage d'un état PENDING à un état WAITING ou à un état ACCEPTED (si le parcours est en acceptation automatique) capturable grâce à la clé changedState.
Exemple complet de clientFileEvent lorsque la vérification d'identité est terminée avec un liveCheck en cours avant signature :
{
"type": "clientFileEvent",
"state": "PENDING",
"participantState": "PENDING",
"context": {
"nextStep": "IDENTITY",
"submittedAttachments": [],
"mandatoryAttachmentsToSubmit": [],
"optionnalAttachmentsToSubmit": [],
"signatureState": "UNAVAILABLE",
"liveCheckState": "RUNNING",
"identification": [
{
"type": "DOCUMENT_SUBMISSION",
"state": "WAITING",
"taskId": "1_1",
"attachmentId": "attachment_1"
},
{
"type": "FACE_MATCH",
"state": "WAITING",
"taskId": "1_FM_1"
}
],
"identitySubmissionDone": true
}
}
Exemple de clientFileEvent avec changement d'état :
{
type: "clientFileEvent",
state: "WAITING",
participantState: "WAITING",
changedState: {
from: "PENDING",
to: "WAITING"
}
}
Événements pour la vérification d'identité
Lorsque la vérification d'identité (de type photo ou vidéo) est terminée, un événement de type identity est envoyé à la page englobante. Voici un exemple :
event = {
type: "identity",
state: "WAITING",
ok: true
}
Et voici un exemple de code javascript permettant de voir cet événement :
window.addEventListener('message', function(evt){
var msg = JSON.parse(evt.data);
if (msg && msg.type === 'identity') {
console.log('message: ',msg);
}
}, false);
Événements d'erreur
Ces événements peuvent être récupérés par la page englobante pour pouvoir par exemple afficher un message contextualisé à l'utilisateur. Le type de ces événements est errorEvent.
Tout errorEvent aura les propriétés suivantes :
- cause : la cause de l'erreur
| Cause | Description | Exemple |
|---|---|---|
| BROWSER_NOT_SUPPORTED | Le navigateur n’est pas supporté | { type: "errorEvent", cause: "BROWSER_NOT_SUPPORTED" } |
| INVALID_URL | L’url d’accès au dossier client est incorrecte... | { type: "errorEvent", cause: "INVALID_URL" } |
| INVALID_STATE | L’état du dossier client est incohérent... | { type: "errorEvent", cause: "INVALID_STATE" } |
| BAD_REQUEST | La requête est mal formée | { type: "errorEvent", cause: "BAD_REQUEST" } |
| SERVER_ERROR | Une erreur serveur est survenue | { type: "errorEvent", cause: "SERVER_ERROR" } |
| SERVER_MAINTENANCE | Service est en maintenance | { type: "errorEvent", cause: "SERVER_MAINTENANCE" } |
| UNKNOWN | Une erreur inconnue est survenue | { type: "errorEvent", cause: "UNKNOWN " } |
Evénements d'affichage du SignBook
Ces événements permettent à la page englobante d'ajuster l'affichage du SignBook. Le type de ces événements est displayEvent.
Les displayEvent ont les propriétés suivantes :
- cause : la cause de l'événement
- les autres informations dépendent de l'événement
| Cause | Description | Paramètres supplémentaires | Exemple |
|---|---|---|---|
| heightChanged | La hauteur du SignBook a changé | height: nouvelle hauteur requise par le SignBook (en px) | { type: "displayEvent", cause: "heightChanged", height: "1200" } |
| pageChanged | L'utilisateur a changé de page, par exemple, il est allé de la page de signature à la page de soumission des documents. Cet événement peut être exploité par la page englobante pour faire remonter la page (via iframe.scrollTop = 0) |
{ type: "displayEvent", cause: "pageChanged", } | |
| modalPosition | Une modale a été affichée sur le SignBook, et la page englobante a besoin de scroller vers la position de cette modale dans la page | offsetTop: valeur de la position de la modale dans l'iframe du SignBook | { type: "displayEvent", cause: "modalPosition", "offsetTop": 1423 } |
Paramétrage du SignBook
Pour obtenir une intégration visuelle complète, il est possible de configurer l’apparence et les textes du SignBook grâce aux 3 fichiers suivants :
- custom.css : Mise en forme (taille des polices, couleur des écrans...) au format Cascading Style Sheets (CSS) ( Fichier par défaut )
- strings.custom_[lang].json : Paramétrage des textes pour la langue choisie (remplacer [lang] par le code langue correspondant
(exemple: fr ou en)). Il est conseillé d’utiliser un éditeur adéquat (ex : Notepad++) pour modifier ce fichier au format
JSON ( Fichier par défaut en français).
Attention, ce fichier doit être encodé en UTF-8 sans BOM.
- Fichiers de personnalisation disponibles :
- strings.custom_fr.json : Fichier par défaut
- strings.custom_en.json : Fichier anglais
- strings.custom_it.json : Fichier italien
- strings.custom_es.json : Fichier espagnol
- strings.custom_nl.json : Fichier hollandais
- strings.custom_pt.json : Fichier portugais
- strings.custom_ro.json : Fichier roumain
- strings.custom_de.json : Fichier allemand
- strings.custom_hr.json : Fichier croate
- Fichiers de personnalisation disponibles :
- page.html : correspond à la page englobante du SignBook au format HTML
Ces fichiers doivent être ensuite regroupés dans une archive au format ZIP (peu importe le nom donné à l’archive).
Lors de la configuration d’un parcours de contractualisation dans la partie administration de Trust and Sign, ce fichier ZIP devra être sélectionné dans le champ « Fichier du SignBook » qui se trouve au niveau des paramètres avancés dans l'onglet « Général » du parcours.
Remarque importante : concernant les fichiers custom.css et strings.custom_[lang].json, vous ne devriez regrouper dans l'archive au format ZIP que les modifications que vous souhaitez apporter. Par exemple, si vous souhaitez ne changer qu'un seul texte, le fichier strings.custom_[lang].json ne contiendra qu'une seule clé correspondant à ce texte.
Configuration des textes de la modale RGPD
Dans le fichier de personnalisation des textes, les clés de traduction à ajuster pour personnaliser le contenu de la modale RGPD sont toutes précédées du préfixe GDPR_MODAL_*.
Attention : En modifiant les textes relatifs au RGPD, vous assumez l'entière responsabilité de leur conformité légale.
Configuration du fichier custom.css
Le fichier « custom.css » permet de configurer l’affichage du SignBook : mise en forme des polices (taille et couleur), choix des couleurs de fond (onglet, fenêtre).
Les codes couleurs doivent être renseignés au format hexadécimal (ex : #FFDDEE).
Les familles de police doivent être renseignés selon la “notation CSS” (ex : "Times New Roman", “Georgia”, “Serif”).
| Propriété | Valeur par défaut |
|---|---|
| Famille de police | Helvetica, Arial |
Les couleurs du signbook sont appliquées à l'aide de classes css. Il suffit donc de changer le code couleur d'une classe pour modifier la couleur de tous les éléments qui la partagent. Les classes couleur sont divisés en trois groupes :
- les classes de couleur de police
- les classes de couleur de fond (commençant par background-)
- les classes de couleur de bordure (commençant par border-)
| Classe CSS | Valeur par défaut | Aperçu | Type |
|---|---|---|---|
| active-color | #ffffff | police | |
| background-active-color | #5781a1 | fond | |
| inactive-color | #615d5a | police | |
| background-inactive-color | #bed1e0 | fond | |
| accent-color | #1f1f1f | police | |
| background-accent-color | #ffffff | fond | |
| secondary-color | #615d5a | police | |
| background-secondary-color | #ebebeb | fond | |
| border-secondary-color | #ebebeb | bordure | |
| background-dropzone-color | #f5f5f5 | fond | |
| border-dropzone-color | #8eacc2 | bordure | |
| background-general-color | #f4f5f9 | fond | |
| hint-color | #31708f | police | |
| background-hint-color | #ddf2fc | fond | |
| border-hint-color | #a2d3de | bodure | |
| alert-color | #a94442 | police | |
| background-alert-color | #f2dede | fond | |
| border-alert-color | #ebccd1 | bodure | |
| help-color | #3c763d | police | |
| background-help-color | #dff0d8 | fond | |
| border-help-color | #d6e9c6 | bordure |
Écrans d'aide à la personalisation du SignBook
Veuillez trouver ci-dessous des indications sur les différentes pages du SignBook, nous indiquons les classes CSS (en bleu) pour localiser les élements à modifier ainsi que les clés de traductions (en violet) pour la personalisation des textes.
Page de la vérification d'identité
Page de la signature qualifiée, consentements pour l'autorité de certification
Page de signature
Page de soumission des justificatifs
Page d'alerte
Personnalisation de l'affichage des justificatifs
Vous avez également la possibilité de modifier l'apparence des blocs de justificatifs en fonction de leur état (en attente, soumis, validé, etc...).
Un attribut "data-task-state" est disponible afin de permettre l'utilisation d'un sélecteur CSS par exemple. Cet attribut prendra la valeur de l'état de la pièce justificative :
- TODO (pièce à envoyer)
- WAITING (pièce justificative envoyée)
- OK (pièce envoyée et dossier soumis)
- TO_RETRY (pièce envoyée mais en erreur, en attente d'être renvoyée)
Vous pouvez par exemple décider de masquer un bloc dont la pièce a été envoyée avec succès :
div[data-task-state='WAITING'] {
display: none;
}
Ou décider d'afficher un fond gris sur les pièces déjà validées lors d'une réouverture :
div[data-task-state='OK'] {
background: #ccc;
}
Personnalisation de l'affichage pour la nouvelle page des justificatifs
La nouvelle interface de la page des justificatifs est basée sur la classe CSS .pretty qui se situe sur le body de la page. Pensez donc à bien préfixer vos nouvelles règles CSS dans le custom.css en utilisant la classe .pretty
par exemple pour modifier la couleur de fond du SignBook
.pretty.background-general-color {
background-color: #fff;
}
Ci-dessous la liste des classes CSS clés à utiliser si besoin
Nouvelle page des justificatifs
Modale de soumission des justificatifs
Modale d'alerte en cas d'erreurs
Capture de document via la modale de soumission de justificatifs
La fonctionnalité de capture des justificatifs est uniquement disponible en mode pretty.
Tooltip permettant de choisir la source du document
Loader affiché tant que les droits d'accès à la caméra ne sont pas acceptés
Page de capture du document sur la modale
Page de preview du document sur la modale
Personnalisation des boutons situés en bas de la page du SignBook
Les boutons d'action situés en bas de la page peuvent être ciblés à l'aide de sélecteur CSS en utilisant les classes appropriées suivantes :
| Bouton | Classe CSS à utiliser |
|---|---|
| Continuer | action-continue |
| Soumettre mon dossier | action-finalize |
| Retour à l'étape précédente (Justificatifs) | action-back-to-attachments |
| Revenir plus tard | action-come-back-later |
Paramétrage de l'apparence du FaceMatch vidéo
Il est possible de configurer l’apparence du FaceMatch video en fournissant un fichier CSS supplémentaire qui devra avoir pour nom custom-video-identification.css à fournir dans l'archive ZIP de customisation du SignBook.
Ce fichier CSS peut contenir votre propre CSS, mais la méthode recommandée est d'utiliser les variables CSS énumérées ci-dessous :
Liste des variables CSS
| Variable CSS | Valeur par défaut | Aperçu | Description |
|---|---|---|---|
| --nc-branding-logo-image | url('assets/images/v2/LOGO.svg') | image logo affichée sur le premier écran | |
| --nc-branding-logo-width | 228px | largeur de l'image logo | |
| --nc-branding-logo-height | 66px | hauteur de l'image logo | |
| --nc-font-family | 'Quicksand', sans-serif; | police du texte global | |
| --nc-font-weight | 500 | poids de la police de textes | |
| --nc-font-color | #333333 | couleur du texte global | |
| --nc-font-size | 1rem | taille du texte global | |
| --nc-button-active-background | #014AD8 | couleur de fond des boutons | |
| --nc-button-active-color | #FFFFFF | couleur du texte des boutons | |
| --nc-button-disabled-background | rgba(47, 95, 227, 0.25) | couleur de fond des boutons désactivés | |
| --nc-button-disabled-color | rgba(255, 255, 255, 0.8) | couleur du texte des boutons désactivés | |
| --nc-button-font-size | 16px | taille du texte des boutons | |
| --nc-button-font-weight | bold | le poids utilisé pour le texte des boutons | |
| --nc-button-text-transform | uppercase | permet de faire apparaître le texte des boutons en majuscules ou en minuscules | |
| --nc-button-border-radius | 8px | coins arrondis pour la bordure des boutons | |
| --nc-checkbox-container-checked-background | #FFFFFF | couleur de fond du conteneur lorsque la case est cochée | |
| --nc-checkbox-background | #2F5FE3 | couleur de fond des cases à cocher | |
| --nc-checkbox-checkmark-color | #FAFAFA | couleur des cases à cocher lorsqu'elles sont sélectionnées | |
| --nc-checkbox-border-color | ##014AD8 | couleur de bordure des cases à cocher | |
| --nc-checkbox-width | 20px | largeur des cases à cocher | |
| --nc-checkbox-height | 20px | hauteur des cases à cocher | |
| --nc-link-color | #014AD8 | Couleur des liens | |
| --nc-box-background | rgba(1, 74, 216, 0.03) | couleur de fond du cadre dans la première étape | |
| --nc-box-border-radius | 8px | coins arrondis pour la bordure du cadre dans la première étape | |
| --nc-box-document-type-background | #FFFFFF | couleur de fond des cadres sur l'étape du choix du type de document | |
| --nc-box-document-type-border-radius | 8px | coins arrondis pour la bordure des cadres sur l'étape du choix du type de document | |
| --nc-progress-bar-background | #014AD8 | couleur de fond de la barre de chargement sur l'étape du téléchargement | |
| --nc-validation-color | #1af9b6 | couleur utilisée dans les animations lors des écrans d'enregistrement vidéo | |
| --nc-live-control-succeed-color | rgb(25, 216, 115) | couleur indiquant que le contrôle temps réel sur la netteté est passant | |
| --nc-live-control-fail-color | rgb(255, 57, 57) | couleur indiquant que le contrôle temps réel sur la netteté est non passant |
Exemple de fichier CSS
:root {
--nc-branding-logo-image: url('https://s3-eu-west-1.amazonaws.com/tpd/logos/60db5eecb9d0560001052418/0x0.png');
--nc-branding-logo-width: 170px;
--nc-branding-logo-height: 170px;
--nc-font-family: 'Courgette', serif;
--nc-font-color: black;
--nc-font-size: 16px;
--nc-font-weight: 400;
--nc-button-active-background: #22819f;
--nc-button-active-color: #affffa;
--nc-button-disabled-background: rgba(174, 206, 214, 0.5);
--nc-button-disabled-color: gray;
--nc-button-font-size: 16px;
--nc-button-font-weight: bold;
--nc-button-border-radius: 40px;
--nc-button-text-transform: none;
--nc-checkbox-container-checked-background: transparent;
--nc-checkbox-background: #22819f;
--nc-checkbox-checkmark-color: #affffa;
--nc-checkbox-border-color: #014AD8;
--nc-checkbox-width: 26px;
--nc-checkbox-height: 26px;
--nc-link-color: #014AD8;
--nc-box-background: #baf7ff;
--nc-box-border-radius: 20px;
--nc-box-document-type-background: #baf7ff;
--nc-box-document-type-border-radius: 40px;
--nc-progress-bar-background: #56dfb0;
--nc-validation-color: #1ac6ff;
--nc-live-control-succeed-color: #1ac6ff;
--nc-live-control-fail-color: #ff0071;
}
@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/courgette/v13/wEO_EBrAnc9BLjLQAUk1VvoK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Liste des classes CSS clés
Il existe plusieurs classes CSS clés dans l'interface facilement identifiable avec un outil de developpeur du navigateur, Nous listons ci-dessous la liste des classes CSS clés à utiliser pour cibler les éléments de la page :
Paramétrage des textes du FaceMatch vidéo
Pour obtenir une intégration visuelle complète, il est possible de configurer en plus de l’apparence, les textes de l'interface pour l'identification vidéo, en fournissant un fichier supplémentaire qui devra avoir pour nom strings.custom-video-identification_[lang].json à fournir dans l'archive ZIP de customisation du SignBook.
- strings.custom-video-identification_[lang].json : Permet de redéfinir les textes pour la langue choisie, il faut remplacer [lang] par le code langue correspondant (exemple : fr ou en). Il est conseillé d’utiliser un éditeur adéquat (ex : Notepad++) pour modifier ce fichier au format JSON. Attention, ce fichier doit être encodé en UTF-8.
- Fichiers de personnalisation disponibles :
- strings.custom-video-identification_fr.json : Fichier par défaut
- strings.custom-video-identification_en.json : Fichier anglais
- strings.custom-video-identification_it.json : Fichier italien
- strings.custom-video-identification_es.json : Fichier espagnol
- strings.custom-video-identification_nl.json : Fichier hollandais
- strings.custom-video-identification_pt.json : Fichier portugais
- strings.custom-video-identification_ro.json : Fichier roumain
- strings.custom-video-identification_de.json : Fichier allemand
- strings.custom-video-identification_hr.json : Fichier croate
- Fichiers de personnalisation disponibles :
Il est conseillé de redéfinir uniquement les clés qui vous semblent nécessaires à modifier. Si vous ne souhaitez pas modifier certaines clés, il n'est pas nécessaire de les fournir, car la valeur par défaut sera automatiquement utilisée.