Look-and-Feel Customization

To set your own look-and-feel options, use the style section in the Ozliveness.open method. The options are listed below the example.

OzLiveness.open({
style: {
    baseColorCustomization: {
        textColorPrimary: "#000000",
        backgroundColorPrimary: "#FFFFFF",
        textColorSecondary: "#8E8E93",
        backgroundColorSecondary: "#F2F2F7",
        iconColor: "#00A5BA"
    },
    baseFontCustomization: {
        textFont: "Roboto, sans-serif",
        textSize: "16px",
        textWeight: "400",
        textStyle: "normal"
    },
    titleFontCustomization: {
        textFont: "inherit",
        textSize: "36px",
        textWeight: "500",
        textStyle: "normal"
    },
    buttonCustomization: {
        textFont: "inherit",
        textSize: "14px",
        textWeight: "500",
        textStyle: "normal",
        textColorPrimary: "#FFFFFF",
        backgroundColorPrimary: "#00A5BA",
        textColorSecondary: "#00A5BA",
        backgroundColorSecondary: "#DBF2F5",
        cornerRadius: "10px"
    },
    toolbarCustomization: {
        closeButtonIcon: "cross",
        iconColor: "#707070"
    },
    centerHintCustomization: {
        textFont: "inherit",
        textSize: "24px",
        textWeight: "500",
        textStyle: "normal",
        textColor: "#FFFFFF",
        backgroundColor: "#1C1C1E",
        backgroundOpacity: "56%",
        backgroundCornerRadius: "14px",
        verticalPosition: "38%"
    },
    hintAnimation: {
        hideAnimation: false,
        hintGradientColor: "#00BCD5",
        hintGradientOpacity: "100%",
        animationIconSize: "80px"
    },
    faceFrameCustomization: {
        geometryType: "oval",
        cornersRadius: "0px",
        strokeDefaultColor: "#D51900",
        strokeFaceInFrameColor: "#00BCD5",
        strokeOpacity: "100%",
        strokeWidth: "6px",
        strokePadding: "4px"
    },
    documentFrameCustomization: {
        cornersRadius: "20px",
        templateColor: "#FFFFFF",
        templateOpacity: "100%"
    },
    backgroundCustomization: {
        backgroundColor: "#FFFFFF",
        backgroundOpacity: "88%"
    },
    antiscamCustomization: {
        enableAntiscam: false,
        textMessage: "",
        textFont: "inherit",
        textSize: "14px",
        textWeight: "500",
        textStyle: "normal",
        textColor: "#000000",
        textOpacity: "100%",
        backgroundColor: "#F2F2F7",
        backgroundOpacity: "100%",
        backgroundCornerRadius: "20px",
        flashColor: "#FF453A"
    },
    versionTextCustomization: {
        textFont: "inherit",
        textSize: "16px",
        textWeight: "500",
        textStyle: "normal",
        textColor: "#000000",
        textOpacity: "56%"
    },
    maskCustomization: {
            maskColor: "#008700",
            glowColor: "#000102",
            minAlpha: "30%", // 0 to 1 or 0% to 100%
            maxAlpha: "100%" // 0 to 1 or 0% to 100%

    }

}
});

baseColorCustomization

Main color settings.

Parameter

Description

textColorPrimary

Main text color

backgroundColorPrimary

Main background color

textColorSecondary

Secondary text color

backgroundColorSecondary

Secondary background color

iconColor

Icons’ color

baseFontCustomization

Main font settings.

Parameter

Description

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

titleFontCustomization

Title font settings.

Parameter

Description

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

buttonCustomization

Buttons’ settings.

Parameter

Description

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

textColorPrimary

Main text color

backgroundColorPrimary

Main background color

textColorSecondary

Secondary text color

backgroundColorSecondary

Secondary background color

cornerRadius

Button corner radius

toolbarCustomization

Toolbar settings.

Parameter

Description

closeButtonIcon

Close button icon

iconColor

Close button icon color

centerHintCustomization

Center hint settings.

Parameter

Description

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

textColor

Text color

backgroundColor

Background color

backgroundOpacity

Background opacity

backgroundCornerRadius

Frame corner radius

verticalPosition

Vertical position

hintAnimation

Hint animation settings.

Parameter

Description

hideAnimation

Disable animation

hintGradientColor

Gradient color

hintGradientOpacity

Gradient opacity

animationIconSize

Animation icon size

faceFrameCustomization

Face frame settings.

Parameter

Description

geometryType

Frame shape: rectangle or oval

cornersRadius

Frame corner radius (for rectangle)

strokeDefaultColor

Frame color when a face is not aligned properly

strokeFaceInFrameColor

Frame color when a face is aligned properly

strokeOpacity

Stroke opacity

strokeWidth

Stroke width

strokePadding

Padding from stroke

documentFrameCustomization

Document capture frame settings.

Parameter

Description

cornersRadius

Frame corner radius

templateColor

Document template color

templateOpacity

Document template opacity

backgroundCustomization

Background settings.

Parameter

Description

backgroundColor

Background color

backgroundOpacity

Background opacity

antiscamCustomization

Scam protection settings: the antiscam message warns user about their actions being recorded.

Parameter

Description

textMessage

Antiscam message text

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

textColor

Text color

textOpacity

Text opacity

backgroundColor

Background color

backgroundOpacity

Background opacity

backgroundCornerRadius

Frame corner radius

flashColor

Flashing indicator color

versionTextCustomization

SDK version text settings.

Parameter

Description

textFont

Font

textSize

Font size

textWeight

Font weight

textStyle

Font style

textColor

Text color

textOpacity

Text opacity

maskCustomization

3D mask settings. The mask has been implemented in 1.2.1.

Parameter

Description

maskColor

The color of the mask itself

glowColor

The color of the glowing mask shape

minAlpha

Minimum mask transparency level. Implemented in 1.3.1

maxAlpha

Maximum mask transparency level. Implemented in 1.3.1

Migrating to the New Design from the Previous Versions (before 1.0.1)

Table of parameters' correspondence:

Previous design

New design

doc_color

-

face_color_success

faceFrame.faceReady

faceFrameCustomization.strokeFaceInFrameColor

face_color_fail

faceFrame.faceNotReady

faceFrameCustomization.strokeDefaultColor

centerHint.textSize

centerHintCustomization.textSize

centerHint.color

centerHintCustomization.textColor

centerHint.yPosition

centerHintCustomization.verticalPosition

centerHint.letterSpacing

-

centerHint.fontStyle

centerHintCustomization.textStyle

closeButton.image

-

backgroundOutsideFrame.color

backgroundCustomization.backgroundColor

Last updated