Skip to content

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:

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

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

documentDefaultLoading

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

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

frontCapture reverseCapture 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 60000.

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

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

  • #488bff colorPrimaryLight (#488bff)
  • #0f6984 colorPrimaryDark (#0f6984)
  • #ecb25c colorPrimaryMain (#ecb25c)
  • #bfff00 colorNeutral00 (#bfff00)
  • #2bd2d8 colorNeutral05 (#2bd2d8)
  • #7c7ced colorNeutral20 (#7c7ced)
  • #c84ac2 colorNeutral40 (#c84ac2)
  • #000000 colorNeutral80 (#000000)
  • #ecb25c colorAlertDetection (#ecb25c)
  • #7c1111 colorAlertError (#7c1111)
  • #ecb25c colorAlertWarning (#ecb25c)
  • #4da32c colorAlertSuccess (#4da32c)
  • #ecb25c colorAlertSuccessDark (#ecb25c)
  • radiusSm (3px)

Loading

loadingTheme

Instructions

guideModalTheme

Face detection

faceDetectionTheme

Document detection

documentDetectionTheme

Success tick

successTickTheme

Feedback

feedbackTheme