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%

        },
    .ozliveness_wrap_overlay .ozliveness_face_stroke {
            overflow: hidden;
            box-shadow: 0 0 10px rgb(90 201 207);
            border: none; /* Important to remove default border */
        }, 
/* for an HTML string, use string; for HTMLElement, insert it via cloneNode(true) */
    loaderSlot: yourLoader, /* <string | HTMLElement> */
    loaderTransition: {type: 'fade', duration: 500}

    }
});

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

loaderSlot

Settings for a custom loader (added in 1.7.15).

Event	Payload	Is called
loader:init	{os, browser, platform}	immediately after inserting the slot
loader:waitingCamera	{os, browser, platform, waitedMs}	every waitedMs ms, while waiting for camera access
loader:cameraReady		when access is granted and loader should be hidden
loader:processing	{phase: 'start' | 'end'}	before / after data preparation
loader:uploading	{phase: 'start' | 'progress' | 'end', percent?}	before / during / after data transmission
loader:destroy		when you need to hide the slot

loaderTransition

Loader transition settings (added in 1.8.0).

Parameter	Description
type	Animation type: none, fade, slide, scale
duration	Animation length in ms
easing (optional)	easing: linear, ease-in-out, etc

ozliveness_face_stroke

Use this class to customize the oval (added in 1.9.2). All standard CSS properties are supported.

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