Configuration¶
There is a list of the different customizable parameters of the SDK
SDK Configuration¶
- blurDetectorActive (Boolean) -> Whether to use a blur detector when document image has been capture.
- detectionTimeout (Number) -> Duration in milliseconds after which VDDocument shut down. Max is 300000, min 60000.
- documents (Array of strings) -> Each unique string represents either a TD1 document type (“ES*DrivingLicense_2013”) or a country (“ES”, all supported TD1 document types for that country). 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. Examples: documents: [‘ES2’] -> All Spain supported documents; documents: [‘ES2_ID’] -> Spain Identity Documents; 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'].
- logEventsToConsole (Boolean) -> Whether or not to log events (camera start, etc) to the console.
- targetSelector (String or Object) -> The (unique inside the HTML document) CSS selector of the element VDDocument should attach to. Object created by HTMLElement method selection like getElementByID could be passed too.
- manualCaptureEnableDelay (Number) -> Duration in milliseconds after which VDDocument allows manual capture by touch or click event.
Text Configuration¶
- continueText (String) -> Label for the button that allows the user to click and move to the next stage.
- infoAlertSingleSidedDocument (String) -> Text of "heads-up" dialog warning the user that detection of one-sided document is about to start.
- infoAlertTwoSidedDocument (String) -> Text of "heads-up" dialog warning the user that detection of two-sided document is about to start.
- infoReviewBlurImageText (String) -> Text to display to let the user being informed about blurriness in the captured image.
- infoReviewImageText (String) -> Text to display to let the user review the captured image.
- manualCaptureText (String) -> Text to let the user know that capture can be triggered manually, on desktops and laptop devices.
- manualCaptureTextMobile (String) -> Text to let the user know that capture can be triggered manually, on mobile devices.
- obverseNotFoundText (String) -> Text with instructions to user during detection of obverse of document.
- reverseNotFoundText (String) -> Text with instructions to user during detection of reverse of document.
- passportMRZError (String) -> Text to display when many characters of MRZ passport are not visible.
- repeatText (String) -> Label for the button that allows the user to repeat detection, if the captured image was not clear.
- 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.
Style Configuration¶
- borderColorCenteringAidDefault (String) -> Border color of the centering aid, when detection is active but no document is being "seen" yet.
- borderColorCenteringAidDetecting (String) -> Border color of the centering aid, when a document is being "seen".
- borderColorCenteringAidDetectingSuccess (String) -> Border color of the centering aid, when a document has been successfully captured.
- borderColorCenteringAidInactive (String) -> Border color of the centering aid, before detection process starts, or when the sdk asks for the device to be used in portrait mode.
- confirmationColorTick (String) -> Tick color icon when capture success.
- confirmationDialogTextColor (String) -> Text color of confirmation dialogs.
- confirmationDialogBackgroundColor (String) -> Background color of confirmation dialogs.
- confirmationDialogLinkTextColor (String) -> Text color of button in confirmation dialogs (example: button color text in alert dialog).
- confirmationDialogButtonTextColor (String) -> For review image screen button text color. It will be deprecated soon; use confirmationCaptureButtonTextColor instead.
- confirmationDialogButtonBackgroundColor (String) -> Background color of buttons in confirmation dialogs (example: button background color in alert dialog).
- confirmationRepeatButtonTextColor (String) -> Text color of repeat button in capture confirmation dialog.
- confirmationRepeatButtonBackgroundColor (String) -> Background color of repeat button in capture confirmation dialog.
- confirmationRepeatButtonPadding (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
- confirmationCaptureButtonTextColor (String) -> Text color of continue button in capture confirmation dialog.
- confirmationCaptureButtonBackgroundColor (String) -> Background color of continue button in capture confirmation dialog.
- confirmationCaptureButtonPadding (String) -> Padding of continue button in capture confirmation dialog. Padding Examples
- detectionMessageBackgroundColor (String) -> Background color of messages overlayed during the detection process.
- detectionMessageTextColor (String) -> Text color of messages overlayed during the detection process.
- errorDisplayTextColor (string) -> Text color of error display.
- errorDisplayBackgroundColor (string) -> Background color of error display.
- errorDisplayIconColor (string) -> Background color of error icon display.
- errorDisplayUserActionShow (boolean) -> Display user action in window error message.
- errorActionButtonBackgroundColor (string) -> Background color of error header display.
- errorActionButtonTextColor (string) -> Text color of error header display.
- infoAlertShow (Boolean) -> Whether to display a "heads-up" confirmation dialog warning detection is about to start.
- infoModalShow (Boolean) -> Whether to display a modal helper dialog to explain the user the needed actions to success within the authentication process.
- isInfoModalShow (Boolean) -> Display button that allow to Display a Info user Modal with steps instrucctions.
- infoUserSliderButtonText (String) -> Label for continue button in help user modal.
- infoUserDocumentTitle (String) -> Config title document help user modal.
- infoUserImagesPath (String) -> Config path with the icons for help user modal By default are used internal icons.
- infoUserDocumentMedia (String) -> Config icon fileName to display at document help user modal.
- infoUserDocumentBackgroundColorTop (String) -> Config background color top document help user modal.
- infoUserDocumentBackgroundColor (String) -> Config background color document help user modal.
- infoUserDocumentTextColor (String) -> Config text color document help user modal.
- infoUserDocumentBorderColor (String) -> Config border color document help user modal.
- infoUserDocumentFontSize (Number) -> Set a number that will increase (positive: 0, 100) or decrease (negative: -100, 0) the font size of title document help user modal.
- infoUserDocumentBackgroundColorButton (String) -> Config button background color document help user modal.
- infoUserDocumentTextColorButton (String) -> Config button text color document help user modal.
- infoUserDocumentPaddingButton (String) -> Config button padding document help user modal. Padding Examples
- outerGlowCenteringAidDefault (String) -> Color of the translucent area surrounding the border of the centering aid, when detection is active but no document is being detected yet.
- outerGlowCenteringAidDetecting (String) -> Color of the translucent area surrounding the border of the centering aid, when a document is being detected.
- reviewImage (Boolean) -> Whether to display a confirmation dialog displaying the captured image, for the user to have a choice between continuing to the next step or redoing capture.
- sdkBackgroundColorInactive (String) -> Background color of the sdk before detection starts.
- firstArrow (String) -> Color of the first arrow display when smart document is detected.
- secondArrow (String) -> Color of the second arrow display when smart document is detected.
- thirdArrow (String) -> Color of the third arrow display when smart document is detected.
- fourthArrow (String) -> Color of the fourth arrow display when smart document is detected.
- fifthArrow (String) -> Color of the fifth arrow display when smart document is detected.
- loadingSpinnerColor (String) -> Loading spinner color.
- loadingSpinnerScreenBackgroundColor (String) -> Loading spinner screen background color.
- showLogo (boolean) -> Display logo.
- customLogo (string) -> Path of the logo.
- detectionStageCustomLogo (string) -> Path of the detection stage logo.
Error Configuration¶
- displayErrors (Boolean) -> Whether to see errors in the UI. These errors would display if browser requirements are not met or if the camera fails to start.
- permissionRefused (String) -> Warning to display to user if the browser is blocking the SDK from accessing the media device.
- permissionRefusedTitle (String) -> Title of warning to user if the browser is blocking the SDK from accessing the media device
- videoErrorConstraint (String) -> Error to display to user if media constraint is not correct.
- videoErrorConstraintActionLabel (String) -> Text label button to display if media constraint is not correct.
- videoErrorDefault (String) -> Error to display to user if there is a media default error.
- videoErrorDefaultActionLabel (String) -> Text label button to display if there is a media default error.
- videoErrorNotFound (String) -> Error to display to user if media device is not found.
- videoErrorNotFoundActionLabel (String) -> Text label button to display if media device is not found.
- videoErrorPermission (String) -> Error to display to user if media does not have permission.
- videoErrorPermissionActionLabel (String) -> Text label button to display if media does not have permission.
- videoErrorUnavailable (String) -> Error to display to user if media device is unavailable.
- videoErrorUnavailableActionLabel (String) -> Text label button to display if media device is unavailable.
- 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 set to true.
- tooFarText (String) -> Instructions to user during detection when document is detected too far.
- tooCloseText (String) -> Instructions to user during detection when document is detected too close.
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¶
The number inside () on each row corresponds with an example in Customization Examples section.
| Parameter | Value |
|---|---|
| sdkBackgroundColorInactive (1) | #FFFFFF |
| infoUserDocumentBackgroundColorTop (2) | #000D44 |
| infoUserDocumentBorderColor (2, 5) | #000D44 |
| infoUserDocumentTextColor (4) | #000D44 |
| infoUserDocumentBackgroundColor (5) | #000D44 |
| infoUserDocumentBackgroundColorButton (6, 8) | #000D44 |
| infoUserDocumentTextColorButton (6, 8) | #FFFFFF |
| outerGlowCenteringAidDetecting (9) | #000D44 |
| outerGlowCenteringAidDefault (9) | #000D44 |
| detectionMessageBackgroundColor (10) | #000D44 |
| borderColorCenteringAidDetecting (12) | #078B3C |
| confirmationColorTick (13) | #078B3C |
| loadingSpinnerScreenBackgroundColor (14) | #FFFFFF |
| loadingSpinnerColor (15) | #000D44 |
| confirmationDialogBackgroundColor (16) | #FFFFFF |
| confirmationDialogTextColor (17, 23) | #000D44 |
| confirmationRepeatButtonTextColor (18) | #000D44 |
| confirmationRepeatButtonBackgroundColor (18) | #FFFFFF |
| confirmationCaptureButtonTextColor (19) | #FFFFFF |
| confirmationCaptureButtonBackgroundColor (19) | #000D44 |
| errorDisplayBackgroundColor (20) | #FFFFFF |
| errorDisplayTextColor (21) | #000D44 |
| errorDisplayIconColor (21) | #000D44 |
| errorActionButtonTextColor (22) | #000D44 |
| errorActionButtonBackgroundColor (22) | #FFFFFF |
| confirmationDialogButtonBackgroundColor (24) | #FFFFFF |
| confirmationDialogLinkTextColor (24) | #000D44 |
Default Values¶
The number inside () on each row corresponds with an example in Customization Examples section.
| Parameter | Value |
|---|---|
| sdkBackgroundColorInactive (1) | #2e2e2e |
| infoUserDocumentBackgroundColorTop (2) | #26BAB8 |
| infoUserDocumentBorderColor (2, 5) | #26BAB8 |
| infoUserDocumentMedia (3) | helpIconDocumentCenter |
| infoUserDocumentTextColor (4) | #0e4645 |
| infoUserDocumentTitle (4) | 1. CENTER your document in the frame 2. Make sure your image DOES NOT show glare or shadow 3. The photo will be captured AUTOMATICALLY 1. CENTRE su documento en el marco 2. Asegúrese de que su documento NO muestra brillos o sombras. 3. La fotografía se capturará de forma AUTOMÁTICA |
| infoUserDocumentBackgroundColor (5) | #E4F6F6 |
| infoUserSliderButtonText (6) | Start Empezar |
| infoUserDocumentBackgroundColorButton (6, 8) | #26BAB8 |
| infoUserDocumentTextColorButton (6, 8) | #051717 |
| infoUserDocumentPaddingButton (6) | 2% 10% |
| showLogo (7) | true |
| customLogo (7) | '' |
| detectionStageCustomLogo (7) | '' |
| outerGlowCenteringAidDetecting (9) | #001C00 |
| outerGlowCenteringAidDefault (9) | #000000 |
| manualCaptureText (10) | CLICK HERE to capture Haga CLICK AQUÍ para capturar |
| manualCaptureTextMobile (10) | Touch the screen to capture Toque la imagen para capturar |
| obverseNotFoundText (10) | Fit the FRONT of the document Encaje la parte DELANTERA |
| reverseNotFoundText (10) | Fit the BACK of the document Encaje la parte TRASERA |
| passportMRZError (10) | Fit the passport in the frame Encaje la página del pasaporte visibles |
| detectionMessageBackgroundColor (10) | #424242 |
| detectionMessageTextColor (10) | #FFFFFF |
| tooFarText (10) | Too Far Demasiado Lejos |
| tooCloseText (10) | Too Close Demasiado Cerca |
| firstArrow (11) | #e6f4ff |
| secondArrow (11) | #b3deff |
| thirdArrow (11) | #80c8ff |
| fourthArrow (11) | #33a7ff |
| fifthArrow (11) | #0082e6 |
| borderColorCenteringAidDefault (12) | #2C5EAF |
| borderColorCenteringAidDetecting (12) | #00FF00 |
| borderColorCenteringAidDetectingSuccess (12) | #FFFFFF |
| borderColorCenteringAidInactive (12) | #717171 |
| confirmationColorTick (13) | #737373 |
| loadingSpinnerScreenBackgroundColor (14) | #4D4B4E |
| loadingSpinnerColor (15) | #FFFFFF |
| confirmationDialogBackgroundColor (16) | #4D4B4E |
| infoReviewBlurImageText (17) | Make sure that the data on the document are clear and can be read Asegúrate de que todos los datos del documento se leen de forma clara |
| infoReviewImageText (17) | Check if the photo is readable and focused Comprueba que la foto es legible y está bien enfocada |
| confirmationDialogTextColor (17, 23) | #FFFFFF |
| confirmationRepeatButtonTextColor (18) | #26BAB8 |
| confirmationRepeatButtonBackgroundColor (18) | transparent |
| confirmationRepeatButtonPadding (18) | 2% 5% |
| repeatText (18) | REPEAT REPETIR |
| continueText (19) | CONTINUE CONTINUAR |
| confirmationDialogButtonTextColor (19) | #FFFFFF |
| confirmationCaptureButtonTextColor (19) | #FFFFFF |
| confirmationCaptureButtonBackgroundColor (19) | #26BAB8 |
| confirmationCaptureButtonPadding (19) | 2% 5% |
| errorDisplayBackgroundColor (20) | #4D4B4E |
| errorDisplayTextColor (21) | #FFFFFF |
| errorDisplayIconColor (21) | #FFFFFF |
| errorDisplayUserActionShow (22) | true |
| errorActionButtonTextColor (22) | #FFFFFF |
| errorActionButtonBackgroundColor (22) | transparent |
| permissionRefused (22) | It is necessary to allow access to the camera to capture and verify the document and the user Se necesita tener acceso a la cámara del dispositivo para la captura y verificación del documento y del usuario |
| permissionRefusedTitle (22) | '' |
| videoErrorConstraint (21) | 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. |
| videoErrorConstraintActionLabel (22) | Retry Reintentar |
| videoErrorDefault (21) | Sorry, there was an error starting the camera Lo sentimos, se ha producido un error iniciando la cámara |
| videoErrorDefaultActionLabel (22) | Retry Reintentar |
| videoErrorNotFound (21) | Please check that the device has a camera Por favor, compruebe que el dispositivo dispone de cámara |
| videoErrorNotFoundActionLabel (22) | Retry Reintentar |
| videoErrorPermission (21) | Please allow the page to access the camera Por favor, permita a la página acceso a la cámara |
| videoErrorPermissionActionLabel (22) | Retry Reintentar |
| videoErrorUnavailable (21) | 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 |
| videoErrorUnavailableActionLabel (22) | Retry Reintentar |
| webrtcUnsupportedText (21) | Navegador no compatible. Debe repetir el proceso en Safari. Not supported browser. You must repeat the process in Safari. |
| infoAlertSingleSidedDocument (23) | A picture will be taken of the FRONT Se tomará una foto del anverso |
| infoAlertTwoSidedDocument (23) | The FRONT and BACK of the document will be captured Se fotografiará el anverso y reverso |
| confirmationDialogLinkTextColor (24) | #26BAB8 |
| confirmationDialogButtonBackgroundColor (24) | #4D4B4E |
| blurDetectorActive | false |
| detectionTimeout | 300000 |
| logEventsToConsole | false |
| manualCaptureEnableDelay | 3000 |
| fontSize | 1 |
| infoModalShow | true |
| infoAlertShow | true |
| infoUserImagesPath | '' |
| infoModalShow | true |
| isInfoModalShow | false |
| infoUserDocumentFontSize | 1 |
| reviewImage | true |
| displayErrors | false |