Configuration¶
The configuration can be inserted using two methods. To know more, please go to Initialize SDK in API section of this documentation.
Validation¶
The SDK internally validates the configuration received, following this process:
- Those properties not inserted in the config will take the default values, as shown below.
- Each filled property will have its type validated against the types as shown in the table below.
- Each filled property will be compared to the allowed values indicated in the table below in bold.
If all these steps are successful, the SDK will start normally. However, if any of these steps finds a misconfiguration, an error will be thrown via the browser's console and an error message will be shown in the browser's screen as well.
Language¶
By default, this SDK is configured in two languages: Spanish and English.
If the browser is set to Spanish, all texts and buttons will show in Spanish.
If the browser is set in English or any other language, all texts and buttons will be shown in English.
To show all texts in a different language (for example Catalonian, Basque, French, etc) It's mandatory to translate them all using the available text parameters Configuration table.
Media files¶
To configure the paths for the media files, please follow these instructions:
-
Make sure to include the directory where the file is located in the file name. For instance, if our file is stored in a folder named 'images', you should add the following to the file name: '/images/file_name.png'.
-
Keep in mind that the path for the media files may vary depending on the nested folders you have. For example, if the root directory (referred to as the pathAssets property) is 'assets', and within the assets folder, you have other subfolders like 'images', 'gifs', and so on, the media file path for GIF files would be '/gifs/file_name.gif'.
By following these guidelines, you can properly configure the paths for your media files.
Webview¶
The SDK is also compatible with Meta webviews, i.e. you can run it in Facebook and Instagram native apps for Android and iOS. To inform the user of a permissions problem (for example camera permissions) and how to fix them, the videoErrorPermission
property can be modified with the appropriate message.
"videoErrorPermission": {
"card": {
"title": "Please allow the page access to the camera",
"media": "danger.svg",
"header": "Error"
}
},
Configuration table¶
Loading¶
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.views.loading.media | ||
2 | generic.views.loading.card.title | Loading | Cargando |
Instructions¶
The instructional modal screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkVideo.views.instructions.active. By default, this parameter is true.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
2 | sdkVideo.views.instructions.card.title.video | [ Center your face and say your first and last name, Show your document to the camera on both sides, ] |
[ Centre su cara y diga su nombre y apellidos, Muestre su documento a cámara por ambos lados, ] |
3 | sdkVideo.views.instructions.card.subtitle.video | [ 1. Center your face within the frame and do not smile., 2. Say your first and last name out loud when prompted on screen, Show the document to the camera, first the front and then the back, as indicated on the screen, ] |
[ 1. Centre su cara en el marco, mire hacia la cámara y no sonría. , 2. Diga su nombre y apellidos en voz alta cuando se indique en pantalla, Muestre el documento a cámara, primero la parte delantera y luego la parte trasera, como se indica en pantalla, ] |
4 | sdkVideo.views.instructions.card.media.video | [ /images/video.jpg, /images/video1.jpg, ] |
|
5 | sdkVideo.views.instructions.card.buttons.previous.media sdkVideo.views.instructions.card.buttons.previous.text |
/images/arrow-left.svg Previous |
Anterior |
6 | sdkVideo.views.instructions.progressIndicator.show | true | |
7 | sdkVideo.views.instructions.card.buttons.next.media sdkVideo.views.instructions.card.buttons.next.text |
/images/arrow-right.svg Next |
Siguiente |
8 | sdkVideo.views.instructions.buttons.startProcess.text | Start | Comenzar |
Face capture¶
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
3 | sdkVideo.views.capture.guidance.preCapture.selfie.card.title | Fit your face into the frame | Centre la cara en el marco |
4 | sdkVideo.views.capture.guidance.preCapture.selfie.card.header | Follow the instructions | Siga las instrucciones |
5 | sdkVideo.views.capture.guidance.nameAndSurname.card.title sdkVideo.views.capture.guidance.selfie.centered.card.title |
Say your first and last name out loud Stay still and do not smile |
Diga su nombre y apellidos en voz alta Manténgase estable y no sonría |
Document capture¶
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
3 | sdkVideo.views.capture.guidance.preCapture.obverse.card.title sdkVideo.views.capture.guidance.preCapture.reverse.card.title |
Show the FRONT of the document to the FRONT CAMERA Show the BACK of the document to the FRONT CAMERA |
Muestre la parte DELANTERA del documento dentro del recuadro en la CÁMARA FRONTAL Muestre la parte TRASERA del documento dentro del recuadro en la CÁMARA FRONTAL |
4 | sdkVideo.views.capture.guidance.preCapture.obverse.card.short sdkVideo.views.capture.guidance.preCapture.reverse.card.short |
Fit the FRONT part of the document Fit the BACK part of the document |
Encaje la parte DELANTERA del documento Encaje la parte TRASERA del documento |
5 | sdkVideo.views.capture.guidance.obverse.card.header sdkVideo.views.capture.guidance.reverse.card.header |
Capture | Capture |
6 | sdkVideo.views.capture.centered.obverse.card.media sdkVideo.views.capture.centered.reverse.card.media |
/images/icon-ok.png | |
7 | sdkVideo.views.capture.centered.obverse.card.title sdkVideo.views.capture.centered.reverse.card.title |
Stay steady | Manténgase estable |
Common to Face and Document Capture¶
Additionally, there are some timing configuration parameters related to capture.
Parameter | Description | Default Value |
---|---|---|
sdkVideo.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 120000 ms. Max is 120000, min 60000. |
Document capture success¶
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
2 | sdkVideo.views.capture.success.obverse.card.title sdkVideo.views.capture.success.reverse.card.title |
Front part captured correctly Back part captured correctly |
Parte delantera capturada correctamente Parte trasera capturada correctamente |
3 | sdkVideo.views.capture.successTick.show | true |
Device Rotation Error¶
This error occurs when a process is being executed on a mobile device, and the orientation for capturing is incorrect. The proper way to capture a document is in a vertical or horizontal orientation, while other captures such as selfie and video are done in a vertical orientation.
Number | Parameter | Default Value | |
---|---|---|---|
1 | sdkDocument.views.deviceRotated.card.media sdkSelfie.views.deviceRotated.card.media sdkVideo.views.deviceRotated.card.media |
/images/rotateMedia.gif | |
2 | sdkDocument.views.deviceRotated.card.title sdkSelfie.views.deviceRotated.card.title sdkVideo.views.deviceRotated.card.title |
To continue, put the phone in HORIZONTAL orientation To continue, put the phone in VERTICAL orientation To continue, put the phone in VERTICAL orientation |
Para continuar, coloque el teléfono en orientación HORIZONTAL Para continuar, coloque el teléfono en orientación VERTICAL Para continuar, coloque el teléfono en orientación VERTICAL |
3 | sdkDocument.views.feedback.errors.orientationChangedRestartMessage.card.title sdkSelfie.views.feedback.errors.orientationChangedRestartMessage.card.title sdkVideo.views.feedback.errors.orientationChangedRestartMessage.card.title |
The process could not be completed due to an unexpected change in the device's orientation | No se ha podido completar el proceso debido a un cambio de orientación inesperado del dispositivo |
4 | sdkDocument.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkSelfie.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkVideo.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text |
Try again | Reintentar |
Permission Error¶
This error occurs when you have not provided the necessary camera and microphone permissions to the browser in order to complete the process.
Number | Parameter | Default value (EN/ES) | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
3 | sdkDocument.views.feedback.errors.videoErrorPermission.card.title sdkSelfie.views.feedback.errors.videoErrorPermission.card.title sdkVideo.views.feedback.errors.videoErrorPermission.card.title |
Please, make sure to allow the page access to the camera and microphone | Por favor, asegúrese de permitir a la página acceso a la cámara y micrófono |
4 | sdkDocument.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkSelfie.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkVideo.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text |
Try again | Reintentar |
Configuration object¶
{
"$schema": "./assets/schema.json",
"generic": {
"theme": {},
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
}
}
}
},
"sdkVideo": {
"flowType": {
"documents": "ES_IDCard_2015"
},
"views": {
"deviceRotated": {
"active": false
},
"capture": {
"successTick": {
"show": true
}
},
"instructions": {
"active": true
}
},
"pathAssets": "assets"
}
}
Theme¶
Below is an example of the SDK with the theme
properties modified in the configuration inside of generic
object.
Here you can check the configuration we used:
"generic": {
"theme": {
"colorPrimaryLight": "#488bff",
"colorPrimaryDark": "#0f6984",
"colorPrimaryMain": "#ecb25c",
"colorNeutral00": "#bfff00",
"colorNeutral05": "#2bd2d8",
"colorNeutral20": "#7c7ced",
"colorNeutral40": "#c84ac2",
"colorNeutral80": "#000000",
"colorAlertDetection": "#ecb25c",
"colorAlertError": "#7c1111",
"colorAlertWarning": "#ecb25c",
"colorAlertSuccess": "#4da32c",
"colorAlertSuccessDark": "#ecb25c",
"radiusSm": "3px"
},
...
}
Theme legend:
-
colorPrimaryLight (#488bff)
-
colorPrimaryDark (#0f6984)
-
colorPrimaryMain (#ecb25c)
-
colorNeutral00 (#bfff00)
-
colorNeutral05 (#2bd2d8)
-
colorNeutral20 (#7c7ced)
-
colorNeutral40 (#c84ac2)
-
colorNeutral80 (#000000)
-
colorAlertDetection (#ecb25c)
-
colorAlertError (#7c1111)
-
colorAlertWarning (#ecb25c)
-
colorAlertSuccess (#4da32c)
-
colorAlertSuccessDark (#ecb25c)
radiusSm (3px)