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 on each 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 |
---|---|---|---|
Button: Text color | |||
Button: Background color | |||
Button: Hover color | |||
Screen: Background color | |||
Screen: Text color |
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: 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 | |||
Text color | |||
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 Failure result screen will be displayed in the final step. The Failure screen provides guidelines on how to prepare for another attempt.
Element | Web Component | Mobile: Android | Mobile: iOS |
---|---|---|---|
Button: Text color | |||
Button: Background color | |||
Button: Hover color | |||
Failure image | |||
Success image |
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 |
---|---|---|---|
Textual messages |
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
- Basic Customization
- Advanced Customization: iOS
- Customization Examples on GitHub: iOS
- Advanced Customization: Android
- Customization Examples on GitHub: Android
- Text Localization