Customization¶
Style¶
SDK's style can be customized via the integration's html file. In the style html section next to the SDK html tag.
We recommend to use ::part pseudo-element to ensure that the inner components are style correctly following the web components best practices.
Default UI¶
By default SDK's style comes with some interface components disabled (example: instructions_slide_header), through the parts you have the possibility to activate them to customize the user interface (UI). For example the loading_display_message_media css part should be enabled like the code below:
vd-video::part(loading_display_message_media) {
display: block; /** THIS IS VERY IMPORTANT TO ENABLE THE HIDDEN ELEMENTS */
background-color: #eb3d1e;
}
CSS Part instructions¶
- In the following sections you will be able to see the sdk's available views and its parts with a border coloured line.
- Each lines has an hexadecimal color that you could find in the
parts.cssdemo file applied specifically in the CSS Part section. - So if you want to check how this section could be styled using parts, just use the example below:
vd-video::part(display_message_container) {
background-color: #eb3d1e;
}
vd-video::part(display_message_text) {
color: #ffffff;
}
Loading View¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | loading | Better not to configure | Better not to configure |
| 2 | loading_container | background-color: #000D44 | background-color: #000D44 |
| 3 | loading_spinner | Better not to configure | Better not to configure |
| 4 | loading_spinner_container | Better not to configure | Better not to configure |
| 5 | loading_spinner_animation | border: 0.9rem solid #f2f2f2; border-left-color: #ff7777; font-size: 1rem; | border: 0.9rem solid #f2f2f2; border-left-color: #ff7777; font-size: 1rem; |
| 6 | loading_display_message | background: transparent; | background: transparent; |
| 7 | loading_message_is_loading | Better not to configure | Better not to configure |
| - | loading_logo | display:none | display:none |
| - | loading_logo_img | width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
| - | loading_display_message_media | Better not to configure | Better not to configure |
| - | loading_display_message_header | Better not to configure | Better not to configure |
| - | loading_restart_button | Better not to configure | Better not to configure |
Instructions¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | instructions | Better not to configure | Better not to configure |
| 2 | instructions_guide_modal | Better not to configure | Better not to configure |
| 3 | instructions_close_button_button | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
| 4 | instructions_close_button_img | - | - |
| 5 | instructions_slide | background-color: #ffffff; border-radius: 8px; box-shadow: none; color: #000D44; font-family: PublicSansRegular; font-size: calc(var(--main-sdk-height) * 0.04); | background-color: #ffffff; border-radius: 8px; box-shadow: none; color: #000D44; font-family: PublicSansRegular; font-size: calc(var(--main-sdk-height) * 0.04); |
| 6 | instructions_slide_box | background-color: #ffffff; border-radius: 8px; box-shadow: none; text-align: center; | background-color: #ffffff; border-radius: 8px; box-shadow: none; text-align: center; |
| 7 | instructions_slide_box_title | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.05); font-weight: normal; text-align: left; | color: #000D44; font-size: min((calc(var(--main-sdk-width) * 0.08)), (calc(var(--main-sdk-height) * 0.06))); font-weight: normal; text-align: left; |
| 8 | instructions_slide_box_subtitle | font-family: PublicSansRegular; color: #000D44; text-align: left; font-size: calc(var(--main-sdk-height) * 0.04); | font-family: PublicSansRegular; color: #000D44; text-align: left; font-size: calc(var(--main-sdk-width) * 0.04); |
| 9 | instructions_slide_box_image | max-width: 100%; max-height: calc(var(--main-sdk-height) * 0.35); | max-width: 100%; max-height: calc(var(--main-sdk-height) * 0.35); |
| 10 | instructions_slide_buttons_container | font-family: PublicSansNormal; | font-family: PublicSansNormal; |
| 11 | instructions_slide_button_prev | background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); | background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
| 12 | instructions_slide_button_next | background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); | background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
| 13 | instructions_slide_dots | border-radius: 50%; background: #cccccc; | border-radius: 50%; background: #cccccc; |
| 14 | instructions_slide_button | background: #000D44; border-radius: 8px; box-shadow: none; color: #ffffff; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.04); | background: #000D44; border-radius: 8px; box-shadow: none; color: #ffffff; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-width) * 0.04); |
| - | instructions_logo | - | - |
| - | instructions_logo_img | - | - |
Face detection¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_top_div | background-color: #f2f2f2; text-align: left; font-size: 85%; border-radius: 4px; | background: #000D44; color: #ffffff; text-align: center; |
| 2 | capture_glowing_outline_top_message | font-size: calc(var(--main-sdk-height) * 0.035); | - |
| 3 | capture_close_button_button | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
| 4 | capture_close_button_img | - | - |
| 5 | capture_glowing_outline_container_faceCentered | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #53A335; border-style: solid; | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #53A335; border-style: solid; |
| 6 | capture_display_message | background-color: #ffffff; text-align: center; border-radius: 16px; | background-color: #ffffff; text-align: center; border-radius: 16px; |
| 7 | capture_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| 8 | capture_logo | - | - |
| 9 | capture_logo_img | width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
| 10 | capture_glowing_outline_header_top_message | font-size: calc(var(--main-sdk-height) * 0.035); | - |
| - | capture | Better not to configure | Better not to configure |
| - | capture_display_message_header | display: none; font-size: calc(var(--main-sdk-height) * 0.02); | display: none; font-size: calc(var(--main-sdk-height) * 0.02); |
| - | capture_display_message_media | display: none; | display: none; |
| - | capture_glowing_outline | Better not to configure | Better not to configure |
Face Capture default¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #ffffff; border-style: solid; | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #ffffff; border-style: solid; |
Face Capture detection¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_detection | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #257CD0; border-style: solid; | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #257CD0; border-style: solid; |
Face Capture face not centered¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_faceNotCentered | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #f2f2f2; border-style: solid; | background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #f2f2f2; border-style: solid; |
Document capture¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture | Better not to configure | Better not to configure |
| 2 | capture_glowing_outline | Better not to configure | Better not to configure |
| 3 | capture_logo | Better not to configure | Better not to configure |
| 4 | capture_logo_img | width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
| 5 | capture_close_button_button | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
| 6 | capture_close_button_img | Better not to configure | filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
| 7 | capture_glowing_outline_top_div | background-color: #f2f2f2; text-align: left; | background: #000D44; color: #ffffff; text-align: center; |
| 8 | capture_glowing_outline_header_top_message | font-size: calc(var(--main-sdk-height) * .045); | font-size: var(--sdk-font-size, calc(1rem + 1vw)); |
| 9 | capture_glowing_outline_container | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
| 10 | capture_glowing_outline_top_message | display: none; | display: block; font-size: 80%; |
| - | capture_manual_capture_button_img | Better not to configure | Better not to configure |
| - | capture_close_button | Better not to configure | Better not to configure |
Document capture too far¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture | Better not to configure | Better not to configure |
| 2 | capture_glowing_outline | Better not to configure | Better not to configure |
| 3 | capture_logo | Better not to configure | Better not to configure |
| 4 | capture_logo_img | width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
| 5 | capture_close_button_button | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; | max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
| 6 | capture_close_button_img | Better not to configure | filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
| 7 | capture_glowing_outline_top_div | background-color: #f2f2f2; text-align: left; | background: #000D44; color: #ffffff; text-align: center; |
| 8 | capture_glowing_outline_header_top_message | font-size: calc(var(--main-sdk-height) * .045); | font-size: var(--sdk-font-size, calc(1rem + 1vw)); |
| 9 | capture_glowing_outline_container_tooFar | background-color: transparent; border: 3px solid #257CD0; border-radius: 15px; | background-color: transparent; border: 3px solid #257CD0; border-radius: 15px; |
| 10 | capture_glowing_outline_top_message | display: none; | display: block; font-size: 80%; |
| - | capture_close_button | Better not to configure | Better not to configure |
Capture View - Center the document¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_detection | background-color: transparent; border: 3px solid #53A335 border-radius: 15px; | background-color: transparent; border: 3px solid #53A335 border-radius: 15px; |
| 2 | capture_display_message | border-radius: 16px; text-align: center; background-color: #f2f2f2; | border-radius: 16px; text-align: center; background-color: #f2f2f2; |
| 3 | capture_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
Capture View detection¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_detection | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
| 2 | capture_display_message_context | background-color: #f2f2f2; text-align: left; border-radius: 4px; | background-color: #f2f2f2; text-align: left; border-radius: 4px; |
| 3 | capture_display_message_media | width: 15px; | - |
| 4 | capture_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| ### Capture Success media |
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_display_message_success | border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; | border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
| 2 | capture_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| 3 | capture_glowing_outline_container_success | background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; | background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
| 4 | capture_success_tick | Better not to configure | Better not to configure |
| 5 | capture_success_tick_img | width: calc(var(--main-sdk-height) * 0.5); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.5); height: 100%; opacity: 1; |
Capture Success Tick¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_display_message_success | border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; | border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
| 2 | capture_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| 3 | capture_glowing_outline_container_success | background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; | background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
| 4 | capture_success_tick | Better not to configure | Better not to configure |
| 5 | capture_success_tick_circle | stroke: #53A335; fill: none; | stroke: #53A335; fill: none; |
| 6 | capture_success_tick_path | stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; | stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; |
Feedback¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | feedback | background: #000D44 | background: #000D44 |
| 2 | feedback_logo | Better not to configure | Better not to configure |
| 3 | feedback_logo_img | width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; | width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
| 4 | feedback_close_button | Better not to configure | Better not to configure |
| 5 | feedback_close_button_button | max-width: 50px; min-width: 25px; border: 0; background-color: #ce12c1; | max-width: 50px; min-width: 25px; border: 0; background-color: #ce12c1; |
| 6 | feedback_close_button_img | filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); | filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
| 7 | feedback_display_message | border-radius: 16px; background-color: #FFFFFF; text-align: center; | border-radius: 16px; background-color: #FFFFFF; text-align: center; |
| 8 | feedback_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| 9 | feedback_restart_button | background-color: #000D44; border: 1px solid #000D44; font-size: calc(var(--main-sdk-height) * 0.03); color: #FFFFFF; border-radius: 16px; box-shadow: none; font-family: PublicSansNormal; | background-color: #000D44; border: 1px solid #000D44; color: #FFFFFF; border-radius: 16px; font-size: calc(var(--main-sdk-height) * 0.02); box-shadow: none; font-family: PublicSansNormal; |
Rotate device¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | rotate_device_container | background-color: #000D44; | background-color: #000D44; |
| 2 | rotate_device_img | max-height: calc(var(--main-sdk-height) * 0.45); transform: translateY(-25%); | max-height: calc(var(--main-sdk-width) * 0.45); transform: translateY(-25%); |
| 3 | rotate_device_display_message | border-radius: 16px; background-color: #ffffff; text-align: center; | border-radius: 16px; background-color: #ffffff; text-align: center; |
| 4 | rotate_device_display_message_text | color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; | color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
| - | rotated_device | Better not to configure | Better not to configure |