Setup Configuration Components¶
This section presents the different customizable parameters of the XpressID.
Loading¶
Number | Parameter | Default Value |
---|---|---|
1 | logo.media logo.show |
- false |
2 | backgroundColor | #000D44 |
3 | text textColor |
Loading #FFFFFF |
4 | progressIndicator.backgroundColor progressIndicator.color |
#FFFFFF #00051A |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"loading": {
"text": "text",
"backgroundColor": "#C0C0C0",
"textColor": "#0000FF",
"progressIndicator": {
"backgroundColor": "#000000",
"color": "#FFFF00"
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
}
QR¶
Number | Parameter | Default Value (EN/ES) | |
---|---|---|---|
1 | logo.media logo.show |
- false |
|
2 | backgroundColor | #FFFFFF | |
3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
4 | buttons.close.show | false | |
5 | title.text title.textColor |
We need to verify your identity #00051A |
Necesitamos verificar tu identidad #00051A |
6 | subtitle.text subtitle.textColor |
For a seamless experience, we recommend that you complete the process from your mobile phone You can do this by scanning the QR code below #00051A |
Para que la experiencia sea perfecta, te recomendamos que realices el proceso desde tu móvil. Puedes hacerlo escaneando el código QR que se muestra a continuación. #00051A |
7 | buttons.continue.backgroundColor buttons.continue.textColor buttons.continue.borderColor buttons.continue.states.hover.backgroundColor buttons.continue.states.hover.textColor buttons.continue.states.hover.borderColor buttons.continue.states.active.backgroundColor buttons.continue.states.active.textColor buttons.continue.states.active.borderColor buttons.continue.text buttons.continue.show |
#FFFFFF #000D44 #000D44 #ee686a #00051A #000D44 #FFFFFF #000D44 #000D44 Continue on desktop true |
- - - - - - - - - Continuar en el navegador true |
8 | modal.show | true | |
9 | modal.captured.title.text modal.cancelled.title.text modal.error.title.text modal.completed.title.text |
Info Info Error Success |
Informacíon Información Error Éxito |
10 | modal.captured.message.text modal.cancelled.message.text modal.error.message.text modal.completed.message.text |
Process ongoing from your mobile device The process has been cancelled from your mobile device An error occurred while performing the process from your mobile device, unable to continue. The process has successfully completed from your mobile device |
Proceso en curso desde su dispositivo móvil El proceso se ha cancelado desde su dispositivo móvil Ha ocurrido un error mientras realizaba el proceso desde su dispositivo móvil, no se puede continuar El proceso ha finalizado satisfactoriamente desde su dispositivo móvil |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"qr"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
},
"qr": {
"redirectionUrl": "https://veridas.fakeURL.com/?fakeKey.1=fakeValue.1&fakeKey.2=fakeValue.2",
"setup": {
"logo": {
"show": true
},
"backgroundColor": "#C0C0C0",
"title": {
"text": "title",
"textColor": "#000080"
},
"subtitle": {
"text": "subtitle",
"textColor": "#0000FF"
},
"buttons": {
"continue": {
"text": "continue text",
"backgroundColor": "#FFFF00",
"textColor": "#000000",
"borderColor": "#000000",
"states": {
"hover": {
"backgroundColor": "#800080",
"textColor": "#FFFFFF",
"borderColor": "#FFFFFF"
},
"active": {
"backgroundColor": "#FF0000",
"textColor": "#008080",
"borderColor": "#008080"
}
}
}
}
}
}
}
}
}
Document¶
Autoclassification selector¶
Number | Parameter | Default Value (EN/ES) | |
---|---|---|---|
1 | logo.media logo.show |
- false |
|
2 | backgroundColor | #FFFFFF | |
3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
4 | buttons.close.show | false | |
5 | title.text title.textColor |
Choose one of these options #00051A |
Elige una de estas opciones |
6 | optionChooser.buttons.idDocument.text | ID documents | Docs. de identificación |
7 | optionChooser.buttons.idDocument.secondaryText | IDS, driver’s license, residence... | IDS, carnet de conducir, residencia... |
8 | optionChooser.buttons.iconColor optionChooser.buttons.states.active.iconColor |
#000D44 #FFFFFF |
|
9 | optionChooser.buttons.passport.text | Passport | Pasaporte |
10 | optionChooser.buttons.backgroundColor optionChooser.buttons.textColor optionChooser.buttons.secondaryTextColor optionChooser.buttons.borderColor optionChooser.buttons.states.active.backgroundColor optionChooser.buttons.states.hover.borderColor |
#FFFFFF #00051A #737999 #000D44 #000D44 #000D44 |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES_IDCard_2015",
"XX_Passport_YYYY"
],
"autoclassificationSelector": {
"setup": {
"backgroundColor": "#FFFFFF",
"title": {
"text": "Choose one of these options",
"textColor": "#00051A"
},
"logo": {
"show": true
},
"containerBox": {
"borderColor": "#000D44",
"show": true
},
"buttons": {
"close": {
"show": true
}
},
"optionChooser": {
"buttons": {
"backgroundColor": "#FFFFFF",
"textColor": "#00051A",
"secondaryTextColor": "#737999",
"borderColor": "#000D44",
"states": {
"active": {
"backgroundColor": "#FFFFFF",
"iconColor": "#000d44"
},
"hover": {
"borderColor": "#000D44"
}
},
"idDocument": {
"text": "ID Documents",
"secondaryText": "IDS, driver’s license, residence..."
},
"passport": {
"text": "Passport"
}
}
}
}
}
}
]
}
}
}
}
Document & country selector¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | logo.media logo.show |
- false |
|
2 | backgroundColor | #FFFFFF | |
3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
4 | buttons.close.show | false | |
5 | title.text title.textColor |
Choose your document’s country & document type #00051A |
Elige tu país y tipo de documento #00051A |
6 | countryChooser.title.text countryChooser.title.textColor |
What country does your document belong to? #00051A |
¿A qué país pertenece tu documento? #00051A |
7 | countryChooser.picker.backgroundColor countryChooser.picker.textColor countryChooser.picker.borderColor countryChooser.picker.states.hover.borderColor countryChooser.defaultCountry geolocation |
#FFFFFF #000D44 #000D44 #ee686a ES true |
#FFFFFF #000D44 #000D44 #ee686a ES true |
8 | documentChooser.title.text documentChooser.title.textColor |
What kind of ID is it? #00051A |
¿Qué tipo de ID es? #00051A |
9 | documentChooser.buttons.backgroundColor documentChooser.buttons.textColor documentChooser.buttons.borderColor documentChooser.buttons.states.active.backgroundColor documentChooser.buttons.states.hover.borderColor |
#FFFFFF #00051A #000D44 #000D44 #EE686A true |
#FFFFFF #00051A #000D44 #000D44 #EE686A true |
10 | documentChooser.buttons.idCard.text documentChooser.buttons.drivingLicense.text documentChooser.buttons.healthCard.text documentChooser.buttons.professionalCard.text documentChooser.buttons.passport.text documentChooser.buttons.others.text documentChooser.buttons.cartaceo.text documentChooser.buttons.fm3.text documentChooser.buttons.anyCard.text documentChooser.buttons.pinkPaper.text documentChooser.buttons.cercu.text |
ID card Driver’s license Health card Professional card Passport Other documents Cartaceo ID card FM3 (residence permit) Any Identification Docs. de identificación Pink Paper Driving License (paper) Green Paper (CERCU) |
Documento de identidad Licencia de conducir Tarjeta sanitaria Cédula profesional Pasaporte Otros documentos Cartaceo de identidad (papel) FM3 (permiso de residencia) Carnet Rosa en papel Permiso verde (CERCU) |
11 | documentChooser.buttons.iconColor documentChooser.buttons.states.active.iconColor |
#000D44 #FFFFFF |
|
12 | documentSelector_countryChooser_picker_searchPlaceholder_text | Search… | Buscar… |
13 | documentSelector_countryChooser_picker_dropdown_states_hover_backgroundColor documentSelector_countryChooser_picker_dropdown_states_hover_textColor |
#E6E7ED #000D44 |
|
14 | documentSelector_countryChooser_picker_dropdown_states_selected_backgroundColor documentSelector_countryChooser_picker_dropdown_states_selected_textColor |
#E6E7ED #000D44 |
|
15 | documentSelector_countryChooser_picker_dropdown_states_active_backgroundColor documentSelector_countryChooser_picker_dropdown_states_active_textColor |
#000D44 #FEFEFD |
|
16 | documentSelector_singleCountryTitle_text documentSelector_singleCountryTitle_textColor |
Choose the document type #00051A |
Elija el tipo de documento #00051A |
17 | documentSelector_countryChooser_singleCountrySelectorTitle_text documentSelector_countryChooser_singleCountrySelectorTitle_textColor |
Only documents from {{ country }} are accepted #00051A |
Solamente se admiten documentos de {{ country }} #00051A |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"SelectedByUser"
],
"documentSelector": {
"setup": {
"backgroundColor": "#1ca515",
"logo": {
"show": true
},
"title": {
"text": "title.text1",
"textColor": "#FFFFFF"
},
"containerBox": {
"borderColor": "#1ca515",
"show": true
},
"buttons": {
"close": {
"show": true
}
},
"countryChooser": {
"title": {
"text": "title.text",
"textColor": "#92f70a"
},
"picker": {
"backgroundColor": "#0a4bf7",
"textColor": "#f70acc",
"borderColor": "#f7400a",
"states": {
"hover": {
"borderColor": "#f0f70a"
}
},
"dropdown": {
"states": {
"hover": {
"backgroundColor": "#FF5733",
"textColor": "#6BFF33"
},
"active": {
"backgroundColor": "#3361FF",
"textColor": "#FC33FF"
},
"selected": {
"backgroundColor": "#0a4bf7",
"textColor": "#FC33FF"
}
}
}
}
},
"documentChooser": {
"title": {
"text": "title.text",
"textColor": "#0af7f0"
},
"buttons": {
"backgroundColor": "#000000",
"iconColor": "#0af718",
"textColor": "#748575",
"borderColor": "#FFFFFF",
"states": {
"active": {
"backgroundColor": "#FFFFFF",
"iconColor": "#000D44"
},
"hover": {
"borderColor": "#000000"
}
},
"idCard": {
"text": "idCard"
},
"drivingLicense": {
"text": "drivingLicense"
},
"healthCard": {
"text": "healthCard"
},
"professionalCard": {
"text": "professionalCard"
},
"passport": {
"text": "passport"
},
"others": {
"text": "others"
},
"cartaceo": {
"text": "cartaceo"
},
"fm3": {
"text": "fm3"
},
"anyCard": {
"text": "anyCard"
},
"pinkPaper": {
"text": "pinkPaper"
},
"cercu": {
"text": "cercu"
}
}
},
"geolocation": false
}
}
}
]
}
}
}
}
Document Capture¶
Theme¶
The UI can be configured under a theme. Properties for configuring document capture can be found here: Document theme.
Instructions Modal¶
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: sdkDocument.views.instructions.active. By default, this parameter is false.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkDocument.views.instructions.card.title.documents | ["Hold your phone vertically"] | ["Sujete el teléfono en vertical"] |
4 | sdkDocument.views.instructions.card.media.documents | alive01.png | |
5 | sdkDocument.views.instructions.card.subtitle.documents | ["1. Asegúrese de que todos los datos del documento estén visibles, y de que no hay brillos o sombras. \n 2. Cuando el documento esté enfocado, la captura se tomará automáticamente"] | ["1. Ensure all document data is visible, and there are no glares or shadows. \n 2. Once the document is in focus, the capture will be taken automatically] |
6 | sdkDocument.views.instructions.buttons.startProcess.text | Start process.text | Comenzar el proceso |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true
},
"buttons": {
"close": {
"show": true
}
}
}
}
},
"sdkDocument": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"documents": [
"card.title.documents"
]
},
"subtitle": {
"documents": [
"card.subtitle.documents"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
]
}
}
}
}
Capture¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkDocument.views.capture.guidance.preCapture.obverse.card.title sdkDocument.views.capture.guidance.preCapture.reverse.card.title sdkDocument.views.capture.manualCapture.obverse.card.title sdkDocument.views.capture.manualCapture.reverse.card.title |
Show the front side of the document Show the back side of the document Tap to capture the FRONT side of the document Tap to capture the BACK side of the document |
Muestre la parte DELANTERA del documento Muestre la parte TRASERA del documento Pulse el botón para capturar la parte DELANTERA Pulse el botón para capturar la parte TRASERA |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true
},
"buttons": {
"close": {
"show": true
}
}
}
}
},
"sdkDocument": {
"views": {
"capture": {
"guidance": {
"preCapture": {
"obverse": {
"card": {
"title": "capture.guidance.obverse.card.title"
}
},
"reverse": {
"card": {
"title": "capture.guidance.reverse.card.title"
}
}
}
},
"manualCapture": {
"obverse": {
"card": {
"title": "capture.manualCapture.obverse.card.title"
}
},
"reverse": {
"card": {
"title": "capture.manualCapture.reverse.card.title"
}
}
}
}
}
}
}
}
]
}
}
}
}
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: sdkDocument.views.reviewImage.active. By default, this parameter is false.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkDocument.views.reviewImage.card.title | Make sure the document is well-focused and legible | Compruebe que el documento está bien enfocado y es legible |
4 | sdkDocument.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
5 | sdkDocument.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true
},
"buttons": {
"close": {
"show": true
}
}
}
}
},
"sdkDocument": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.title",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
]
}
}
}
}
Selfie¶
Theme¶
The UI can be configured under a theme. Properties for configuring selfie capture can be found here: Selfie theme.
Passive Capture¶
Instructions Modal¶
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 false.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkSelfie.views.instructions.card.title.selfie | ["Position yourself in front of the camera"] | ["Posiciónese frente a la cámara"] |
4 | sdkSelfie.views.instructions.card.media.selfie | alive01.png | |
5 | 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"] |
6 | sdkSelfie.views.instructions.buttons.startProcess.text | Start | Comenzar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"selfie": [
"card.title.documents"
]
},
"subtitle": {
"selfie": [
"card.subtitle.documents"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Capture¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkSelfie.views.capture.selfie.card.title sdkSelfie.views.capture.guidance.centered.card.title sdkSelfie.views.capture.guidance.notCentered.card.title |
Fit your face into the oval Stay still and do not smile Recenter your face within the oval |
Centre su cara en el óvalo Manténgase estable y no sonría Vuelva a centrar su cara en el óvalo |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"capture": {
"guidance": {
"centered": {
"card": {
"title": "feedback.centered.card"
}
},
"notCentered": {
"card": {
"title": "feedback.notCentered.card"
}
}
},
"selfie": {
"card": {
"title": "selfie.card.title"
}
}
}
}
}
}
}
}
}
}
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:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | 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 |
4 | sdkSelfie.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
5 | sdkSelfie.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.media",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
}
}
}
Active Capture¶
Instructions Modal¶
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 false.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | 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"] |
4 | sdkSelfie.views.instructions.card.media.head | ["alive01.png", "alive02.png"] | |
5 | sdkSelfie.views.instructions.card.subtitle.head | ["Make sure you are not wearing sunglasses, hats, or other items that cover your face", "1. Fit the face in the frame and wait for the detection \n 2. Move your head slightly in the direction indicated by the arrows \n 3. When the screen indicates that you have done it correctly, look at the center again \n 4. Repeat the process 2 times"] | [ "Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara", "1. Encaje la cara en el marco y espere a la detección \n 2. Mueva la cabeza ligeramente en la dirección que le indiquen las flechas \n 3. Cuando la pantalla le indique que lo ha hecho correctamente, vuelva a mirar al centro \n 4. Repita el proceso 2 veces"] |
6 | sdkSelfie.views.instructions.card.buttons.next.text sdkSelfie.views.instructions.card.buttons.previous.text |
Next Previous |
Siguiente Anterior |
7 | sdkSelfie.views.instructions.buttons.startProcess | Start | Comenzar |
8 | sdkSelfie.views.instructions.active | true |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"head": [
"card.title.head"
]
},
"subtitle": {
"head": [
"card.subtitle.head"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Capture¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkSelfie.views.capture.selfie.card.title sdkSelfie.views.capture.guidance.centered.card.title sdkSelfie.views.capture.guidance.notCentered.card.title sdkSelfie.views.capture.head.card.title.finish |
Fit your face into the oval Stay still and do not smile Recenter your face within the oval Great! |
Centre su cara en el óvalo Manténgase estable y no sonría Vuelva a centrar su cara en el óvalo ¡Bien! |
4 | sdkSelfie.views.capture.head.card.title.movement sdkSelfie.views.capture.head.card.title.back |
Move your head Great! Look back to the center |
Mueva la cabeza ¡Bien! Vuelva a mirar al centro |
5 | sdkSelfie.views.capture.head.card.media.headBottomBack sdkSelfie.views.capture.head.card.media.headBottom sdkSelfie.views.capture.head.card.media.headCenter sdkSelfie.views.capture.head.card.media.headLeftBack sdkSelfie.views.capture.head.card.media.headLeft sdkSelfie.views.capture.head.card.media.headRightBack sdkSelfie.views.capture.head.card.media.headRight sdkSelfie.views.capture.head.card.media.headTopBack sdkSelfie.views.capture.head.card.media.headTop |
"head_bottom_back.gif" | |
6 | sdkSelfie.views.capture.head.card.footer | Step %index of %range | Paso %index de %range |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"capture": {
"guidance": {
"centered": {
"card": {
"title": "feedback.centered.card"
}
},
"notCentered": {
"card": {
"title": "feedback.notCentered.card"
}
}
},
"selfie": {
"card": {
"title": "selfie.card.title"
}
},
"head": {
"token": "prueba",
"card": {
"title": {
"movement": "head.card.title.movement",
"back": "head.card.title.back",
"finish": "head.card.title.finish"
},
"footer": "head.card.footer"
}
}
}
}
}
}
}
}
}
}
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:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | 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 |
4 | sdkSelfie.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
5 | sdkSelfie.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkSelfie": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.media",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
}
}
}
Video¶
Theme¶
The UI can be configured under a theme. Properties for configuring video capture can be found here: Video theme.
Instructions Modal¶
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 false.
If you choose to display it, the configuration options are listed below:
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkVideo.views.capture.feedback.selfie.card.title | ["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"] |
4 | sdkVideo.views.instructions.card.media.video | ["video.jpg", "video1.jpg" ] | |
5 | sdkVideo.views.instructions.card.subtitle.video | ["1. Center your face within the oval and do not smile. \n 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 óvalo y no sonría. \n 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"] |
6 | sdkVideo.views.instructions.card.buttons.next.text sdkVideo.views.instructions.card.buttons.previous.text |
Next Previous |
Siguiente Anterior |
7 | sdkDocument.views.instructions.buttons.startProcess.text | Start | Comenzar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkVideo": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"video": [
"card.title.video"
]
},
"subtitle": {
"video": [
"card.subtitle.video"
]
},
"buttons": {
"next": {
"text": "next.text"
},
"previous": {
"text": "previous.text"
}
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Capture¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | generic.common.ui.buttons.close.show | false | |
3 | sdkVideo.views.capture.guidance.preCapture.selfie.card.title sdkVideo.views.capture.guidance.nameAndSurname.card.title sdkVideo.views.capture.feedback.centered.card.title sdkVideo.views.capture.feedback.notCentered.card.title |
Fit your face into the oval Say your first and last name out loud Stay still and do not smile Recenter your face within the oval |
Centre su cara en el óvalo Diga su nombre y apellidos en voz alta Manténgase estable y no sonría Vuelva a centrar la cara en el óvalo |
4 | sdkVideo.views.capture.guidance.preCapture.obverse.card.title sdkVideo.views.capture.guidance.preCapture.reverse.card.title sdkVideo.views.capture.feedback.documentNotFound.card.title sdkVideo.views.capture.tooFar.obverse.card.title sdkVideo.views.capture.tooFar.reverse.card.title |
Show the front of the document to the front camera Show the back side of the document to the front camera The document could not be detected. Please, place it within the box Zoom in the document Zoom in the document |
Muestre la parte delantera del documento en la cámara frontal Muestre la parte trasera del documento en la cámara frontal No se ha podido detectar el documento. Por favor, colóquelo en el recuadro Acerque el documento Acerque el documento |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true
}
},
"logo": {
"show": true
}
}
}
},
"sdkVideo": {
"views": {
"capture": {
"guidance": {
"selfie": {
"card": {
"title": "feedback.selfie.card.title"
},
"centered": {
"card": {
"title": "feedback.centered.card.title"
}
},
"notCentered": {
"card": {
"title": "feedback.notCentered.card.title"
}
}
},
"nameAndSurname": {
"card": {
"title": "feedback.nameAndSurname.card.title"
}
},
"preCapture": {
"obverse": {
"card": {
"title": "feedback.notCentered.card.title"
}
},
"reverse": {
"card": {
"title": "feedback.notCentered.card.title"
}
},
"selfie": {
"card": {
"title": "feedback.selfie.card.title"
}
}
},
"documentNotFound": {
"card": {
"title": "feedback.notCentered.card.title"
}
}
},
"tooFar": {
"obverse": {
"card": {
"title": "feedback.notCentered.card.title"
}
},
"reverse": {
"card": {
"title": "feedback.notCentered.card.title"
}
}
}
}
}
}
}
}
}
}
}
Esign¶
Number | Parameter | Default Value (EN/ES) | |
---|---|---|---|
1 | backgroundColor | #FFFFFF | |
2 | title.text title.textColor |
Sign here #00051A |
Firmar aquí - |
3 | buttons.refuse.text buttons.refuse.backgroundColor buttons.refuse.textColor buttons.refuse.borderColor buttons.refuse.states.hover.backgroundColor buttons.refuse.states.hover.textColor buttons.refuse.states.hover.borderColor buttons.refuse.states.active.backgroundColor buttons.refuse.states.active.textColor buttons.refuse.states.active.borderColor |
Refuse #FFFFFF #000D44 #000D44 #EE686A #000D44 #000D44 #000D44 #FFFFFF #000D44 |
Rechazar - - - - - - - - - |
4 | buttons.sign.text buttons.sign.backgroundColor buttons.sign.textColor buttons.sign.borderColor buttons.sign.states.hover.backgroundColor buttons.sign.states.hover.textColor buttons.sign.states.hover.borderColor buttons.sign.states.active.backgroundColor buttons.sign.states.active.textColor buttons.sign.states.active.borderColor |
Sign #000D44 #000D44 #FFFFFF #EE686A #000D44 #EE686A #EE686A #000D44 #EE686A |
Firmar - - - - - - - - - |
5 | checkBox.text checkBox.textColor checkBox.box.backgroundColor checkBox.states.hover.textColor checkBox.states.hover.box.backgroundColor checkBox.states.active.textColor checkBox.states.active.box.backgroundColor |
Accept terms & conditions #000D44 #FFFFFF #EE686A #EE686A #EE686A #000D44 |
Aceptar términos y condiciones - - - - - |
6 | textInput.placeholder.text textInput.placeholder.textColor textInput.textColor textInput.borderColor textInput.states.hover.borderColor textInput.states.active.borderColor |
Name or initials #D5D7DF #D5D7DF #000D44 #EE686A #000D44 |
Nombre o iniciales - - - - - |
7 | modal.title.text modal.title.textColor |
Terms and conditions #000D44 |
Términos y condiciones - |
8 | modal.description.text modal.description.textColor |
These are my terms and conditions #000D44 |
Estos son mis términos y condiciones - |
9 | modal.buttons.close.text modal.buttons.close.backgroundColor modal.buttons.close.textColor modal.buttons.close.borderColor modal.buttons.close.states.hover.backgroundColor modal.buttons.close.states.hover.textColor modal.buttons.close.states.hover.borderColor modal.buttons.close.states.active.backgroundColor modal.buttons.close.states.active.textColor modal.buttons.close.states.active.borderColor |
Close #FFFFFF #000D44 #000D44 #EE686A #000D44 #000D44 #000D44 #FFFFFF #000D44 |
Cerrar - - - - - - - - - |
10 | modal.accept.close.text modal.accept.close.backgroundColor modal.accept.close.textColor modal.buttons.accept.borderColor modal.buttons.accept.states.hover.backgroundColor modal.buttons.accept.states.hover.textColor modal.buttons.accept.states.hover.borderColor modal.buttons.accept.states.active.backgroundColor modal.buttons.accept.states.active.textColor modal.buttons.accept.states.active.borderColor |
Accept #000D44 #FFFFFF #000D44 #EE686A #000D44 #EE686A #EE686A #000D44 #EE686A |
Aceptar - - - - - - - - - |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {"confirmProcess": true},
"stages": ["document", "selfie", "esign"],
"options": {
"document": {
"captures": [
{
"documentTypes":["XX"]
}
]
},
"esign": {
"title": "PruebasXpressid2",
"signers": [
{
"name": "David",
"email": "damatriain@veridas.com"
}
],
"libraryDocumentIds":["7f698377-7710-4655-98ee-0055a66cd541"],
"setup": {
"backgroundColor": "#ff0017",
"title": {
"text": "Custom title",
"textColor": "#00ff13"
},
"buttons": {
"refuse": {
"backgroundColor": "#0078ff",
"text": "Custom refuse",
"textColor": "#ff0017",
"borderColor": "#fff300",
"states": {
"hover": {
"backgroundColor": "#0078ff",
"textColor": "#00ff13",
"borderColor": "#ff0017"
},
"active": {
"backgroundColor": "#00ff13",
"textColor": "#ff0017",
"borderColor": "#0078ff"
}
}
},
"sign": {
"backgroundColor": "#0078ff",
"text": "Custom sign",
"textColor": "#00ff13",
"borderColor": "#ff0017",
"states": {
"hover": {
"backgroundColor": "#fff300",
"textColor": "#9700ff",
"borderColor": "#00ff13"
},
"active": {
"backgroundColor": "#999690",
"textColor": "#000000",
"borderColor": "#ffffff"
}
}
}
},
"checkBox": {
"text": "Custom checkbox",
"textColor": "#ff0017",
"box": {
"backgroundColor": "#00ff13"
},
"states": {
"hover": {
"textColor": "#0078ff",
"backgroundColor": "#fff300"
},
"active": {
"textColor": "#9700ff",
"backgroundColor": "#00ff13"
}
}
},
"textInput": {
"textColor": "#00ff13",
"borderColor": "#000000",
"placeHolder": {
"text": "Custom placeholder",
"textColor": "#ffffff"
},
"states": {
"hover": {
"borderColor": "#f3a108"
},
"active": {
"borderColor": "#0078ff"
}
}
},
"modal": {
"title": {
"text": "Custom modal title",
"textColor": "#0078ff"
},
"description": {
"text": "Custom modal description",
"textColor": "#00ff13"
},
"buttons": {
"close": {
"text": "Custom close",
"backgroundColor": "#ff0017",
"textColor": "#0078ff",
"borderColor": "#9700ff",
"states": {
"hover": {
"backgroundColor": "#f3a108",
"textColor": "#0078ff",
"borderColor": "#000000"
},
"active": {
"backgroundColor": "#f008f3",
"textColor": "#000000",
"borderColor": "#00ff13"
}
}
},
"accept": {
"text": "Custom accept",
"backgroundColor": "#00ff13",
"textColor": "#ff0017",
"borderColor": "#9700ff",
"states": {
"hover": {
"backgroundColor": "#ffffff",
"textColor": "#f000ff",
"borderColor": "#0078ff"
},
"active": {
"backgroundColor": "#fff300",
"textColor": "#ff0017",
"borderColor": "#00ff13"
}
}
}
}
}
}
}
}
}
}
Success¶
Number | Parameter | Default Value | |
---|---|---|---|
1 | backgroundColor | #FFFFFF | |
2 | containerBox.show containerBox.borderColor |
true #000D44 |
|
3 | text textColor |
The process has been successfully completed | El proceso se ha completado con éxito #000D44 |
4 | iconColor | #000D44 |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"success": {
"backgroundColor": "#00ff00",
"containerBox": {
"borderColor": "#ee0000"
},
"text": "Success",
"textColor": "#0000ff",
"iconColor": "#aadea2"
}
}
}
Errors¶
Error Modal¶
The error modal pop up is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: show. By default, this parameter is true.
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.title connection.title document.obverse.title document.reverse.title document.generic.title selfie.title video.title |
Error | |
2 | generic.message connection.message document.obverse.message document.reverse.message document.generic.message selfie.message video.message |
An error has occurred, try again later. | Ha ocurrido un error, inténtalo más tarde. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup":{
"errorModal":{
"generic":{
"title": "Title",
"message": "Message"
},
"connection":{
"title": "Title",
"message": "Message"
},
"document":{
"obverse":{
"title": "Title",
"message": "Message"
},
"reverse":{
"title": "Title",
"message": "Message"
},
"generic":{
"title": "Title",
"message": "Message"
}
},
"selfie":{
"title": "Title",
"message": "Message"
},
"video":{
"title": "Title",
"message": "Message"
},
"show": true
}
}
}
Final Error¶
This error screen appears a few seconds after the error modal and leads to the complete termination of the process. Additionally, it consistently appears whenever a token has expired or been consumed.
Number | Parameter | Default Value | |
---|---|---|---|
1 | backgroundColor | #FFFFFF | |
2 | containerBox.show containerBox.borderColor |
true #000D44 |
|
3 | text textColor |
An error has occurred Further action is not possible | El proceso se ha completado con éxito ##5b5a5a |
4 | iconColor | ##da0e1a | |
* Example |
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup":{
"error":{
"backgroundColor": "#00ff00",
"containerBox":{
"borderColor": "#ee0000",
"show": true
},
"text": "Success",
"textColor": "#0000ff",
"iconColor": "#aadea2"
}
}
}
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 horizontal orientation, while other captures such as selfie and video are done in a vertical orientation.
Number | Parameter | Default Value | |
---|---|---|---|
1 | sdkDocument.views.deviceRotated.card.media sdkSelfie.views.deviceRotated.card.media sdkVideo.views.deviceRotated.card.media |
"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 |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"selfie",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
],
"setup": {
"sdkDocument": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
}
]
},
"selfie": {
"setup": {
"sdkSelfie": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
},
"video": {
"setup": {
"sdkVideo": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
}
}
}
}
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.
Number | Parameter | Default Value | |
---|---|---|---|
1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
2 | sdkDocument.views.feedback.errors.videoErrorPermission sdkSelfie.views.feedback.errors.videoErrorPermission 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 |
3 | sdkSelfie.views.feedback.errors.validation.card.buttons.restart.text | Restart | Reintentar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document", "selfie"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
],
"setup": {
"sdkDocument": {
"views": {
"feedback": {
"errors": {
"videoErrorPermission": {
"card": {
"title": "videoErrorPermission.title"
}
}
}
}
}
}
}
}
]
},
"selfie": {
"liveness": "passive",
"setup": {
"sdkSelfie": {
"views": {
"feedback": {
"errors": {
"videoErrorPermission": {
"card": {
"title": "videoErrorPermission.title"
}
},
"validation": {
"card": {
"buttons": {
"restart": {
"text": "restart.text"
}
}
}
}
}
}
}
}
}
}
}
}
}
Challenge Error¶
This error occurs during the active selfie capture when it fails to detect the correct movement as required in the challenge.
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 |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"sdkSelfie": {
"views": {
"feedback": {
"errors": {
"validation": {
"card": {
"title": "errors.validation.card.title",
"buttons": {
"restart": {
"text": "errors.validation.card.button"
}
}
}
}
}
}
}
}
}
}
}
}
}
CssParts¶
Customize UI with cssParts¶
The cssParts
property allows you to personalize the appearance of the user interface (UI) elements for document capture, selfie capture, and video recording processes. It accepts a string value that represents the HTTPS URL of a CSS file. This CSS file will contain the custom styles you define to modify the look and feel of these capture components.
Below are the CSS properties that can be customized for each capture process:
- Document capture: Refer to the guide here.
- Selfie capture: Refer to the guide here.
- Video capture: Refer to the guide here.
Example¶
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"cssParts": "https://example.com/static/custom.css"
}
}
Where the file custom.css
can contain the following as an example:
/* Custom styles for the document capture process */
/* SDK Document */
vd-document::part(display_message_container) {
background-color: #eb3d1e;
}
vd-document::part(display_message_text) {
color: #ffffff;
}
vd-document::part(head_steps) {
color: #ffffff;
}
/* SDK Selfie */
vd-selfie::part(display_message_container) {
background-color: #eb3d1e;
}
vd-selfie::part(display_message_text) {
color: #ffffff;
}
vd-selfie::part(head_steps) {
color: #ffffff;
}
/* SDK Video */
vd-video::part(display_message_container) {
background-color: #eb3d1e;
}
vd-video::part(display_message_text) {
color: #ffffff;
}
vd-video::part(head_steps) {
color: #ffffff;
}