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¶

The language setting plays a crucial role in ensuring that users experience the onboarding process in a language that is familiar and comfortable to them. By default, the SDK utilizes the system/browser language to determine the appropriate default texts. If the system/browser language is either English (en) or Spanish (es), the corresponding default texts will be applied. However, if the system/browser language is not English or Spanish, the SDK will fall back to English as the default language, ensuring that users receive texts in a language they can understand.

When customizing texts within the setup sections, it's important to note that these customized texts will override the default texts included within the SDK. This feature allows for extensive personalization and localization of the onboarding experience, catering to specific cultural or regional preferences.

In instances where all texts are intended to be customized, there's no need to explicitly specify the language setting. The default language logic will be bypassed, and all text customizations will take precedence. This approach provides complete flexibility in tailoring the onboarding process to the desired language and cultural context.

Property	Type	Required	Default Value	Possible Values
language	string	No	`en` or `es` by system/browser language	"en", "es"

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:

Alt

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	[ Step 1: Center your face and say your full name, Step 2: Show your identity document, ]	[ Paso 1: Centre su cara y diga su nombre y apellidos, Paso 2: Muestre su documento de identidad, ]
3	sdkVideo.views.instructions.card.subtitle.video	[ Position your face within the circle and say your full name when prompted on the screen, Hold both sides of the document up to the camera, ensuring that all details are clearly visible ]	[ Coloque el rostro dentro del círculo y pronuncie su nombre y apellidos cuando se indique en pantalla, Muestre ambas caras del documento a cámara y asegúrese de que los datos sean claramente visibles, ]
4	sdkVideo.views.instructions.card.media.video	[ /images/selfie_desktop.png, /images/obverse_document_desktop.png, ]
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¶

Alt

Number	Parameter	Default value (EN/ES)
1	generic.common.ui.logo.show generic.common.ui.logo.media	false /images/veridasLogo.png	false /images/veridasLogo.png
2	generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media	false /images/closeButton.svg	false /images/closeButton.svg
3	sdkVideo.views.capture.guidance.selfie.card.title	Fit your face into the frame and look to the camera	Centre su cara en el marco, y mire hacia la cámara
4	sdkVideo.views.capture.guidance.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 sdkVideo.views.capture.guidance.selfie.tooClose.card.title sdkVideo.views.capture.guidance.selfie.tooFar.card.title	Say your first and last name out loud Stay still and do not smile Move away Get closer	Diga su nombre y apellidos en voz alta Manténgase estable y no sonría Aléjese Acérquese

Document capture¶

frontCapture reverseCapture

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 35000.

Document capture success¶

docSuccessBack

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.

Alt Alt

Number	Parameter	Default Value
1	sdkVideo.views.deviceRotated.card.media	/images/rotateMedia.gif
2	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	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	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.

cameraError

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

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"
    },
    ...
}