Customize Face SDK Liveness Assessment UI
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:
User-Triggered Capture
If the captureButton parameter is set to true, before the session starts, a screen with the Take a selfie button appears. See more details on the Web Components UI customization page.
Customization is available for face circle outline color and the active Capture button color.
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 | |
|
|
| Toolbar (Light): Tint color | |
|
|
| Toolbar (Dark): Tint color | |
|
|
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, control the ability to interrupt the process and enable user-triggered capture.
| Element | Web Component | Mobile: Android | Mobile: iOS |
|---|---|---|---|
| Disable interruptions (remove the Close cross button) | |
|
|
| Disable the start screen | |
|
|
| Disable the result screen | |
|
|
| Enable user-triggered capture | |
|
|
Customization Guides
Mobile
- Basic Customization
- Advanced Customization: iOS
- Customization Examples on GitHub: iOS
- Advanced Customization: Android
- Customization Examples on GitHub: Android
- Text Localization