Configuration

There is a list of the different customizable parameters of the SDK

SDK Configuration

• targetSelector (string) -> The (unique inside the HTML document) CSS selector of the element VDAlive should attach to.

• webrtcUnsupportedText (string) -> Text to display to the user if webRTC is not supported on the user’s browser.This message will only be visible if displayErrors is enabled.

• displayErrors (boolean) -> Whether to see errors in the UI.

• infoAlertShow (boolean) -> Whether to display a "heads-up" confirmation dialog warning detection is about to start

• closeButton (boolean) -> Whether to display a button that shuts down the SDK

• smileRequestSmile (string) -> Text displayed during the smile request in selfie Alive.

• aliveChallenge (object) -> Challenge to ask the user to complete.

• stepChallenge (string) -> Text displayed in current step challenge in selfie Alive.

• smileRequestSerious (string) -> Text displayed during the serious request in selfie Alive.

• fitYourFace (string) -> Text displayed previously to start the face detection.

• infoReviewImageText (object) -> Text to display to let the user review the captured image

• setLandscapeDeviceMessage (string) -> Text to display to let the user rotate the device in landscape mode

• setPortraitDeviceMessage (string) -> Text to display to let the user rotate the device in portrait mode

• stepOfChallenge (string) -> Text displayed total steps challenge in selfie Alive.

• setMessageDisplayOpacity (string) -> Container opacity to display the messages

• setMessageDisplayWidth (string) -> Container width to display the messages

• detectionTimeout (number) -> Duration in milliseconds after which the sdk should stop recording and shut down. Max is 300000, min 60000

• repeatText (string) -> Label for the button that allows the user to click and repeat detection, if the captured image was defective

• reviewImage (boolean) -> Whether to display a confirmation dialog showing the captured image, for the user to continue or repeat detection

• continueText (string) -> Label for the button that allows the user to click and move to the next stage

• message_alive_light (string) -> Message to ask the user to move his/her face

• message_alive_bold (string) -> Bold message to get the user attention

• message_middle_center (string) -> Message to ask the user to look to the center

• message_finish_challenge (string) -> Message to ask the user to look to the center

• restartingErrorText (string) -> Message to tell the user to repeat the process

• logEventsToConsole (boolean) -> Whether or not tol log events (camera start, etc) to the console

• sdkBackgroundColorInactive (string) -> Background color of the sdk before detection starts

• borderColorCenteringAidInactive (string) -> Border color of the centering aid, before detection process starts

• ngas_images_path (string) -> URL path append to images NGAS ( head gifs )

• borderColorCenteringAidDetecting (string) -> Border color of the centering aid, when face is being "seen"

• detectionMessageTextColorSelfie (string) -> Text color of messages overlayed while SDK is actively trying to capture a target.

• detectionMessageTextColor (string) -> Background color of close and help user buttons.

• detectionMessageBackgroundColorSelfie (string) -> Background color of messages overlayed while SDK is actively trying to capture a target.

• detectionMessageBorderRadius (string) -> Set custom message box border radius values.

• confirmationDialogBackgroundColor (string) -> Background color of confirmation dialogs

• confirmationDialogTextColor (string) -> Text color of confirmation dialogs

• showSpinner (boolean) -> Show spinner after face detection

• confirmationColorTick (string) -> Tick color icon when capture success

• customConfirmationImageTick (string) -> Tick image icon path used when capture success

• loadingSpinnerColor (string) -> Loading spinner color

• errorDisplayTextColor (string) -> Text color of error display

• errorDisplayBackgroundColor (string) -> Background color of error display

• errorDisplayIconColor (string) -> Background color of error icon display.

• errorActionButtonBackgroundColor (string) -> Background color of error header display

• infoModalShow (boolean) -> Display a Info user Modal with steps instrucctions

• isInfoModalShow (boolean) -> Display button that allow to Display a Info user Modal with steps instrucctions

• errorActionButtonTextColor (string) -> Text color of error header display

• errorDisplayUserActionShow (boolean) -> Display user action in window error message

• infoUserImagesPath (string) -> URL path append to slide help images ( set empty if slider images have full URL )

• infoUserAliveHeaderColor (string) -> Config color on header text Slider

• infoUserAliveHeader (string) -> Config text on header in alive slides

