Skip to content

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