EN: Oz Knowledge Base
Oz Forensics HomeOz API ReferenceContact Us
Search
⌃K
Links

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%"
}
}
});

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

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
Previous
Adding a Custom Language Pack
Next
Customization Options for Older Versions (before 1.0.1)
Last modified 2mo ago