• infoUserAliveTitleColor (string) -> Config color on title text Slider

• infoUserAliveSubTitle (object) -> Config subtitle alive help user modal

• infoUserAliveSubTitleColor (string) -> Config color on subTitle text Slider

• infoUserAliveMedia (object) -> Config image alive help user Slider

• infoUserAliveBackgroundColor (string) -> Config background color alive help user Slider

• infoUserAliveColorButton (string) -> Config Submit button background color in alive help user Slider

• infoUserAliveTitle (object) -> Config title alive help user modal

• infoUserAliveButtonText (string) -> Config text on Alive help user Slider submit button

• infoUserAliveNextButtonText (string) -> Config text on Alive help user Slider next button

• infoUserAliveNextButtonColor (string) -> Config text color on Alive help user Slider next button

• infoUserAlivePrevButtonColor (string) -> Config text color on Alive help user Slider prev button.

• infoUserAlivePrevButtonText (string) -> Config text on Alive help user Slider prev button

• videoErrorNotFound (string) -> Error to display to user if media device is not found

• videoErrorUnavailable (string) -> Error to display to user if media device is unavailable

• videoErrorPermission (string) -> Error to display to user if media does not have permission

• videoErrorConstraint (string) -> Error to display to user if media constraint is not correct

• videoErrorDefault (string) -> Error to display to user if there is a media default error

• videoErrorExternalInput (string) -> Error to display to user if a virtual camera is the input device

• videoErrorUnavailableActionLabel (string) -> Text label button to display if media device is unavailable

• videoErrorPermissionActionLabel (string) -> Text label button to display if media does not have permission

• videoErrorConstraintActionLabel (string) -> Text label button to display if media constraint is not correct

• videoErrorExternalInputLabel (string) -> Text label button to display if input device is virtual camera

• customOvalBorderRadius (string) -> Set custom oval face shape border radius values.

• borderThickness (number) -> Set custom line shape border thickness value.

• fontSize (Number) -> It is important to note that the base font size is established relative to the screen size, so bigger screens will correspond to bigger font sizes.
  Setting a number will represent the percent variation of the base font size; so if the number is positive [0, 100], it will increase it; but if it is negative [-100, 0], it will decrease it.

• pathModels (string) -> Set custom path to load detection models on sdk alive, always relative to index.html

• customOval (boolean) -> Set custom oval option.

• outerGlowCenteringAidDefault (string) -> Color of the translucid area surrounding the border of the centering aid, when detection is active but no target is being "seen".

• outerGlowCenteringAidDetecting (string) -> Color of the translucid area surrounding the border of the centering aid, when a target is being "seen".

• continueButtonColor (string) -> Color for the button that allows the user to click and move to the next stage.

• buttonBackgroundColorLight (string) -> Light color for continue button degraded style.

• buttonBackgroundColorDark (string) -> Dark color for continue button degraded style.

• continueButtonPadding (String) -> Padding of continue button in capture confirmation dialog. Padding Examples.

• buttonBackgroundColorLightRepeat (string) -> Light color for repeat button degraded style.

• buttonBackgroundColorDarkRepeat (string) -> Dark color for repeat button degraded style.

• repeatButtonColor (string) -> Color for the button that allows the user to click and move to the previous stage.

• repeatButtonPadding (String) -> Padding of repeat button in capture confirmation dialog. In this design, this value probably will not be appreciated due to this button has transparent background color. Padding Examples.

• stepsChallengeColor (string) -> Color of steps in alive challenge.

• not_move (string) -> Text displayed to stay face in the middle.

• center_face (string) -> Text displayed to center your face in the middle.

• showLogo (boolean) -> Display veridas logo.

• customLogo (string) -> Path of the logo.

• detectionStageCustomLogo (string) -> Path of the detection stage logo.

Padding examples

Padding can be set with different options:

One value (Example: padding: 10px) -> this value applies to all 4 sides (top-right-bottom-left).
Two values (Example: padding: 10px 5px) -> first value applies to top and bottom sides and second value applies to right and left sides.
Three values (Example: padding: 10px 5px 2px) -> first value is top, second is right and left; third is bottom.
Four values (Example: padding: 10px 5px 2px 8px) -> first value is top, second is right, third is bottom and fourth is left.

