Configuration¶
There is a list of the different customizable parameters of the SDK
SDK Configuration¶
- documents (Array of strings) -> Each unique string represents a document type (“ES*DrivingLicense_2013”). The SDK expects an unique ID input to work in intelligent mode. See Appendix-A for the list of supported document types and country codes. This setting can not be used in conjunction with _documentsMinimal*, passport, paperDocumentItaly and documentsPaper. Example: documents: [‘ES_DrivingLicense_2004’]
- documentsMinimal (Array of strings) -> Works the same way the documents configuration setting does, except that it will capture the obverse only. Useful for documents that contain information on one physical side only, or for two-sided documents that support single-side processing. This setting can not be used in conjunction with documents, passport, paperDocumentItaly and documentsPaper. Example: documentsMinimal: [‘AT_IDCard_2010’]
- documentsPaper (Array of strings) -> Works the same way the documents configuration setting does, and is used for large-format drivers’ licenses. This setting can not be used in conjunction with documents, documentsMinimal, paperDocumentItaly and passport. Example: documentsPaper: [‘AT_DrivingLicense_2004’]
- passport (Array of strings) -> Works the same way the documents configuration setting does. Used for capture of passports, TD3 format. This setting can not be used in conjunction with documents, documentsMinimal, paperDocumentItaly and documentsPaper. Example:passport: [‘XX_Passport_YYYY’]
- paperDocumentItaly (Array of strings) -> Works the same way the documents configuration setting does. Used for capture of IT_IDCard_2017, ID_IT format. This setting can not be used in conjunction with documents, documentsMinimal, documentsPaper and passport. Example: paperDocumentItaly : ['IT_IDCard_2017'].
- targetSelector (string) -> The (unique inside the HTML document) CSS selector of the element VDDocument 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.
- displayDetectionCanvas (boolean) -> Whether to see the detection canvas in the UI (do not document - dev only)
- 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.
- infoFaceRecordingRandomNumber (string) -> Text displayed during the face recording step when token is available.
- infoFaceRecording (string) -> Text displayed during the face recording step.
- infoReverseRecording (string) -> Text displayed during the reverse recording step.
- infoObverseRecording (string) -> Text displayed during the obverse recording step.
- setLandscapeDeviceMessage (string) -> Text to display to let the user rotate the device in landscape mode.
- dataSaveMode (boolean) -> Whether to use low resolution recording mode. If false, video will try to capture at the maximun resolution of the camera.
- detectionTimeout (number) -> Duration in milliseconds after which the sdk should stop recording and shut down. Max is 300000, min 60000.
- continueText (string) -> Label for the button that allows the user to click and move to the next stage.
- setPortraitDeviceMessage (string) -> Text to display to let the user rotate the device in portrait mode.
- logEventsToConsole (boolean) -> Whether or not tol log events (camera start, etc) to the console.
- infoAlertVideoSelfie (string) -> Text of "heads-up" dialog warning video recording is about to start.
- sdkBackgroundColorInactive (string) -> Background color of the sdk before detection starts.
- borderColorCenteringAidInactive (string) -> Border color of the centering aid, before detection process starts.
- borderColorCenteringAidDetecting (string) -> Background color of instructions message when init the flow stages. It will be deprecated soon and replaced by the new parameter backgroundColorEffectMessage.
- saveVideoToLocal (boolean) -> Whether or not to save rtc video to local.
- detectionMessageBackgroundColor (string) -> Background color of messages overlayed while SDK is actively trying to capture a target.
- forceAlternativeVideoRecorder (boolean) -> Whether or not to force alternative video recorder for all devices.
- detectionMessageTextColor (string) -> Text color of messages overlayed while SDK is actively trying to capture a target.
- customConfirmationImageTick (string) -> Tick image icon path used when capture success.
- confirmationColorTick (string) -> Tick color icon when capture success.
- errorDisplayBackgroundColor (string) -> Background color of error display.
- errorDisplayTextColor (string) -> Text color of error display.
- errorActionButtonBackgroundColor (string) -> Background color of error header display.
- errorDisplayUserActionShow (boolean) -> Display user action in window error message.
- errorDisplayIconColor (string) -> Background color of error icon 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.
- infoUserImagesPath (string) -> URL path append to slide help images ( set empty if slider images have full URL ).
- errorActionButtonTextColor (string) -> Text color of error header display.
- infoUserSliderButtonText (string) -> Label to button slider action.
- infoUserVideoMedia (string) -> Config media video help user moda.
- infoUserVideoBackgroundColorTop (string) -> Config background color top video help user modal and close and help buttons background color. For these buttons, infoUserButtonBackgroundColor is the property that changes their background color.
- infoUserVideoBackgroundColor (string) -> Config background color video help user moda.
- infoUserVideoTextColor (String) -> Config text color video help user modal.
- infoUserVideoFontSize (Number) -> Set a number that will increase (positive) or decrease (negative) the font size of title video help user modal.
- infoUserVideoBackgroundColorButton (string) -> Config button background color video help user moda.
- infoUserVideoTextColorButton (String) -> Config button text color video help user modal.
- infoUserVideoPaddingButton (String) -> Config button padding video help user modal. Padding Examples
- infoUserButtonTextColor (string) -> Text color of button help user.
- 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.
- videoErrorConstraint (string) -> Error to display to user if media constraint is not correct.
- infoUserButtonBackgroundColor (string) -> Background color of close and help user buttons.
- videoErrorPermission (string) -> Error to display to user if media does not have permission.
- 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.
- videoErrorConstraintActionLabel (string) -> Text label button to display if media constraint is not correct.
- infoUserVideoTitle (string) -> Config title video help user moda.
- videoErrorDefault (string) -> Error to display to user if there is a media default error.
- videoErrorExternalInputLabel (string) -> Text label button to display if input device is virtual camera.
- videoErrorPermissionActionLabel (string) -> Text label button to display if media does not have permission.
- customOval (boolean) -> Set custom oval option.
- 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.
- errorBoxBackgroundColor (string) -> Background Color for the error message box displayed when not face detected at sdk video.
- pathModels (string) -> Set custom path to load detection models on sdk alive, always relative to index.html.
- errorBoxTextColor (string) -> Text color for the error message box displayed when not face detected at sdk video.
- errorBoxTitle (string) -> Title for the error message box displayed when face or document not detected at sdk video.
- obverseDocumentErrorBoxSubTitle (string) -> SubTitle for the error message box displayed when not obverse document detected at sdk video.
- resetVideoBoxSubTitle (string) -> SubTitle for the error message box displayed when time is out at document detection stage on sdk video.
- errorBoxButtonColor (string) -> Button color for the error message box displayed when not face detected at sdk video.
- errorBoxButtonText (string) -> Button text for the error message box displayed when not face detected at sdk video.
- errorBoxButtonTextColor (string) -> Button text color for the error message box displayed when not face detected at sdk video.
- recordingTimeStates (Array of numbers) -> Each unique value inside the array represents the time the SDK will record on every step (obverseRecording, reverseRecoding). Max value is 20000 and min value 3000. These times start when the detection phase starts, and ends when the countdown finishes. The countdown is still 3 seconds.
- smartRecordingTimeStates (Array of numbers) -> Each unique value inside the array represents the time the SDK will record on every step (obverseRecording, reverseRecoding) for smart documents. Max value is 20000 and min value 1000.
- videoRecordingMaxTime (number) -> Represents the max time of the duration of the record in milliseconds. Max value is 60000 and min value 5000.
- reverseDocumentErrorBoxSubTitle (string) -> SubTitle for the error message box displayed when not reverse document detected at sdk video.
- faceWarningDelayTime (number) -> Value that represents the time in milliseconds it will take for the "look at the camera" warning to be displayed.
- faceErrorBoxSubTitle (string) -> SubTitle for the error message box displayed when not face detected at sdk video.
- obverseDocumentWarningDelayTime (number) -> Value that represents the time in milliseconds it will take for the "show the document obverse" warning to be displayed.
- faceDetectionTime (number) -> Represents the time that face has to be detected to pass next step.
- videoToken (string) -> Store the received token into this config variable.
- reverseDocumentWarningDelayTime (number) -> Value that represents the time in milliseconds it will take for the "show the document reverse" warning to be displayed.
- ovalFaceDetectionColor (string) -> face detection oval color.
- detectedDocumentOutlineColor (string) -> Color of document detection lines.
- enableVideoToken (boolean) -> Flag that determines whether to use a numeric challenge at face detection stage. This flag if true, render a spinner while token is received every time the sdk resets.
- confirmationDialogBackgroundColor (String) -> Background color of confirmation dialogs.
- confirmationDialogTextColor (String) -> Text color of confirmation dialogs.
- confirmationDialogButtonPadding (String) -> Padding of buttons in confirmation dialogs.
- confirmationDialogLinkTextColor (String) -> Text color of buttons that look like links in confirmation dialogs.
- confirmationDialogButtonBackgroundColor (String) -> Background color of buttons in confirmation dialogs.
- showLogo (boolean) -> Display logo.
- customLogo (string) -> Path of the logo.
- detectionStageCustomLogo (string) -> Path of the detection stage logo.
- backgroundColorEffectMessage (string) -> Background color of instructions message when changed the flow stage.
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 |
|---|---|
| sdkBackgroundColorInactive (1) | #FFFFFF |
| infoUserVideoBackgroundColorTop (2) | #000D44 |
| infoUserVideoTextColor (4) | #000D44 |
| infoUserVideoBackgroundColor (5) | #000D44 |
| infoUserVideoBackgroundColorButton (6) | #000D44 |
| infoUserVideoTextColorButton (6) | #FFFFFF |
| infoUserButtonBackgroundColor (8) | #000D44 |
| infoUserButtonTextColor (8) | #FFFFFF |
| confirmationDialogBackgroundColor (9) | #FFFFFF |
| confirmationDialogTextColor (10) | #000D44 |
| confirmationDialogLinkTextColor (11) | #000D44 |
| confirmationDialogButtonBackgroundColor (11) | #FFFFFF |
| detectionMessageBackgroundColor (12) | #000D44 |
| detectionMessageTextColor (12) | #FFFFFF |
| backgroundColorEffectMessage (14) | #000D44 |
| errorBoxTextColor (16) | #000D44 |
| errorBoxBackgroundColor (16) | #FFFFFF |
| errorBoxButtonColor (17) | #FFFFFF |
| errorBoxButtonTextColor (17) | #000D44 |
| confirmationColorTick (18) | #078B3C |
| errorDisplayBackgroundColor (19) | #FFFFFF |
| errorDisplayTextColor (20) | #000D44 |
| errorDisplayIconColor (20) | #000D44 |
| errorActionButtonBackgroundColor (21) | #FFFFFF |
| errorActionButtonTextColor (21) | #000D44 |
| detectedDocumentOutlineColor | #000D44 |
| ovalFaceDetectionColor | #000D44 |
Default Values¶
| Parameter | Value |
|---|---|
| sdkBackgroundColorInactive (1) | #2e2e2e |
| infoUserVideoBackgroundColorTop (2) | #26BAB8 |
| infoUserVideoMedia (3) | helpIconCameraPermissions |
| infoUserVideoTextColor (4) | #0e4645 |
| infoUserVideoTitle (4) | 1. Please say your NAME and SURNAME when prompted 2. Show the FRONT part of your document 3. Show the BACK of your document 1. Diga su NOMBRE y APELLIDOS cuando se le solicite 2. Muestra la parte DELANTERA de su documento 3. Muestra la parte TRASERA de su documento |
| infoUserVideoBackgroundColor (5) | #E4F6F6 |
| infoUserSliderButtonText (6) | Start Empezar |
| infoUserVideoBackgroundColorButton (6) | #26BAB8 |
| infoUserVideoTextColorButton (6) | #051717 |
| infoUserVideoPaddingButton (6) | 2% 10% |
| showLogo (7) | true |
| customLogo (7) | '' |
| detectionStageCustomLogo (7) | '' |
| closeButton (8) | false |
| infoUserButtonBackgroundColor (8) | #26BAB8 |
| infoUserButtonTextColor (8) | #FFFFFF |
| confirmationDialogBackgroundColor (9) | #4D4B4E |
| confirmationDialogTextColor (10) | #FFFFFF |
| infoAlertVideoSelfie (10) | Video selfie: keep your document ready and follow the instructions Video Selfie: tenga su documento cerca y siga las instrucciones. |
| continueText (11) | CONTINUE CONTINUAR |
| confirmationDialogButtonPadding (11) | 0 |
| confirmationDialogLinkTextColor (11) | #26BAB8 |
| confirmationDialogButtonBackgroundColor (11) | #4D4B4E |
| infoFaceRecording (12) | Please say your first and last name Diga su NOMBRE y APELLIDOS |
| infoReverseRecording (12) | And now the BACK Y ahora la parte TRASERA |
| infoFaceRecordingRandomNumber (12) | Say XXXX out loud Diga XXXX en voz alta |
| infoObverseRecording (12) | Please show the FRONT of the document Muestre la parte DELANTERA del documento |
| detectionMessageBackgroundColor (12) | #737373 |
| detectionMessageTextColor (12) | #FFFFFF |
| borderColorCenteringAidInactive (13) | #717171 |
| borderColorCenteringAidDetecting (13) | #2C5EAF |
| customOvalBorderRadius (13) | 51% 49% 49% 51% / 33% 32% 68% 67% |
| customOval (13) | false |
| backgroundColorEffectMessage (14) | #00FF00 |
| errorBoxTitle (15) | An error has occurred Ha ocurrido un error |
| errorBoxTextColor (16) | #FFFFFF |
| errorBoxBackgroundColor (16) | #4D4B4E |
| obverseDocumentErrorBoxSubTitle (16) | You must show your identity document from the front approaching the camera. Debe mostrar su documento de identidad por delante acercándose a cámara. |
| faceErrorBoxSubTitle (16) | We cannot detect if you are looking at the camera. The error may be happening for any of the following reasons:
No podemos detectar si está mirando a cámara. Puede que el error esté sucediendo por alguna de las siguientes razones:
|
| reverseDocumentErrorBoxSubTitle (16) | You must show your identity document from behind when approaching the camera. Debe mostrar su documento de identidad por detrás acercándose a cámara. |
| resetVideoBoxSubTitle (16) | You have not shown your document to the camera or the document was too far from the box. Please, try again. No ha mostrado su documento a cámara o el documento estaba muy lejos del recuadro. Por favor, vuelva a intentarlo. |
| errorBoxButtonColor (17) | #4D4B4E |
| errorBoxButtonText (17) | RETRY REINTENTAR |
| errorBoxButtonTextColor (17) | #26BAB8 |
| customConfirmationImageTick (18) | |
| confirmationColorTick (18) | #737373 |
| errorDisplayBackgroundColor (19) | #4D4B4E |
| webrtcUnsupportedText (20) | Navegador no compatible. Debe repetir el proceso en Safari. Not supported browser. You must repeat the process in Safari. |
| errorDisplayTextColor (20) | #FFFFFF |
| errorDisplayIconColor (20) | #FFFFFF |
| videoErrorNotFound (20) | Please check that the device has a camera Por favor, compruebe que el dispositivo dispone de cámara |
| videoErrorUnavailable (20) | 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 |
| videoErrorPermission (20) | Please allow the page to access the camera Por favor, permita a la página acceso a la cámara |
| videoErrorExternalInput (20) | 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 (20) | Sorry, there was an error starting the camera Lo sentimos, se ha producido un error iniciando la cámara |
| videoErrorConstraint (20) | 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 |
| errorActionButtonBackgroundColor (21) | transparent |
| errorActionButtonTextColor (21) | #FFFFFF |
| videoErrorConstraintActionLabel (21) | Retry Reintentar |
| videoErrorUnavailableActionLabel (21) | Retry Reintentar |
| videoErrorExternalInputLabel (21) | Retry Reintentar |
| videoErrorPermissionActionLabel (21) | Retry Reintentar |
| setPortraitDeviceMessage (22) | Please, hold the device in portrait mode Por favor, ponga el dispositivo vertical |
| targetSelector | |
| displayErrors | true |
| displayDetectionCanvas | false |
| infoAlertShow | true |
| dataSaveMode | true |
| detectionTimeout | 300000 |
| logEventsToConsole | false |
| saveVideoToLocal | false |
| forceAlternativeVideoRecorder | false |
| errorDisplayUserActionShow | true |
| infoModalShow | true |
| isInfoModalShow | false |
| infoUserImagesPath | |
| infoUserVideoFontSize | 1 |
| pathModels | /public/models |
| fontSize | 0 |
| borderThickness | 5 |
| recordingTimeStates | 10000,10000 |
| smartRecordingTimeStates | 1500,1500 |
| videoRecordingMaxTime | 40000 |
| faceWarningDelayTime | 5000 |
| faceDetectionTime | 8000 |
| obverseDocumentWarningDelayTime | 10000 |
| reverseDocumentWarningDelayTime | 10000 |
| videoToken | |
| detectedDocumentOutlineColor | #00FF00 |
| ovalFaceDetectionColor | #00FF00 |
| enableVideoToken | false |