LogoLogo
To the Oz WebsiteOz API ReferenceContact Us
  • General
    • Oz Liveness and Biometry Key Concepts
      • Solution Architecture
      • Liveness, Face Matching, Black List Checks
      • Passive and Active Liveness
      • Hybrid Liveness
      • Oz API Key Concepts
      • Oz API vs. Oz API Lite
      • SaaS, On-premise, On-device: What to Choose
      • Oz Licensing Options
    • Integration Quick Start Guides
      • Server-Based Liveness
        • How to Integrate Server-Based Liveness into Your Web Application
        • How to Integrate Server-Based Liveness into Your Mobile Application
        • How to Check Your Media for Liveness without Oz Front End
      • On-Device Liveness
        • How to Integrate On-Device Liveness into Your Mobile Application
      • Face Matching
        • How to Add Face Matching of Liveness Video with a Reference Photo From Your Database
        • How to Add Photo ID Capture and Face Matching to Your Web or Mobile Application
  • Guides
    • Developer Guide
      • API
        • Oz API
          • Working with Oz System: Basic Scenarios
            • Authentication
            • Uploading Media
            • Liveness
            • Biometry (Face Matching)
            • Best Shot
            • Blacklist Check
              • Blacklist (Collection) Management in Oz API
            • Quantitative Results
            • Using a Webhook to Get Results
            • Single Request
            • Instant API: Non-Persistent Mode
          • System Objects
          • User Roles
          • Types of Analyses and What They Check
          • Rules of Assigning Analyses
          • Statuses in API
          • Media Tags
          • Metadata
          • API Error Codes
          • Oz API Postman Collections
          • Changelog
        • Oz API Lite
          • API Lite Methods
          • Oz API Lite Postman Collection
          • Changelog
      • SDK
        • Oz Mobile SDK (iOS, Android, Flutter)
          • On-Device Mode
          • Android
            • Getting a License for Android SDK
              • Master License for Android
            • Adding SDK to a Project
            • Connecting SDK to API
            • Capturing Videos
            • Checking Liveness and Face Biometry
            • Customizing Android SDK
              • How to Restore the Previous Design after an Update
            • Android Localization: Adding a Custom or Updating an Existing Language Pack
            • Android SDK Methods and Properties
            • Changelog
          • iOS
            • Getting a License for iOS SDK
              • Master License for iOS
            • Adding SDK to a Client’s Mobile App
            • Connecting SDK to API
            • Capturing Videos
            • Checking Liveness and Face Biometry
            • Customizing iOS SDK Interface
              • How to Restore the Previous Design after an Update
            • iOS Localization: Adding a Custom or Updating an Existing Language Pack
            • iOS SDK Methods and Properties
            • Changelog
          • Flutter
            • How to Install and Use Oz Flutter Plugin
            • Flutter SDK Methods and Properties
            • Changelog
        • Oz Liveness Web SDK
          • Web Plugin
            • Adding the Plugin to Your Web Page
            • Launching the Plugin
              • Description of the on_complete Callback
              • Description of the on_result Callback
              • Capturing Video and Description of the on_capture_complete Callback
              • Description of the on_error Callback
            • Closing or Hiding the Plugin
            • Localization: Adding a Custom Language Pack
            • Look-and-Feel Customization
              • Customization Options for Older Versions (before 1.0.1)
            • Security Recommendations
            • Browser Compatibility
            • No-Server Licensing
          • Changelog
    • Administrator Guide
      • Deployment Architecture
      • Installation in Docker
      • Installation in Kubernetes
      • Performance and Scalability Guide
      • Publishing API Methods in the Internet: Security Recommendations
      • Monitoring
      • License Server
      • Web Adapter Configuration
        • Installation and Licensing
        • Configuration File Settings
        • Configuration Using Environment Variables
        • Server Configuration via Environment Variables
      • Oz API Configuration
    • User Guide
      • Oz Web UI
        • Requesting Analyses
        • Users and Companies
        • Blacklist
        • Statistics
        • Settings
        • Changelog
  • Other
    • Media Quality Requirements
    • Oz SDK Media Quality Checks
    • Media File Size Overview
    • Compatibility
    • FAQ
    • Tips and Tricks
      • Oz Liveness Gestures: Table of Correspondence
      • Sudo without Password
      • Android: Certificate Validation Error
    • Previous Documentation
      • Mobile SDK
        • Android
          • Interactions with the Oz API Server
          • Uploading and Analyzing Media
        • iOS
          • Uploading and Analyzing Media
      • User Guides
        • Oz Demo Kit
        • Web UI
      • Oz Modules Installation
        • Standalone Installer
        • Oz System Lite
Powered by GitBook
On this page
  • baseColorCustomization
  • baseFontCustomization
  • titleFontCustomization
  • buttonCustomization
  • toolbarCustomization
  • centerHintCustomization
  • hintAnimation
  • faceFrameCustomization
  • documentFrameCustomization
  • backgroundCustomization
  • antiscamCustomization
  • versionTextCustomization
  • maskCustomization
  • Migrating to the New Design from the Previous Versions (before 1.0.1)

Was this helpful?

Export as PDF
  1. Guides
  2. Developer Guide
  3. SDK
  4. Oz Liveness Web SDK
  5. Web Plugin

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

PreviousLocalization: Adding a Custom Language PackNextCustomization Options for Older Versions (before 1.0.1)

Last updated 1 year ago

Was this helpful?