Every value (px or %) is set in relation to its element's width.

Language Configuration

By default, this SDK is configured in 2 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 parameters

Customization Examples

Recommended Values

Parameter	Value
infoUserAliveTitleColor (2)	#000D44
infoUserAliveSubTitleColor (3)	#000D44
infoUserAlivePrevButtonColor (4)	#000D44
infoUserAliveHeader (5)
infoUserAliveHeaderColor (5)	#000D44
infoUserAliveNextButtonColor (6)	#000D44
infoUserAliveColorButton (7)	#000D44
detectionMessageTextColor (9)	#000D44
outerGlowCenteringAidDefault (10)	#000D44
borderColorCenteringAidDetecting (11)	#078B3C
detectionMessageTextColorSelfie (12)	#000D44
stepsChallengeColor (18)	#000D44
confirmationColorTick (19)	#078B3C
confirmationDialogTextColor (21)	#000D44
buttonBackgroundColorLightRepeat (22)	transparent
buttonBackgroundColorDarkRepeat (22)	transparent
repeatButtonColor (22)	#000D44
buttonBackgroundColorLight (23, 15)	#000D44
buttonBackgroundColorDark (23, 15)	#000D44
errorDisplayBackgroundColor (24)	#FFFFFF
errorDisplayIconColor (25)	#000D44
errorDisplayTextColor (25)	#000D44
errorActionButtonBackgroundColor (26)	#FFFFFF
errorActionButtonTextColor (26)	#000D44
sdkBackgroundColorInactive (27)	#FFFFFF

Default Values

