Skip to content

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-selfie::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.css demo 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-selfie::part(display_message_container) {
  background-color: #eb3d1e;
}

vd-selfie::part(display_message_text) {
  color: #ffffff;
}

vd-selfie::part(head_steps) {
  color: #ffffff;
}

Loading View

loadingParts

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

instructionParts

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_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);
14 instructions_slide_dots border-radius: 50%; background: #cccccc; border-radius: 50%; background: #cccccc;
- instructions_logo - -
- instructions_logo_img - -

Capture

selfieCaptureParts

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_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;
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); font-size: 80%;
- 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

Capture default

selfieDefaultCaptureParts

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;

Capture detection

selfieCaptureDetectionParts

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;

Capture successs

selfieCaptureSuccessParts

id name default value landscape default value portrait
1 capture_glowing_outline_container_success background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%;

Selfie Head

selfieCaptureHeadParts

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_head_pose_rectangle background-color: transparent; border-radius: 3px; background-color: transparent; border-radius: 5px;
6 capture_head_pose_inner_rectangle background-color: #000D44; border-radius: 3px; background-color: #000D44; border-radius: 5px;
7 capture_success_tick Better not to configure Better not to configure
8 capture_arrow_bottom_img
capture_arrow_left_img
capture_arrow_top_img
capture_arrow_right_img
transform: translateX(-50%);
transform: translateY(-50%);
transform: translateX(-50%);
transform: translateY(-50%);
transform: translateX(-50%);
transform: translateY(-50%);
transform: translateX(-50%);
transform: translateY(-50%);
9 capture_logo - -
10 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;
11 capture_glowing_outline_header_top_message font-size: calc(var(--main-sdk-height) * 0.035); font-size: 80%;
- capture Better not to configure Better not to configure

Success Tick

selfieSuccessTickParts

id name default value landscape default value portrait
1 capture_glowing_outline_container_success background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%;
2 capture_success_tick Better not configure Better not configure
3 capture_success_tick_circle stroke: #53A335; fill: none; stroke: #53A335; fill: none;
4 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;
5 capture_logo - -
6 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;

Success Tick Media

To properly display a custom successTick image through the configuration, you need to add the following property to your config file with the desired image:

  "sdkSelfie": {
    "views": {
      "capture": {
        "successTick": {
          "media": "/images/successTick.gif"
        }
      }
    }
  }
}

selfieSuccessTickMediaParts

id name default value landscape default value portrait
1 capture_glowing_outline_container_success background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%;
2 capture_success_tick Better not configure Better not configure
3 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;
4 capture_logo - -
5 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;

Review Image

selfieReviewParts

id name default value landscape default value portrait
1 review Better not to configure Better not to configure
2 review_image background-color: #FFFFFF; background-color: #FFFFFF;
3 review_image_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 review_image_close_button_img - -
5 review_image_container color: #000D44; background-color: #FFFFFF; color: #000D44; background-color: #FFFFFF;
6 review_image_message border-radius: 8px; background-color: #FFFFFF; font-size: calc(var(--main-sdk-height) * 0.05); font-family: PublicSansRegular; color: #000D44; box-shadow: none; border-radius: 8px; background-color: #FFFFFF; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansRegular; color: #000D44; box-shadow: none;
7 review_image_message_text text-align: center; color: #000D44; text-align: center; color: #000D44;
8 review_image_img width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
9 review_image_img_container border: 4px solid #F2F2F2; border-radius: 50%; box-shadow: none; border: 4px solid #F2F2F2; border-radius: 50%; box-shadow: none;
10 review_image_message_buttons - -
11 review_image_message_buttons_repeat box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-height) * 0.04); font-family: PublicSansNormal; background: #D3EBFC; color: #000D44; box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansNormal; background: #D3EBFC; color: #000D44;
12 review_image_message_buttons_continue box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-height) * 0.04); font-family: PublicSansNormal; background: #000D44; color: #FFFFFF; box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansNormal; background: #000D44; color: #FFFFFF;
- review_logo - -
- review_logo_img - -

Feedback

feeedbackParts

id name default value landscape default value portrait
1 feedback_logo Better not to configure Better not to configure
2 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;
3 feedback_close_button Better not to configure Better not to configure
4 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;
5 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%);
6 feedback_display_message border-radius: 16px; background-color: #FFFFFF; text-align: center; border-radius: 16px; background-color: #FFFFFF; text-align: center;
7 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;
8 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

rotatedDeviceParts

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