# Module SelfID

## 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

| **CSS Variable** | **Default value** | **Description** |
|  --- | --- | --- |
| --nc-font-family | 'Quicksand', sans-serif; | global text font |
| --nc-font-weight | 500 | font-weight for global text |
| --nc-font-color | #333333 | global text color |
| --nc-font-size | 1rem | global font size |
| --nc-button-active-background | #014AD8 | background color for buttons |
| --nc-button-active-color | #FFFFFF | text color for buttons |
| --nc-button-disabled-background | rgba (47, 95, 227, 0.25) | background-color for disabled buttons |
| --nc-button-disabled-color | rgba (255, 255, 255, 0.8) | text color for disabled buttons |
| --nc-button-font-size | 16px | text size for buttons |
| --nc-button-font-weight | bold | font-weight for text in buttons |
| --nc-button-text-transform | uppercase | can be used to make button text appear in uppercase or lowercase |
| --nc-button-border-radius | 8px | border-radius size for buttons |
| --nc-checkbox-container-checked-background | #FFFFFF | checkbox container background color when selected |
| --nc-checkbox-background | #2F5FE3 | background-color for checkboxes |
| --nc-checkbox-checkmark-color | #FAFAFA | checkbox color when selected |
| --nc-checkbox-border-color | ##014AD8 | border color of the checkbox |
| --nc-checkbox-width | 20px | checkbox width size |
| --nc-checkbox-height | 20px | checkbox height size |
| --nc-link-color | #014AD8 | link text color |
| --nc-box-background | rgba (1, 74, 216, 0.03) | background color for the box panel in first step |
| --nc-box-border-radius | 8px | border-radius for the box panel in first step |
| --nc-box-document-type-background | #FFFFFF | background-color for item selection in document type step |
| --nc-box-document-type-border-radius | 8px | border-radius for item selection in document type step |
| --nc-progress-bar-background | #014AD8 | background color for the progress bar in upload step |
| --nc-validation-color | #1af9b6 | color used in animations during video recording screens |
| --nc-live-control-succeed-color | rgb (25, 216, 115) | color indicating that the real-time control over sharpness is on |
| --nc-live-control-fail-color | rgb (255, 57, 57) | color indicating that the real-time control on sharpness is not passing |


### Example of a CSS file


