1 of 2

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.

baseFontCustomization

Main font settings.

titleFontCustomization

Title font settings.

buttonCustomization

Buttons’ settings.

toolbarCustomization

Toolbar settings.

centerHintCustomization

Center hint settings.

hintAnimation

Hint animation settings.

faceFrameCustomization

Face frame settings.

documentFrameCustomization

Document capture frame settings.

backgroundCustomization

Background settings.

antiscamCustomization

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

versionTextCustomization

SDK version text settings.

maskCustomization

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

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

Table of parameters' correspondence:

Customization Options for Older Versions (before 1.0.1)

To set your own look-and-feel options, use the style section in the Ozliveness.open method. Here is what you can change:

faceFrame – the color of the frame around a face:
- faceReady – the frame color when the face is correctly placed within the frame;
- faceNotReady – the frame color when the face is placed improperly and can't be analyzed.
centerHint – the text of the hint that is displayed in the center.
- textSize – the size of the text;
- color – the color of the text;
- yPosition – the vertical position measured from top;
- letterSpacing – the spacing between letters;
- fontStyle – the style of font (bold, italic, etc.).
closeButton – the button that closes the plugin:
- image – the button image, can be an image in PNG or dataURL in base64.
backgroundOutsideFrame – the color of the overlay filling (outside the frame):
- color – the fill color.

Example: