New signature page

Introducing

We have developed a new user experience for the signature pages to offer a smoother navigation. The process is broken down into clear steps, guided by a breadcrumb trail. We've made it easier to view contracts or download them; this new interface is an option on the fee-based route.

Customize display for new signature page

You can configure the appearance of the new signature page by adding CSS to the same SignBook custom.css file.

This CSS file can contain your own CSS, but the recommended method is to use the CSS variables listed below:

List of CSS variables

Variable CSS	Valeur par défaut	Aperçu	Description
--nc-font-family	'Quicksand', sans-serif;		global text font
--nc-font-color	#333333		global text color
--nc-font-size	1rem		global font size
--nc-primary-color	#014AD8		Global primary color
--nc-secondary-color	#f95151		Global secondary color
--nc-background	#F5F8FF		Background color
--nc-button-active-background	#014AD8		Buttons background color
--nc-button-active-text-color	#FFFFFF		Buttons text color
--nc-button-disabled-background	rgba(47, 95, 227, 0.25)		Background of disabled buttons
--nc-button-disabled-text-color	rgba(255, 255, 255, 0.8)		Text color of disabled buttons
--nc-button-font-size	16px		Text size of buttons
--nc-button-font-weight	bold		Font weight for text buttons
--nc-button-text-transform	uppercase		can be used to make button text appear in uppercase
--nc-button-border-radius	8px		border radius size for buttons
--nc-button-active-secondary-background	#f95151		Background color of secondary buttons
--nc-button-active-secondary-color	#FFFFFF		Text color of secondary buttons
--nc-checkbox-background	#2F5FE3		Background color of checkboxes
--nc-checkbox-border-color	##014AD8		Border color of checkboxes
--nc-checkbox-width	20px		Checkbox width size
--nc-checkbox-height	20px		Checkbox height size
--nc-link-color	#014AD8		Link text color
--nc-breadcrumb-background-color-active	#014AD8		Breadcrumb color when step is active
--nc-breadcrumb-background-color-completed	#014AD8		Breadcrumb color when step is ended
--nc-error-text-color	#f95151		Text color for danger or error
--nc-otp-code-border-color	#014AD8		Border color for OTP field
--nc-otp-code-text-color	#014AD8		Text color for OTP field
--nc-otp-phone-number-color	#014AD8		Text color for mobile phone number

Example of a CSS file

@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);

}

List of notable CSS classes

There are several key CSS classes in the interface that are easily identifiable with a browser developer tool. We list below the key CSS classes to be used to target page elements.

In purple, we also provide the translation keys to be modified in the strings.custom_en.json file.

Setting texts for the new signature page

For complete visual integration, in addition to the appearance, you can also configure the interface texts by providing the following translation keys in the strings.custom_en.json file:

"SIGNATURE_PRETTY": {
   "STEP_DOWNLOAD_BEFORE": "Download your documents",
   "STEP_DOCUMENT_REVIEW": "Reading documents",
   "STEP_CONSENTS_CLIENT": "Validate consent clauses",
   "STEP_SIGNATURE": "Signature",
   "STEP_OTP_AND_SIGNATURE": "Verification & Signature",
   "STEP_DOWNLOAD_AFTER": "Download your signed documents",
   "DOWNLOAD_ALL_DOCUMENTS": "Download your documents",
   "CONTINUE": "Continue",
   "DOWNLOAD_BEFORE_INSTRUCTIONS": "Before you begin, please download your documents",
   "DOCUMENTS_ALREADY_DOWNLOADED": "You have already downloaded your documents, ",
   "DOWNLOAD_AGAIN": "download again",
   "DOCUMENTS_COUNT": "Number of documents:",
   "DOCUMENTS_REVIEW_INSTRUCTIONS": "Consult your documents before confirming their reading",
   "CONSENTS_CLIENT_INSTRUCTIONS": "Please validate the consent clauses below",
   "SIGNATURE_PROCESS_INSTRUCTIONS": "Please sign your documents",
   "SIGNATURE_PROCESS_INSTRUCTIONS_OTP": "Please enter your secret code and sign your documents",
   "DOWNLOAD_AFTER_INSTRUCTIONS": "Please download your signed documents",
   "READ_MY_DOCUMENT": "I have read my document",
   "SKIP_STEP": "Proceed to next step",
   "CLIENT_DOCUMENTS_TO_SIGN": "Review your documents",
   "CLIENT_CONSENTS": "Consent clauses",
   "QES_TERMS_OF_USE": "Qualified signature terms and conditions",
   "REQUIRED_CLAUSE": "(*) mandatory consent",
   "CLOSE_VIEWER": "Close",
   "QES_FORM_LINK": "See the <a href=\"{{link}}\" target=\"_blank\">certificate application form</a>",
   "QES_TERMS_ALREADY_VALIDATED": "You have already validated the terms and conditions of the qualified signature.",
   "REFUSE_SIGNATURE_DESC": "You are about to refuse to sign your documents. This action is <span class='text-danger'>final</span>.",
   "REFUSE_SIGNATURE_ASK": "Would you like to continue?",
   "REFUSE_SIGNATURE_YES": "Yes, refuse the signature",
   "REFUSE_SIGNATURE_COME_BACK": "No, go back to signing",
   "OTP_RECEIVE_CODE": "Receive the secret code",
   "OTP_FILL_CODE": "Enter code",
   "OTP_SCHEDULED_EXPLANATION_CODE": "We'll send you a one-time code to this number",
   "OTP_SENT_EXPLANATION_CODE": "We have sent a verification code by SMS to this number",
   "OTP_RECEIVE_CODE_BUTTON": "Receive the secret code",
   "ERROR_EXPLANATION": "Your request could not be sent",
   "ERROR_RETRY": "Restart the process",
   "ERROR_CLOSE": "Close",
   "OTP_CODE_EXPIRATION": "Your secret code expires in",
   "OTP_CODE_EXPIRED_MUST_RETRY": "Your secret code has expired. Please request a new code.",
   "OTP_CODE_EXPIRATION_REACHED": "Your secret code has expired.",
   "RESEND_OTP": "Resend secret code",
   "SIGN_YOUR_DOCUMENTS": "Please click on the button below to sign",
   "PROCEED_SIGNATURE": "Sign my documents",
   "SIGNATURE_IN_PROGRESS": "Signature in progress"
}

It's advisable to redefine only those keys you feel you need to modify. If you don't want to modify certain keys, there's no need to supply them, as the default value will automatically be used.