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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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)

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic

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