Skip to content

Liveness Assessment UI Customization

On this page, explore the customization capabilities available for the liveness assessment user experience. The liveness assessment process consists of several steps, and in every step there are elements that can be customized.

Start Screen

This is the initial screen that opens once the liveness assessment process starts. It provides basic instructions on how a person can prepare for the assessment, and the Go button.

Element Web Component Mobile: Android Mobile: iOS
Go button: Text color
Go button: Background color
Go button: Hover color
Screen: Background color
Title text label: Color and font size
Subtitle text label: Color and font size
Hint text labels: Color and font size
Images

For example, here is a comparison of a default screen and a customized one:

Session

The liveness assessment session is accompanied by an animation that demonstrates how to turn one's head. A blurred image of a person's face is displayed within a circle with animated and textual hints illustrated by colored target sectors around the circle.

Element Web Component Mobile: Android Mobile: iOS
Animated hint: Face color
Animated hint: Background color
Textual hint: Font size
Textual hint: Text color
Textual hint: Background color
Face circle: Outline color
Target sector: Color
Turn on/off the Switch Camera button

For example, here is a comparison of a default screen and a customized one:

Loading Results

During the loading of results, a processing spinner and a text are displayed.

Element Web Component Mobile: Android Mobile: iOS
Processing spinner: Color
Screen background: Color
Text label: Color, font size
Animation style

For example, here is a comparison of a default screen and a customized one:

Result Screen

Depending on the result, either a Success or Retry result screen will be displayed in the final step.

Success

Element Web Component Mobile: Android Mobile: iOS
Screen background: Color
Success image

Retry

The Retry screen provides guidelines on how to prepare for another attempt.

The reason why a person may not successfully pass the liveness assessment can be attributed to either the subject (for example, smiling, closed eyes, sunglasses, mask, headwear, etc.) or the environment (for example, problems with lighting, shadows, glare).

An image and a text label are provided for each of these cases. If the problem encompasses both cases, images and hints for both cases will be displayed.

Element Web Component Mobile: Android Mobile: iOS
Screen background: Color
Title text label: Color and font size
Subtitle text label: Color and font size
Hint text label: Color and font size
Subject retry image
Environment retry image
Try again button: Text color
Try again button: Background color
Try again button: Hover color
Try again button: Font size

For example, here is a comparison of a default screen and a customized one:

Advanced Customization

Besides the basic customization, you can additionally customize labels, buttons, and images.

Element Web Component Mobile: Android Mobile: iOS
Label
Button
Image

Texts Localization

You can translate or adapt texts used in the process.

Element Web Component Mobile: Android Mobile: iOS
Text labels

Process Management

Also, you can choose whether or not to display the start and result screens, as well as control the ability to interrupt the process.

Element Web Component Mobile: Android Mobile: iOS
Disable interruptions (remove the Close cross button)
Disable the start screen
Disable the result screen

Customization Guides

Mobile

Web Components