Customize the Web user interface

Last updated: October 28, 2024

This topic describes how to customize the user experience on web browsers. All options can be added as an attribute of the <iproov-me> HTML tag. Some options are applicable to all claim types, others are specific to Genuine Presence Assurance® (GPA) or Liveness Assurance™ (LA) transactions.

See the implementation examples on GitHub: https://github.com/iProov/web#-options

Notes

  • Click a thumbnail image below to enlarge it.

  • The defaults support accessibility requirements and have been verified to comply with WCAG 2.1 AA guidelines.

Specify colors

When specifying colors you can pass the following values:

  • Literal: red

  • RGB: rgb(230, 245, 66)

  • Hex: #e6f542

  • RGBA: rgba(230, 245, 66, 0.8)

Select an SDK version

To display options that are applicable to your environment, select a version of the SDK:

General UI options

Option name Description Default Example User experience
prompt_rounded_corners

Display the user prompt with round corners.

  • On: true

  • Off: false

 true prompt_rounded_corners="false"

True:

False:
title_text_color

The color of the title text.

See also custom_title.

 No text title_text_color: "#fff"
surround_color The color of the area outside the oval.   surround_color: "rgba(0, 0, 0, 0.4)"
prompt_text_color The color of the text in the prompt box.   prompt_text_color: "#ffffff"
prompt_background_color The background color of the prompt box.   prompt_background_color: "rgba(0, 0, 0, 0.8)"
header_background_color Background color of the header area. Encloses the title, logo, and Close button (1).   header_background_color: "rgba(0, 0, 0, .68)"
header_text_color Header text color (2).   header_text_color: "#fff"
footer_background_color Background color of the footer area (3).   footer_background_color: "rgba(0, 0, 0, .68)"
prompt_text_color Footer or user prompt text color (4).   footer_text_color: "#fff"
custom_title

Enter the title text (2).

You can also pass in %@ characters that are mapped, in this order, to:

  • type Enrol or verify

  • user_name The user name you passed when generating the token.

  • sp_name The service provider you used to generate the token.

An iProov generated message.

"Empty string" (no title is displayed).

custom_title="MyTitle"

custom_title="%@ AS %@ TO %@"

close_button

Specify a custom close button. SVG is recommended but all web formats are supported (5).

close_button="https://www.materialui.co

/materialIcons/navigation/close_black_72x72.png"

logo

Specify your logo, relative path, or data URI. SVG is recommended but all web formats are supported (6).

 iProov logo logo="https://acme/images/logo.svg"
filter

Apply a filter to the camera preview:

shaded

classic

vibrant (full color)

clear

blur

shaded filter="clear"

Classic:

Shaded:

Vibrant:

 
enable_floating_prompt

Specify where the user prompt is positioned on the screen:

  • Footer: false

  • Center: true

 

 false enable_floating_prompt="true"
show_countdown Display the countdown (in seconds) until the iProov claim starts. false show_countdown="true"
floating_prompt_rounded_corners

Display the user prompt with round corners.

  • On: true

  • Off: false

 true floating_prompt_rounded_corners="false"

GPA UI options

Option name Description Default Example User experience
gpa_not_ready_oval_stroke_color Color of the oval outline when GPA is not ready. null gpa_not_ready_oval_stroke_color: "#ffffff"
gpa_ready_oval_stroke_color Color of the oval outline when GPA is ready. null gpa_ready_oval_stroke_color: "#01ac41"
progress_bar_color

During the GPA journey, set the footer progress bar color (1).

   progress_bar_color: "#000"
loading_tint_color

The app is connecting to the server or no face was found (2).

 gray loading_tint_color: "#5c5c5c"
not_ready_tint_color

Cannot start iProoving until the user takes action, for example, moves closer (3).

 

 orange not_ready_tint_color: "#f5a623"
ready_tint_color

Ready to start iProoving (4).

 green ready_tint_color: "#01bf46"
oval_scanning_color The color of the oval while scanning in GPA (5).   oval_scanning_color: "#fff"
gpa_not_ready_overlay_stroke_color

The color of the face position elements when the SDK is not ready.

 null gpa_not_ready_overlay_stroke_color: "#904300"
gpa_ready_overlay_stroke_color

The color of the face position elements when the SDK is ready.

 null gpa_ready_overlay_stroke_color: "#006625"
gpa_not_ready_floating_prompt_background_color

The background color of the user prompt when the SDK is not ready.

 null gpa_not_ready_floating_prompt_background_color: "#F06F00"
gpa_ready_floating_prompt_background_color

The background color of the user prompt when the SDK is ready.

 null gpa_ready_floating_prompt_background_color: "#01AC41"

LA UI options

Option name Description Default Example User experience
liveness_oval_stroke_color Color of the oval outline during an LA scan.   liveness_oval_stroke_color: "#ffffff"
liveness_completed_oval_stroke_color Color of the oval outline after an LA scan has completed.   liveness_completed_oval_stroke_color: "#01ac41"  
liveness_tint_color The background and face oval line tint color (1). blue liveness_tint_color: "#1756e5"
liveness_scanning_tint_color The background and face oval line tint color during the scanning process (2). lightGrey liveness_scanning_tint_color: "#5c5c5c"
liveness_overlay_stroke_color

The color of the face position elements.

If not specified, inherited from the option liveness_tint_color.

 null liveness_overlay_stroke_color: "#5c5c5c"
liveness_floating_prompt_background_color

The background color of the user prompt.

If not specified, inherited from the option liveness_tint_color.

 null liveness_floating_prompt_background_color: "#5c5c5c"

Slots

Use slots to customize the markup and styling of your apps and override the default out of the box iProov components.

Available slots, example implementation, and templating guidance: https://github.com/iProov/web#-slots

Deprecated options

Deprecated options will be removed from a future SDK version. iProov recommends not using deprecated options. If you will be affected, please contact Support.

Option name Deprecated in version
footer_text_color 3.5.1

Next step

Web network options