UI Customization

On this page, explore the customization capabilities available for the face-capture and face-liveness Web Components user experience. The face capture and liveness assessment processes consist of several steps, and in each step there are elements that can be customized.

You can customize the color of some elements, fonts, and images with the help of the customization field in the settings object.

For the detailed descriptions of the customization parameters, refer to the Customization section.

• Base Font and Size
• Start Screen
• Camera Screen
• Loading Results
• Result Screen
• Process Management

Base Font and Size

You can customize the component's base font family and size:

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    customization: {
         fontSize: '12px',
         fontFamily: 'serif',
    },
}

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, along with displaying the Go button.

Button

For the Go button, you can customize the following elements:

• Text color
• Background color
• Background hover color
• Text hover color

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    customization: {
        onboardingScreenStartButtonTitle: 'purple',
        onboardingScreenStartButtonBackground: 'blue',
        onboardingScreenStartButtonBackgroundHover: 'red',
        onboardingScreenStartButtonTitleHover: 'grey',
    },
}

Images

You can customize the Start screen images:

const component = document.getElementsByTagName('face-liveness')[0]; 
const base64Image = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';

component.settings = {
    customization: {
         onboardingScreenIllumination: base64Image,
         onboardingScreenAccessories: base64Image,
         onboardingScreenCameraLevel: base64Image,
    },
};

Camera Screen

For the info message plate, you can customize:

• Background color
• Text color

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    customization: {
        cameraScreenFrontHintLabelBackground: 'blue',
        cameraScreenFrontHintLabelText: 'white',
    },
}

Outline and Target Sector

The liveness assessment session with the face-liveness component 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.

Customization is available for:

• User progress sector color
• Target sector color
• Face circle outline color

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    customization: {
        cameraScreenSectorActive: 'red',
        cameraScreenSectorTarget: 'blue',
        cameraScreenStrokeNormal: 'green',
    },
}

Loading Results

During the loading of results, a processing spinner and a text label are displayed:

The processing spinner color can be customized:

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    customization: {
        processingScreenProgress: 'blue',
    },
}

Result Screen

Depending on the result, either a Success or Retry result screen will be displayed in the final step.

Success

For the Success screen, the image can be customized:

const component = document.getElementsByTagName('face-liveness')[0]; 
const base64Image = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';

component.settings = {
    customization: {
        successScreenImage: base64Image,
    },
}

Retry

The Retry screen provides guidelines on how to prepare for another attempt.

There are two types of issues why a person may not successfully pass the liveness assessment:

• Subject-related issues: Smiling, closed eyes, sunglasses, mask, headwear, etc.
• Environment-related issues: Poor lighting, shadows, glare, etc.

If both types of issues occur, the corresponding messages and images will be displayed together.

The customizable elements here are the following:

• Subject retry image
• Environment retry image
• Try again button: Text color, background color, text hover color, background hover color

const component = document.getElementsByTagName('face-liveness')[0]; 
const base64Image = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';

component.settings = {
    customization: {
        retryScreenPersonImage: base64Image,
        retryScreenEnvironmentImage: base64Image,
        retryScreenRetryButtonBackground: 'red',
        retryScreenRetryButtonBackgroundHover: 'blue',
        retryScreenRetryButtonTitle: 'grey',
        retryScreenRetryButtonTitleHover: 'white',
    },
}

Process Management

You can control process interruptions, toggle the visibility of the Start and Result screens, display the Camera Switch button, and hide the Regula footer.

Disable Interruptions

To remove the Close cross button, invoke:

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    closeDisabled: true,
}

Disable Start Screen

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    startScreen: false,
}

Disable Result Screen

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    finishScreen: false,
}

Hide Camera Switch Button

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    changeCamera: false,
}

Hide Regula Copyright Footer

const component = document.getElementsByTagName('face-liveness')[0]; 
component.settings = {
    copyright: false,
}