Parameter	Value
infoUserAliveMedia (1)	['slide03']
infoUserAliveTitle (2)	Follow the motion instructions Sigue las instrucciones de movimiento
infoUserAliveTitleColor (2)	#1a5eb0
infoUserAliveSubTitle (3)	1. Fit your face into the frame and wait for the countdown. 2. Turn your face in one direction following the arrows. 3. When the screen tells you that you have done it correctly, look back at the center. 4. Continue doing all the movements until finishing the process. 1. Encaje la cara en el marco y espere a la cuenta atrás. 2. Mueva la cabeza en la dirección que le indiquen las flechas. 3. Cuando la pantalla le indique que lo ha hecho correctamente, vuelva a mirar al centro. 4. Continúe realizando los movimientos solicitados hasta completar el proceso.
infoUserAliveSubTitleColor (3)	#868686
infoUserAlivePrevButtonText (4)	Previous Anterior
infoUserAlivePrevButtonColor (4)	#1a5eb0
infoUserAliveHeader (5)	Before starting the process, read these quick instructions Antes de comenzar el proceso, lee estas sencillas instrucciones
infoUserAliveHeaderColor (5)	#1a5eb0
infoUserAliveBackgroundColor (5)	#FFFFFF
infoUserAliveNextButtonText (6)	Next Siguiente
infoUserAliveNextButtonColor (6)	#1a5eb0
infoUserAliveColorButton (7)	linear-gradient(to right, #005db4, #009edd 100%)
infoUserAliveButtonText (7)	START THE PROCESS COMENZAR EL PROCESO
showLogo (8)	true
customLogo (8)	''
detectionStageCustomLogo (8)	''
detectionMessageTextColor (9)	#1A5EB0
outerGlowCenteringAidDefault (10)	#000000
outerGlowCenteringAidDetecting (10)	#001C00
borderColorCenteringAidInactive (11)	#DA270C
borderColorCenteringAidDetecting (11)	#3B9DD6
customOvalBorderRadius (11)	51% 49% 49% 51% / 33% 32% 68% 67%
smileRequestSmile (12)	Smile Sonría
smileRequestSerious (12)	Not smile No sonría
fitYourFace (12)	Now, place your face inside the frame and hold steady while we take a photo Ahora, encaja tu cara en el marco y mantente estable mientras tomamos una foto
setMessageDisplayOpacity (12)	1
setMessageDisplayWidth (12)	90%
detectionMessageTextColorSelfie (12)	#1A5EB0
detectionMessageBackgroundColorSelfie (12)	#FFF
detectionMessageBorderRadius (12)	16px
not_move (12)	Hold steady Mantente estable
center_face (12)	Center your face Centra su cara
showSpinner (13)	true
loadingSpinnerColor (13)	#FFFFFF
restartingErrorText (14)	We have not been able to detect their movements. The error may be happening for one of the following reasons: You have made the movement too fast or too slow You have turned your face in the opposite direction to that indicated It is backlit Lighting problems: it has low lighting or shadowed areas of the face Some element covers its face : bangs, cap, handkerchief, scarf... No hemos podido detectar sus movimientos. Puede que el error este sucediendo por alguna de las siguientes razones: Ha realizado el movimiento muy rápido o muy lento Ha girado la cara en la dirección contraria a la indicada Se halla a contraluz Problemas de iluminación: tiene baja iluminación o zonas de la cara sombreadas Algún elemento le tapa la cara: flequillo, gorra, pañuelo, bufanda...
message_middle_center (16)	Great! Look back at the center ¡Bien! Vuelve al centro
message_finish_challenge (16)	Great! ¡Bien!
message_alive_bold (16)	SLOWLY LENTAMENTE
message_alive_light (16)	Move your head Mueva la cabeza
ngas_images_path (17)	/public/gifs/
stepChallenge (18)	Step Paso
stepOfChallenge (18)	of de
stepsChallengeColor (18)	#1A5EB0
confirmationColorTick (19)	#1A5EB0
customConfirmationImageTick (19)
confirmationDialogBackgroundColor (20)	#FFFFFF
infoReviewImageText (21)	Check that the face looks complete and with a natural expression Revisa que la cara se ve completa y con una expresión natural
confirmationDialogTextColor (21)	#1A5EB0
repeatText (22)	REPEAT QUIERO REPETIR
buttonBackgroundColorLightRepeat (22)	#FFFFFF
buttonBackgroundColorDarkRepeat (22)	#FFFFFF
repeatButtonColor (22)	#1A5EB0
repeatButtonPadding (22)	2% 15%
continueText (23, 15)	CONTINUE CONTINUAR
continueButtonColor (23, 15)	#FFFFFF
buttonBackgroundColorLight (23, 15)	#3B9ED7
buttonBackgroundColorDark (23, 15)	#1A5EB0
continueButtonPadding (23, 15)	2% 15%
errorDisplayBackgroundColor (24)	#4D4B4E
webrtcUnsupportedText (25)	Navegador no compatible. Debe repetir el proceso en Safari. Not supported browser. You must repeat the process in Safari.
errorDisplayIconColor (25)	#FFFFFF
errorDisplayTextColor (25)	#FFFFFF
videoErrorUnavailable (25)	Please check that the device camera is not being used by another program Por favor, compruebe que la cámara del dispositivo no está siendo usada por otro programa
videoErrorNotFound (25)	Please check that the device has a camera Por favor, compruebe que el dispositivo dispone de cámara
videoErrorConstraint (25)	Please check that the device has a camera with a minimum resolution of 640 x 480 Por favor, compruebe que el dispositivo dispone de cámara de resolución mínima 640 x 480
videoErrorExternalInput (25)	Please check that you do not have any software simulating the camera Por favor, compruebe que no tiene ningún software simulando la cámara
videoErrorDefault (25)	Sorry, there was an error starting the camera Lo sentimos, se ha producido un error iniciando la cámara
videoErrorPermission (25)	Please allow the page to access the camera Por favor, permita a la página acceso a la cámara
errorActionButtonBackgroundColor (26)	transparent
errorActionButtonTextColor (26)	#FFFFFF
videoErrorUnavailableActionLabel (26)	Retry Reintentar
videoErrorConstraintActionLabel (26)	Retry Reintentar
videoErrorPermissionActionLabel (26)	Retry Reintentar
videoErrorExternalInputLabel (26)	Retry Reintentar
sdkBackgroundColorInactive (27)	#2E2E2E
setPortraitDeviceMessage (28)	Please, hold the device in portrait mode Por favor, ponga el dispositivo vertical
displayErrors	true
targetSelector
closeButton	false
infoAlertShow	true
aliveChallenge
detectionTimeout	300000
reviewImage	true
logEventsToConsole	false
errorDisplayUserActionShow	true
isInfoModalShow	false
infoModalShow	true
customOval	false
borderThickness	6
fontSize	0
pathModels	/public/models/