```
:root {
  --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 intro step interface](/assets/module-selfid-app-intro-step.7bcb4d6db7b3b2e352627f1b81e5a98675ca370215f49d7ac6b73f39bda28ab6.c6e0f37c.png)

#### **App-document-type-step**

![App document type step interface](/assets/module-selfid-app-document-type-step.8bb6d46cf467a17afd49fc8a43b9944a17488756886a9d80446f56ee5941b98f.c6e0f37c.png)

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

![App guide lines document step interface - screen 1](/assets/module-selfid-app-guide-lines-document-step-1.744b6300ba8b97706ba54b110304fbabef11fb0cda840ef84a9df7902964b596.c6e0f37c.png)

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

![App guide lines document step interface - screen 2](/assets/module-selfid-app-guide-lines-document-step-2.7927558c17ce74b84b0e6abe88450775107858592ef2875e0d1456fad191826b.c6e0f37c.png)

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

![App guide lines document step interface - screen 3](/assets/module-selfid-app-guide-lines-document-step-3.1fb66ab65589b65a033c2e4c9e9b9a947e94fbf8fa0955d95192c9e3e19b9cd6.c6e0f37c.png)

#### **App-video-document-step (1)**

![App video document step interface - screen 1](/assets/module-selfid-app-video-document-step-1.8eabcc0f8cb0d69ca8086f233b7eaf596b7ba0d2af7e53c5921cd3d6f50bb4f7.c6e0f37c.png)

#### **App-video-document-step (2)**

![App video document step interface - screen 2](/assets/module-selfid-app-video-document-step-2.c5e7cfba34ce5433bd2f769cb4f9d19e3e47d590a2f93def72b06d15438f483f.c6e0f37c.png)

#### **App-video-document-step (3)**

![App video document step interface - screen 3](/assets/module-selfid-app-video-document-step-3.0302d81973aea258ace18e831e3f3dbf8bdba60b23fe8b015b1d7d1a469c575e.c6e0f37c.png)

#### **App-video-document-step (4)**

![App video document step interface - screen 4](/assets/module-selfid-app-video-document-step-4.f4c9cb31ab05a38ef1be947ac419f1eef491ca164182d8c358096d46a5875da3.c6e0f37c.png)

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

![App guide lines selfie step interface - screen 1](/assets/module-selfid-app-guide-lines-selfie-step-1.4a89032cdf14fd3e08613b21fbd8990cc0c4824f1c26aa9a8c47fa9ac66180a2.c6e0f37c.png)

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

![App guide lines selfie step interface - screen 2](/assets/module-selfid-app-guide-lines-selfie-step-2.818ba1d584dddf3015f8a0981070ffea239df4e2de2a6432fe5506a1475c31d4.c6e0f37c.png)

#### **App-video-seflie-step**

![App video selfie step interface](/assets/module-selfid-app-video-selfie-step.e201adad9fedf294d783af02d1173c052b545fc86ab573efcffb7abe0dc7f4c4.c6e0f37c.png)

#### **App-sending-step (1)**

![App sending step interface - screen 1](/assets/module-selfid-app-sending-step-1.a94c054af567044d29a75fb03895ef28c3fc9da51b862991d0822801979590f6.c6e0f37c.png)

#### **App-sending-step (2)**

![App sending step interface - screen 2](/assets/module-selfid-app-sending-step-2.cd6dff3708e90fb864c0f7505ce30caaaae10836c26806b73c65e58626e1ee37.c6e0f37c.png)

#### **App-final-step**

![App final step interface](/assets/module-selfid-app-final-step.5716453fe98209c1cf9a22eb4c185a18929194c20af9db4ec0b24c86e3e238ea.c6e0f37c.png)

## 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](/assets/fr.4c068518c2667e1d1921af4d29111701b8216e2c2bc4b97c1e3f8f3ae63db198.057de600.json)
    * *strings.custom-video-identification_en.json*: [English file](/assets/en.4d8da13b120f54962777c9aa8fc7516ab85e5030f53a6e45cb75416ea68bb28d.057de600.json)
    * *strings.custom-video-identification_it.json*: [Italian file](/assets/it.4aac2811c81e0438e0ce84ece8dac123d82022d30d34825d5ccd7490257bbb0c.057de600.json)
    * *strings.custom-video-identification_es.json*: [Spanish file](/assets/es.69136d5fc4690d2e9c4d9feeb2dd6375ffc12c18550fc0018d9d4ab5fd4cc140.057de600.json)
    * *strings.custom-video-identification_nl.json*: [Dutch file](/assets/nl.1e5cb2eab2417e4f2cbd0dc420e66f62b9fe270b067063e655f2151720ef3bb5.057de600.json)
    * *strings.custom-video-identification_pt.json*: [Portuguese file](/assets/pt.35d1af657e8a0001987c5f06e93eeb5fe2220610dde188ef185fd5ebb9f40fc0.057de600.json)
    * *strings.custom-video-identification_ro.json*: [Romanian file](/assets/ro.9f91f956df651c24a3e39bee6190b5d4708052e6bbec1c953e41a212ed40d1dd.057de600.json)
    * *strings.custom-video-identification_de.json*: [German file](/assets/de.fee8cb0655e7e59996378acff71f6122a4592332fdd74a5ed25a758a9887781d.057de600.json)
    * *strings.custom-video-identification_hr.json*: [Croatian file](/assets/hr.b975d5ba73ed2a3700d6d3921609fa1e14e1bfc70c8c48a3f20eafb9af7cd1bc.057de600.json)


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.