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

Selfie configuration¶

Loading¶

Number	Parameter	Default value (EN/ES)
1	generic.views.loading.media
2	generic.views.loading.card.title	Loading	Cargando

Passive Capture¶

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: sdkSelfie.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	sdkSelfie.views.instructions.card.title.selfie	[ Position yourself in front of the camera, ]	[ Posiciónese frente a la cámara, ]
3	sdkSelfie.views.instructions.card.subtitle.selfie	[ Make sure you are not wearing sunglasses, hats, or other items that cover your face, ]	[ Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara, ]
4	sdkSelfie.views.instructions.card.media.selfie	[ /images/selfie_desktop.png, /images/selfie_desktop.png, ]
5	sdkSelfie.views.instructions.buttons.startProcess.text	Start	Comenzar
6	sdkSelfie.views.instructions.card.buttons.previous.media sdkSelfie.views.instructions.card.buttons.previous.text	/images/arrow-left.svg Previous	Anterior
7	sdkSelfie.views.instructions.progressIndicator.show	true
8	sdkSelfie.views.instructions.card.buttons.next.media sdkSelfie.views.instructions.card.buttons.next.text	/images/arrow-right.svg Next	Siguiente

Capture¶

Alt

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	sdkSelfie.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	sdkSelfie.views.capture.guidance.selfie.card.header	Follow the instructions	Siga las instrucciones

Success¶

Alt

Number	Parameter	Default value
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	sdkSelfie.views.capture.successTick.show	true

Review Image¶

The review image screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.reviewImage.active. By default, this parameter is false.

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	sdkSelfie.views.reviewImage.card.title	Make sure the face appears good and has a natural expression	Asegúrese de que la cara se ve bien y tiene una expresión natural
3	sdkSelfie.views.reviewImage.card.buttons.continue.text	Continue	Continuar
4	sdkSelfie.views.reviewImage.card.buttons.repeat.text	Repeat	Repetir

Active Capture¶

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: sdkSelfie.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	sdkSelfie.views.instructions.card.title.head	[ Position yourself in front of the camera, Follow the instructions, ]	[ Posiciónese frente a la cámara, Siga las instrucciones, ]
3	sdkSelfie.views.instructions.card.subtitle.head	[ Make sure you are not wearing sunglasses, hats, or other items that cover your face, Fit the face in the frame and move your head slightly in the directions indicated by the arrow., ]	[ Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara, Encaje la cara en el marco y mueva la cabeza ligeramente en las direcciones que le vaya indicando la flecha, ]
4	sdkSelfie.views.instructions.card.media.head	[ /images/sap_desktop.png, /images/sap_desktop.png, /images/sap_desktop.png, ]
5	sdkSelfie.views.instructions.buttons.startProcess.text	Start	Comenzar
6	sdkSelfie.views.instructions.card.buttons.previous.media sdkSelfie.views.instructions.card.buttons.previous.text	/images/arrow-left.svg Previous	Anterior
7	sdkSelfie.views.instructions.progressIndicator.show	true
8	sdkSelfie.views.instructions.card.buttons.next.media sdkSelfie.views.instructions.card.buttons.next.text	/images/arrow-right.svg Next	Siguiente

Capture Selfie¶

Alt

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	sdkSelfie.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	sdkSelfie.views.capture.guidance.selfie.card.header	Follow the instructions	Siga las instrucciones

Capture Challenge¶

Alt

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	sdkSelfie.views.capture.head.card.title.movement	Head movements	Movimientos de cabeza
4	sdkSelfie.views.capture.head.card.title.left sdkSelfie.views.capture.head.card.title.right sdkSelfie.views.capture.head.card.title.top sdkSelfie.views.capture.head.card.title.bottom sdkSelfie.views.capture.head.card.title.back	Turn your head to the LEFT Turn your head to the RIGHT Turn your head to the TOP Turn your head to the BOTTOM Great! Look back to the CENTER	Gire su cara hacía la IZQUIERDA Gire su cara hacía la DERECHA Gire su cara hacía ARRIBA Gire su cara hacía ABAJO ¡Bien! Vuelva a mirar al CENTRO
5	sdkSelfie.views.capture.head.arrows.arrowTop	/images/topArrow.svg
6	sdkSelfie.views.capture.head.arrows.arrowRight	/images/rightArrow.svg
7	sdkSelfie.views.capture.head.arrows.arrowBottom	/images/bottomArrow.svg
8	sdkSelfie.views.capture.head.arrows.arrowLeft	/images/leftArrow.svg

Success¶

Alt

Number	Parameter	Default value
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	sdkSelfie.views.capture.successTick.show	true

Review Image¶

The review image screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.reviewImage.active. By default, this parameter is false.

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	sdkSelfie.views.reviewImage.card.title	Make sure the face appears good and has a natural expression	Asegúrese de que la cara se ve bien y tiene una expresión natural
3	sdkSelfie.views.reviewImage.card.buttons.continue.text	Continue	Continuar
4	sdkSelfie.views.reviewImage.card.buttons.repeat.text	Repeat	Repetir

Common to Active and Passive Capture¶

Additionally, there are some timing configuration parameters related to capture.

Parameter	Description	Default Value
sdkSelfie.views.capture.detectionTimeout	Duration in milliseconds after which the capture should stop recording and shut down.	300000 ms. Max is 300000, min 60000.

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	sdkSelfie.views.deviceRotated.card.media	/images/rotateMedia.gif
2	sdkSelfie.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	sdkSelfie.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	sdkSelfie.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	sdkSelfie.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

Challenge Error¶

This error occurs during the active selfie capture when it fails to detect the correct movement as required in the challenge.

Alt

Number	Parameter	Default Value
1	generic.common.ui.logo.show generic.common.ui.logo.media	false -
2	sdkSelfie.views.feedback.errors.validation.card.title	The process could not be completed. Please, try again	No se ha podido completar el proceso. Por favor, inténtelo de nuevo
3	sdkSelfie.views.feedback.errors.validation.card.buttons.restart.text	Restart	Reiniciar
4	generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media	false /images/closeButton.svg

Configuration object¶

{
    "$schema": "./assets/schema.json",
    "sdkSelfie": {
        "flowType": "selfie",
        "pathAssets": "assets",
        "views": {
            "deviceRotated": {
                "active": true
            },
            "capture": {
                "head": {
                    "arrows": {
                        "arrowTop": "/images/topArrow.svg",
                        "arrowRight": "/images/rightArrow.svg",
                        "arrowBottom": "/images/bottomArrow.svg",
                        "arrowLeft": "/images/leftArrow.svg"
                    }
                }
            },
            "instructions": {
                "active": false
            },
            "reviewImage": {
                "active": true
            }
        }
    },
    "generic": {
        "theme": {},
        "common": {
            "ui": {
                "buttons": {
                    "close": {
                        "show": true
                    }
                }
            }
        }
    }
}

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