Nouvelle page de signature

Présentation

Nous avons développé une nouvelle expérience utilisateur des pages de signature pour offrir une navigation plus fluide. Le processus est découpé en étapes claires, guidé par un fil d'ariane. Nous avons facilité la visualisation des contrats ou le téléchargement, cette nouvelle interface est une option du parcours avec frais.

Personnalisation de l'affichage pour la nouvelle page de signature

Il est possible de configurer l’apparence de la nouvelle page de signature en ajoutant du CSS dans le même fichier custom.css 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-font-family	'Quicksand', sans-serif;		police du texte global
--nc-font-color	#333333		couleur du texte global
--nc-font-size	1rem		taille du texte global
--nc-primary-color	#014AD8		Couleur primaire générale
--nc-secondary-color	#f95151		Couleur secondaire générale
--nc-background	#F5F8FF		Couleur du fond
--nc-button-active-background	#014AD8		couleur de fond des boutons
--nc-button-active-text-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-text-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
--nc-button-border-radius	8px		coins arrondis pour la bordure des boutons
--nc-button-active-secondary-background	#f95151		couleur de fond des boutons secondaires
--nc-button-active-secondary-color	#FFFFFF		couleur du texte des boutons secondaires
--nc-checkbox-background	#2F5FE3		couleur de fond des cases à cocher
--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-breadcrumb-background-color-active	#014AD8		Couleur du fil ariane quand activé
--nc-breadcrumb-background-color-completed	#014AD8		Couleur du fil ariane quand terminé
--nc-error-text-color	#f95151		Couleur de texte en cas d'alerte
--nc-otp-code-border-color	#014AD8		Couleur de bordure du champ OTP
--nc-otp-code-text-color	#014AD8		Couleur de texte dans le champ OTP
--nc-otp-phone-number-color	#014AD8		Couleur de texte pour le numéro de mobile

Exemple de fichier CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');

:root {
    /* font family to use in the application */
    --nc-font-family: 'Quicksand';
    /* main font text color */
    --nc-font-color: #333;
    /* main font text size */
    --nc-font-size: 1rem;

    /* Global */
    --nc-primary-color: #014AD8;
    --nc-secondary-color: #f95151;
    --nc-background: #F5F8FF;

    /* Button */
    /* button text size */
    --nc-button-font-size: 16px;
    /* button text font weight */
    --nc-button-font-weight: bold;
    /* button text transform */
    --nc-button-text-transform: uppercase;
    /* button border radius */
    --nc-button-border-radius: 8px;
    /* button background color */
    --nc-button-active-background: var(--nc-primary-color);
    /* button text color */
    --nc-button-active-text-color: #FFF;
    /* button background color when disabled */
    --nc-button-disabled-background: rgba(47, 95, 227, 0.25);
    /* button text color when disabled */
    --nc-button-disabled-text-color: rgba(255, 255, 255, 0.8);
    /* button background secondary color */
    --nc-button-active-secondary-background: var(--nc-secondary-color);
    /* button text secondary color */
    --nc-button-active-secondary-color: #FFF;
    --nc-link-color: var(--nc-primary-color);

    /* Checkbox */
    /* checkbox background color when selected */
    --nc-checkbox-background: #2F5FE3;
    /* checkbox border color */
    --nc-checkbox-border-color: #014AD8;
    /* checkbox width */
    --nc-checkbox-width: 20px;
    /* checkbox height */
    --nc-checkbox-height: 20px;

    /* Breadcrumb */
    --nc-breadcrumb-background-color-active: var(--nc-primary-color);
    --nc-breadcrumb-background-color-completed: var(--nc-primary-color);

    /* Danger */
    --nc-error-text-color: #f95151;

    /* OTP */
    --nc-otp-code-border-color: var(--nc-primary-color);
    --nc-otp-code-text-color: var(--nc-primary-color);
    --nc-otp-phone-number-color: var(--nc-primary-color);

}

Liste des classes CSS clés

Il existe plusieurs classes CSS clés dans l'interface facilement identifiable avec un outil de développeur du navigateur. Nous listons ci-dessous la liste des classes CSS clés à utiliser pour cibler les éléments de la page.

Nous fournissons également en violet les clés de traduction à modifier dans le fichier strings.custom_fr.json

Paramétrage des textes de la nouvelle page de signature

