UI Customization: FaceMatch module

Setting the appearance of the Video FaceMatch

It is possible to configure the appearance of the FaceMatch video by providing an additional CSS file named custom-video-identification.css, provided in the signbook customization.zip archive ().

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

List of CSS variables

Example of a CSS file

: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;
}

List of notable CSS classes

Several CSS classes in the interface are easily identifiable with a browser developer's tool, We list below the main CSS classes to be used to target each page element:

App-intro-step

App-document-type-step

App-guide-lines-document-step (1)

App-guide-lines-document-step (2)

App-guide-lines-document-step (3)

App-video-document-step (1)

App-video-document-step (2)

App-video-document-step (3)

App-video-document-step (4)

App-guide-lines-selfie-step (1)

App-guide-lines-selfie-step (2)

App-video-seflie-step

App-sending-step (1)

App-sending-step (2)

App-final-step

Video FaceMatch text customization

To achieve full visual integration, in addition to the appearance, you can configure the interface texts for video identification, by supplying an additional file named strings. custom-video-identification_[lang].json to be included in the SignBook customization ZIP archive.

• strings. custom-video-identification_[lang].json: Used to redefine texts for the selected language. Replace [lang] with the corresponding language code (example: fr or en). It is advisable to use a suitable editor (e.g. Notepad++) to edit this file in JSON FORMAT. Note that this file must be encoded in UTF-8.

  • Customization files available :

    • strings.custom-video-identification_fr.json: Default file

    • strings.custom-video-identification_en.json: English file

    • strings.custom-video-identification_it.json: Italian file

    • strings.custom-video-identification_es.json: Spanish file

    • strings.custom-video-identification_nl.json: Dutch file

    • strings.custom-video-identification_pt.json: Portuguese file

    • strings.custom-video-identification_ro.json: Romanian file

    • strings.custom-video-identification_de.json: German file

    • strings.custom-video-identification_hr.json: Croatian file

It is recommended to redefine only those keys you feel need to be changed. If you do not wish to modify certain keys, you do not need to provide them, as the default value will automatically be used.