# 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.

```css
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%"
        },
    /* On January 1, 2027, 3D Mask will become unavailable. */
    maskCustomization: {
            maskColor: "#008700",
            glowColor: "#000102",
            minAlpha: "30%", // 0 to 1 or 0% to 100%
            maxAlpha: "100%" // 0 to 1 or 0% to 100%

        },
    switchCameraButtonCustomization: {
            enableSwitchCameraButton: true,
        },
    logo: {
            position: 'bottom-center' // or 'bottom-left'
        },
    closeButtonSlot: '<svg>...</svg>', // HTMLElement or null
    .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&#x20;

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   |

### &#x20;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     | <p>Frame color when a face is not aligned properly</p><p> </p> |
| strokeFaceInFrameColor | <p>Frame color when a face is aligned properly</p><p> </p>     |
| 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 |

### &#x20;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&#x20;

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. <mark style="background-color:red;">On January 1, 2027, 3D Mask will become unavailable.</mark>

| **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 |

### switchCameraButtonCustomization

Use this setting to hide the **Switch Camera** button (added in 1.7.14).

<table data-header-hidden><thead><tr><th width="197"></th><th width="489"></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Description</strong></td></tr><tr><td>enableSwitchCameraButton</td><td><ul><li><code>true</code> (default) – shows the <strong>Switch Camera</strong> button,</li><li><code>false</code> – hides the button.</li></ul></td></tr></tbody></table>

### loaderSlot

Settings for a custom loader (added in 1.7.15).

<table data-header-hidden><thead><tr><th width="197"></th><th width="277"></th><th></th></tr></thead><tbody><tr><td><strong>Event</strong></td><td><strong>Payload</strong></td><td><strong>Is called</strong></td></tr><tr><td><code>loader:init</code></td><td><code>{os, browser, platform}</code></td><td>immediately after inserting the slot</td></tr><tr><td><code>loader:waitingCamera</code></td><td><code>{os, browser, platform, waitedMs}</code></td><td>every <code>waitedMs</code> ms, while waiting for camera access</td></tr><tr><td><code>loader:cameraReady</code></td><td> </td><td>when access is granted and loader should be hidden</td></tr><tr><td><code>loader:processing</code></td><td><code>{phase: 'start' | 'end'}</code></td><td>before / after data preparation</td></tr><tr><td><code>loader:uploading</code></td><td><code>{phase: 'start' | 'progress' | 'end', percent?}</code></td><td>before / during / after data transmission</td></tr><tr><td><code>loader:destroy</code></td><td> </td><td>when you need to hide the slot</td></tr></tbody></table>

### loaderTransition

Loader transition settings (added in 1.8.0).

<table data-header-hidden><thead><tr><th width="197"></th><th width="489"></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Description</strong></td></tr><tr><td>type</td><td>Animation type: <code>none</code>, <code>fade</code>, <code>slide</code>, <code>scale</code></td></tr><tr><td>duration</td><td>Animation length in ms</td></tr><tr><td>easing (optional)</td><td>easing: <code>linear</code>, <code>ease-in-out</code>, etc</td></tr></tbody></table>

### ozliveness\_face\_stroke

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

### logo

Manages the logo position (added in 1.9.7).

| **Parameter** | **Description**                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
| position      | <p>Logo position: <br><code>bottom-left</code> (default) – on the left,</p><p><code>bottom-center</code> – in center</p> |

### closeButtonSlot

Replaces the default close button with a custom HTML string or HTMLElement (added in 1.9.7).

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

Table of parameters' correspondence:

| **Previous design**                                   | **New design**                                |
| ----------------------------------------------------- | --------------------------------------------- |
| doc\_color                                            | -                                             |
| <p>face\_color\_success</p><p>faceFrame.faceReady</p> | faceFrameCustomization.strokeFaceInFrameColor |
| <p>face\_color\_fail</p><p>faceFrame.faceNotReady</p> | 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       |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/sdk/oz-liveness-websdk/web-plugin/look-and-feel-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.