Pour obtenir une intégration visuelle complète, il est possible de configurer en plus de l’apparence, les textes de l'interface en fournissant dans le fichier strings.custom_fr.json les clés de traduction à modifier suivante :

"SIGNATURE_PRETTY": {
    "STEP_DOWNLOAD_BEFORE": "Téléchargement de vos documents",
    "STEP_DOCUMENT_REVIEW": "Lecture des documents",
    "STEP_CONSENTS_CLIENT": "Valider les clauses de consentement",
    "STEP_SIGNATURE": "Signature",
    "STEP_OTP_AND_SIGNATURE": "Vérification & Signature",
    "STEP_DOWNLOAD_AFTER": "Téléchargement de vos documents signés",
    "DOWNLOAD_ALL_DOCUMENTS": "Télécharger vos documents",
    "CONTINUE": "Continuer",
    "DOWNLOAD_BEFORE_INSTRUCTIONS": "Avant de commencer, veuillez télécharger vos documents",
    "DOCUMENTS_ALREADY_DOWNLOADED": "Vous avez déjà télécharger vos documents, ",
    "DOWNLOAD_AGAIN": "télécharger à nouveau",
    "DOCUMENTS_COUNT": "Nombre de documents :",
    "DOCUMENTS_REVIEW_INSTRUCTIONS": "Consulter vos documents avant d’en confirmer la lecture",
    "CONSENTS_CLIENT_INSTRUCTIONS": "Veuillez valider les clauses de consentements ci-dessous",
    "SIGNATURE_PROCESS_INSTRUCTIONS": "Veuillez signer vos documents",
    "SIGNATURE_PROCESS_INSTRUCTIONS_OTP": "Veuillez renseigner votre code secret et signer vos documents",
    "DOWNLOAD_AFTER_INSTRUCTIONS": "Veuillez télécharger vos documents signés",
    "READ_MY_DOCUMENT": "J'ai lu mon document",
    "SKIP_STEP": "Passer à l'étape suivante",
    "CLIENT_DOCUMENTS_TO_SIGN": "Revoir vos documents",
    "CLIENT_CONSENTS": "Clauses de consentement",
    "QES_TERMS_OF_USE": "Termes et conditions de la signature qualifiée",
    "REQUIRED_CLAUSE": "(*) consentement obligatoire",
    "CLOSE_VIEWER": "Fermer",
    "QES_FORM_LINK": "Voir le <a href=\"{{link}}\" target=\"_blank\">formulaire de demande de certificat</a>",
    "QES_TERMS_ALREADY_VALIDATED": "Vous avez déjà valider les termes et conditions de la signature qualifiée.",
    "REFUSE_SIGNATURE_DESC": "Vous vous apprêtez à refuser la signature de vos documents. Cette action est <span class='text-danger'>définitive</span>.",
    "REFUSE_SIGNATURE_ASK": "Voulez vous continuer ?",
    "REFUSE_SIGNATURE_YES": "Oui refuser la signature",
    "REFUSE_SIGNATURE_COME_BACK": "Non, revenir à la signature",
    "OTP_RECEIVE_CODE": "Recevoir le code secret",
    "OTP_FILL_CODE": "Entrez le code",
    "OTP_SCHEDULED_EXPLANATION_CODE": "Nous allons vous envoyer un code à usage unique sur ce numéro",
    "OTP_SENT_EXPLANATION_CODE": "Nous avons envoyé un code de vérification par SMS sur ce numéro",
    "OTP_RECEIVE_CODE_BUTTON": "Recevoir le code secret",
    "ERROR_EXPLANATION": "Votre demande n’a pas pu être envoyée",
    "ERROR_RETRY": "Recommencer le processus",
    "ERROR_CLOSE": "Fermer",
    "OTP_CODE_EXPIRATION": "Votre code secret expire dans",
    "OTP_CODE_EXPIRED_MUST_RETRY": "Votre code secret a expiré. Veuillez demander l'envoi d'un nouveau code.",
    "OTP_CODE_EXPIRATION_REACHED": "Votre code secret a expiré.",
    "RESEND_OTP": "Renvoyer le code secret",
    "SIGN_YOUR_DOCUMENTS": "veuillez cliquer sur le bouton ci-dessous pour signer",
    "PROCEED_SIGNATURE": "Signer mes documents",
    "SIGNATURE_IN_PROGRESS": "Signature en cours"
  }

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.