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%"
}
}
});
Main color settings.
Parameter | Description |
textColorPrimary | Main text color |
backgroundColorPrimary | Main background color |
textColorSecondary | Secondary text color |
backgroundColorSecondary | Secondary background color |
iconColor | Icons’ color |
Main font settings.
Parameter | Description |
textFont | Font |
textSize | Font size |
textWeight | Font weight |
textStyle | Font style |
Title font settings.
Parameter | Description |
textFont | Font |
textSize | Font size |
textWeight | Font weight |
textStyle | Font style |
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 |
Toolbar settings.
Parameter | Description |
closeButtonIcon | Close button icon |
iconColor | Close button icon color |
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 |
Hint animation settings.
Parameter | Description |
hideAnimation | Disable animation |
hintGradientColor | Gradient color |
hintGradientOpacity | Gradient opacity |
animationIconSize | Animation icon size |
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 |
Document capture frame settings.
Parameter | Description |
cornersRadius | Frame corner radius |
templateColor | Document template color |
templateOpacity | Document template opacity |
Background settings.
Parameter | Description |
backgroundColor | Background color |
backgroundOpacity | Background opacity |
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 |
SDK version text settings.
Parameter | Description |
textFont | Font |
textSize | Font size |
textWeight | Font weight |
textStyle | Font style |
textColor | Text color |
textOpacity | Text opacity |
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 |