Basic 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.
Info
You can find the customization examples in the Architecture section.
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. You can customize the button text and background color and the screen background color:
Button: Text color
let uiConfiguration = UIConfiguration {
$0.setColor(.black, forItem: .OnboardingScreenStartButtonTitle)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor blackColor] forItem:OnboardingScreenStartButtonTitle];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE, R.color.background_color)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE, R.color.background_color)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Button: Background color
let uiConfiguration = UIConfiguration {
$0.setColor(.black, forItem: .OnboardingScreenStartButtonBackground)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor blackColor] forItem:OnboardingScreenStartButtonBackground];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND, R.drawable.custom_button_drawable)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND, R.drawable.custom_button_drawable)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Screen: Background color
let uiConfiguration = UIConfiguration {
$0.setColor(.yellow, forItem: .OnboardingScreenBackground)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor yellowColor] forItem:OnboardingScreenBackground];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_BACKGROUND, R.color.background_color)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.ONBOARDING_SCREEN_BACKGROUND, R.color.background_color)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
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:
Textual hint: Text color
let uiConfiguration = UIConfiguration {
$0.setColor(.white, forItem: .CameraScreenFrontHintLabelText)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor whiteColor] forItem:CameraScreenFrontHintLabelText];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT, R.color.title_color)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT, R.color.title_color)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Textual hint: Background color
let uiConfiguration = UIConfiguration {
$0.setColor(.black, forItem: .CameraScreenFrontHintLabelBackground)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor blackColor] forItem:CameraScreenFrontHintLabelBackground];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND, R.drawable.notification_background_white)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND, R.drawable.notification_background_white)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Face circle outline: Color
let uiConfiguration = UIConfiguration {
$0.setColor(.green, forItem: .CameraScreenStrokeActive)
$0.setColor(.green, forItem: .CameraScreenStrokeNormal)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor greenColor] forItem:CameraScreenStrokeActive];
[builder setColor:[UIColor greenColor] forItem:CameraScreenStrokeNormal];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE, R.color.stroke_active)
.setColor(CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL, R.color.stroke_normal)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE, R.color.stroke_active)
.setColor(CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL, R.color.stroke_normal)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Target sector: Color
let uiConfiguration = UIConfiguration {
$0.setColor(.green.withAlphaComponent(0.35), forItem: .CameraScreenSectorTarget)
$0.setColor(.green, forItem: .CameraScreenSectorActive)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[[UIColor greenColor] colorWithAlphaComponent:0.35] forItem:CameraScreenSectorTarget];
[builder setColor:[UIColor greenColor] forItem:CameraScreenSectorActive];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE, R.color.sector_active)
.setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET, R.color.sector_target)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE, R.color.sector_active)
.setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET, R.color.sector_target)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Loading Results
During the loading of results, a processing spinner and a text are displayed:
Processing spinner: Color
let uiConfiguration = UIConfiguration {
$0.setColor(.green, forItem: .ProcessingScreenProgress)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor greenColor] forItem:ProcessingScreenProgress];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.PROCESSING_SCREEN_PROGRESS, R.color.progress)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.PROCESSING_SCREEN_PROGRESS, R.color.progress)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Text: Color
let uiConfiguration = UIConfiguration {
$0.setColor(.green, forItem: .ProcessingScreenTitleLabel)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor greenColor] forItem:ProcessingScreenTitleLabel];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.PROCESSING_SCREEN_TITLE, R.color.message_color)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.PROCESSING_SCREEN_TITLE, R.color.message_color)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
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:
The Success screen contains only a customizable image:
Button: Text color
let uiConfiguration = UIConfiguration {
$0.setColor(.white, forItem: .RetryScreenRetryButtonTitle)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor whiteColor] forItem:RetryScreenRetryButtonTitle];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE, R.color.button_text)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE, R.color.button_text)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Button: Background color
let uiConfiguration = UIConfiguration {
$0.setColor(.black, forItem: .RetryScreenRetryButtonBackground)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setColor:[UIColor blackColor] forItem:RetryScreenRetryButtonBackground];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND, R.color.button_background)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND, R.color.button_background)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Failure image
let uiConfiguration = UIConfiguration {
$0.setImage(UIImage(named: "custom_image_environment")!, forItem: .RetryScreenHintEnvironment)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setImage:[UIImage imageNamed:@"custom_image_environment"] forItem:RetryScreenHintEnvironment];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setImage(CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT, R.drawable.ic_light)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setImage(CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT, R.drawable.ic_light)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
Success image
let uiConfiguration = UIConfiguration {
$0.setImage(UIImage(named: "success_image")!, forItem: .SuccessScreenImage)
}
FaceSDK.service.customization.configuration = uiConfiguration
RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
[builder setImage:[UIImage imageNamed:@"success_image"] forItem:SuccessScreenImage];
}];
RFSFaceSDK.service.customization.configuration = uiConfiguration;
val uiConfiguration = UiConfiguration.Builder()
.setImage(CustomizationImage.SUCCESS_SCREEN_IMAGE, R.drawable.done_button)
.build()
FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
.setImage(CustomizationImage.SUCCESS_SCREEN_IMAGE, R.drawable.done_button)
.build();
FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);
Coming soon
Coming soon
Coming soon
Coming soon
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.
Disable interruptions (remove the Close cross button)
let configuration = LivenessConfiguration {
$0.isCloseButtonEnabled = false
}
FaceSDK.service.startLiveness(
from: viewController,
animated: true,
configuration: configuration,
onLiveness: { response in
},
completion: nil
)
RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder * _Nonnull builder) {
[builder setCloseButtonEnabled:NO];
}];
[RFSFaceSDK.service startLivenessFrom:self animated:YES
onLiveness:^(RFSLivenessResponse * _Nonnull repsonse) {
} completion:^{
}];
val configuration = LivenessConfiguration.Builder()
.setCloseButtonEnabled(false)
.build()
FaceSDK.Instance().startLiveness(
context, configuration) { livenessResponse: LivenessResponse? -> }
LivenessConfiguration configuration = new LivenessConfiguration.Builder()
.setCloseButtonEnabled(false)
.build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});
Coming soon
Coming soon
Coming soon
Coming soon
Disable the start screen
let configuration = LivenessConfiguration {
$0.stepSkippingMask = [.onboarding]
}
FaceSDK.service.startLiveness(
from: viewController,
animated: true,
configuration: configuration,
onLiveness: { response in
},
completion: nil
)
RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder * _Nonnull builder) {
builder.stepSkippingMask = RFSLivenessStepSkipOnboarding;
}];
[RFSFaceSDK.service startLivenessFrom:viewController
animated:YES
configuration:configuration
onLiveness:^(RFSLivenessResponse * _Nonnull response) {
} completion:nil];
val configuration = LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.ONBOARDING_STEP)
.build()
FaceSDK.Instance().startLiveness(
context, configuration
) { livenessResponse: LivenessResponse? -> }
LivenessConfiguration configuration = new LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.ONBOARDING_STEP)
.build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});
Coming soon
Coming soon
Coming soon
Coming soon
Disable the result screen
let configuration = LivenessConfiguration {
$0.stepSkippingMask = [.success]
}
FaceSDK.service.startLiveness(
from: viewController,
animated: true,
configuration: configuration,
onLiveness: { response in
},
completion: nil
)
RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder * _Nonnull builder) {
builder.stepSkippingMask = RFSLivenessStepSkipSuccess;
}];
[RFSFaceSDK.service startLivenessFrom:viewController
animated:YES
configuration:configuration
onLiveness:^(RFSLivenessResponse * _Nonnull response) {
} completion:nil];
val configuration = LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.SUCCESS_STEP)
.build()
FaceSDK.Instance().startLiveness(
context, configuration) { livenessResponse: LivenessResponse? -> }
LivenessConfiguration configuration = new LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.SUCCESS_STEP)
.build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});
Coming soon
Coming soon
Coming soon
Coming soon
Disable both start and result screens
let configuration = LivenessConfiguration {
$0.stepSkippingMask = [.onboarding, .success]
}
FaceSDK.service.startLiveness(
from: viewController,
animated: true,
configuration: configuration,
onLiveness: { response in
},
completion: nil
)
RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder * _Nonnull builder) {
builder.stepSkippingMask = RFSLivenessStepSkipOnboarding | RFSLivenessStepSkipSuccess;
}];
[RFSFaceSDK.service startLivenessFrom:viewController
animated:YES
configuration:configuration
onLiveness:^(RFSLivenessResponse * _Nonnull response) {
} completion:nil];
val configuration = LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.ONBOARDING_STEP, LivenessSkipStep.SUCCESS_STEP)
.build()
FaceSDK.Instance().startLiveness(
context, configuration) { livenessResponse: LivenessResponse? -> }
LivenessConfiguration configuration = new LivenessConfiguration.Builder()
.setSkipStep(LivenessSkipStep.ONBOARDING_STEP, LivenessSkipStep.SUCCESS_STEP)
.build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});
Coming soon
Coming soon
Coming soon
Coming soon