# Настройка интерфейса

Для настройки интерфейса воспользуйтесь разделом `style` в методе `Ozliveness.open`. Полный список настроек приведен после примера.

Пример использования:

```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%"
    },
    maskCustomization: {
            maskColor: "#008700",
            glowColor: "#000102",
            minAlpha: "30%", // от 0 до 1 или 0-100%
            maxAlpha: "100%" // от 0 до 1 или 0-100%
    },
    switchCameraButtonCustomization: {
            enableSwitchCameraButton: true,
    },
    logo: {
            position: 'bottom-center' // или 'bottom-left'
        },
    closeButtonSlot: '<svg>...</svg>', // HTMLElement или null
   .ozliveness_wrap_overlay .ozliveness_face_stroke {
            overflow: hidden;
            box-shadow: 0 0 10px rgb(90 201 207);
            border: none; /* важно: удалите используемую по умолчанию рамку */
        }, 
/* для HTML-строки используйте тип string; HTMLElement нужно вставить через cloneNode(true) */
    loaderSlot: yourLoader, /* <string | HTMLElement> */
    loaderTransition: {type: 'fade', duration: 500}
    
    }
});
```

### baseColorCustomization

Основные цветовые настройки.

| **Параметр**             | **Описание**               |
| ------------------------ | -------------------------- |
| textColorPrimary         | Основной цвет текста       |
| backgroundColorPrimary   | Основной цвет фона         |
| textColorSecondary       | Дополнительный цвет текста |
| backgroundColorSecondary | Дополнительный цвет фона   |
| iconColor                | Цвет значков               |

### baseFontCustomization

Основные настройки шрифта.

| **Параметр** | **Описание**        |
| ------------ | ------------------- |
| textFont     | Шрифт               |
| textSize     | Размер шрифта       |
| textWeight   | Насыщенность шрифта |
| textStyle    | Стиль текста        |

### titleFontCustomization

Настройки шрифта заголовка.

| **Параметр** | **Описание**        |
| ------------ | ------------------- |
| textFont     | Шрифт               |
| textSize     | Размер шрифта       |
| textWeight   | Насыщенность шрифта |
| textStyle    | Стиль текста        |

### buttonCustomization

Настройки кнопок.

| **Параметр**             | **Описание**               |
| ------------------------ | -------------------------- |
| textFont                 | Шрифт                      |
| textSize                 | Размер шрифта              |
| textWeight               | Насыщенность шрифта        |
| textStyle                | Стиль текста               |
| textColorPrimary         | Основной цвет текста       |
| backgroundColorPrimary   | Основной цвет фона         |
| textColorSecondary       | Дополнительный цвет текста |
| backgroundColorSecondary | Дополнительный цвет фона   |
| cornerRadius             | Угловой радиус кнопки      |

### toolbarCustomization

Настройки панели инструментов.

| **Параметр**    | **Описание**           |
| --------------- | ---------------------- |
| closeButtonIcon | Значок кнопки закрытия |
| iconColor       | Цвет значка            |

### centerHintCustomization

Настройки подсказки в центре.

| **Параметр**           | **Описание**            |
| ---------------------- | ----------------------- |
| textFont               | Шрифт                   |
| textSize               | Размер шрифта           |
| textWeight             | Насыщенность шрифта     |
| textStyle              | Стиль текста            |
| textColor              | Цвет текста             |
| backgroundColor        | Цвет фона               |
| backgroundOpacity      | Непрозрачность фона     |
| backgroundCornerRadius | Угловой радиус подложки |
| verticalPosition       | Положение по вертикали  |

### hintAnimation

Анимация подсказки.

| **Параметр**        | **Описание**             |
| ------------------- | ------------------------ |
| hideAnimation       | Скрыть анимацию          |
| hintGradientColor   | Цвет градиента           |
| hintGradientOpacity | Непрозрачность градиента |
| animationIconSize   | Размер значка анимации   |

### faceFrameCustomization

Настройки рамки вокруг лица.

| **Параметр**           | **Описание**                         |
| ---------------------- | ------------------------------------ |
| geometryType           | Форма рамки – прямоугольник или овал |
| cornersRadius          | Угловой радиус прямоугольника        |
| strokeDefaultColor     | Цвет рамки (лицо не в кадре)         |
| strokeFaceInFrameColor | Цвет рамки (лицо в кадре)            |
| strokeOpacity          | Непрозрачность обводки               |
| strokeWidth            | Толщина линии обводки                |
| strokePadding          | Отступ в рамке                       |

### documentFrameCustomization

Настройки рамки для съемки документа.

| **Параметр**    | **Описание**           |
| --------------- | ---------------------- |
| cornersRadius   | Угловой радиус         |
| templateColor   | Цвет шаблона           |
| templateOpacity | Непрозрачность шаблона |

### backgroundCustomization

Настройки фона.

| **Параметр**      | **Описание**        |
| ----------------- | ------------------- |
| backgroundColor   | Цвет фона           |
| backgroundOpacity | Непрозрачность фона |

### antiscamCustomization

Настройки защиты от мошенников: при включении во время записи видео появляется дополнительное сообщение.

| **Параметр**           | **Описание**              |
| ---------------------- | ------------------------- |
| textMessage            | Текст сообщения           |
| textFont               | Шрифт                     |
| textSize               | Размер шрифта             |
| textWeight             | Насыщенность шрифта       |
| textStyle              | Стиль текста              |
| textColor              | Цвет текста               |
| textOpacity            | Непрозрачность текста     |
| backgroundColor        | Цвет фона                 |
| backgroundOpacity      | Непрозрачность фона       |
| backgroundCornerRadius | Угловой радиус подложки   |
| flashColor             | Цвет мигающего индикатора |

### versionTextCustomization

Настройки текста версии SDK.

| **Параметр** | **Описание**          |
| ------------ | --------------------- |
| textFont     | Шрифт                 |
| textSize     | Размер шрифта         |
| textWeight   | Насыщенность шрифта   |
| textStyle    | Стиль текста          |
| textColor    | Цвет текста           |
| textOpacity  | Непрозрачность текста |

### maskCustomization

Настройки 3D-маски, добавленной в версии 1.2.1.

| **Параметр** | **Описание**                                                |
| ------------ | ----------------------------------------------------------- |
| maskColor    | Цвет самой маски                                            |
| glowColor    | Цвет обводки маски                                          |
| minAlpha     | Минимальный уровень прозрачности маски (добавлено в 1.3.1)  |
| maxAlpha     | Максимальный уровень прозрачности маски (добавлено в 1.3.1) |

### switchCameraButtonCustomization <a href="#switchcamerabuttoncustomization" id="switchcamerabuttoncustomization"></a>

Настройка управляет видимостью кнопки переключения камеры (добавлено в 1.7.14).

| **Parameter**            | **Description**                                                                                                |
| ------------------------ | -------------------------------------------------------------------------------------------------------------- |
| enableSwitchCameraButton | <ul><li><code>true</code> (по умолчанию) – кнопка видна,</li><li><code>false</code> – кнопка скрыта.</li></ul> |

### loaderSlot

Настройки loader (добавлено в 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>Событие</strong></td><td><strong>Payload</strong></td><td><strong>Вызов</strong></td></tr><tr><td><code>loader:init</code></td><td><code>{os, browser, platform}</code></td><td>сразу после вставки слота</td></tr><tr><td><code>loader:waitingCamera</code></td><td><code>{os, browser, platform, waitedMs}</code></td><td>каждые <code>waitedMs</code> мс, пока нет доступа к камере</td></tr><tr><td><code>loader:cameraReady</code></td><td> </td><td>когда доступ к камере получен и loader нужно скрыть</td></tr><tr><td><code>loader:processing</code></td><td><code>{phase: 'start' | 'end'}</code></td><td>до / после подготовки данных</td></tr><tr><td><code>loader:uploading</code></td><td><code>{phase: 'start' | 'progress' | 'end', percent?}</code></td><td>до / во время / после отправки данных</td></tr><tr><td><code>loader:destroy</code></td><td> </td><td>при скрытии слота</td></tr></tbody></table>

### loaderTransition

Настройки переходов loader (добавлено в 1.8.0).

<table data-header-hidden><thead><tr><th width="197"></th><th width="489"></th></tr></thead><tbody><tr><td>Параметр</td><td><strong>Описание</strong></td></tr><tr><td>type</td><td>Тип анимации: <code>none</code>, <code>fade</code>, <code>slide</code>, <code>scale</code></td></tr><tr><td>duration</td><td>Длительность анимации в мс</td></tr><tr><td>easing (опционально)</td><td>Сглаживание: <code>linear</code>, <code>ease-in-out</code> и так далее</td></tr></tbody></table>

### .ozliveness\_face\_stroke

Используйте этот класс для настройки внешнего вида овала (с версии 1.9.2). Поддерживаются все стандартные инструменты CSS.

### logo

Управляет расположением логотипа (с версии 1.9.7).

| **Parameter** | **Description**                                                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| position      | <p>расположение логотипа: <br><code>bottom-left</code> (по умолчанию) – слева,</p><p><code>bottom-center</code> – по центру</p> |

### closeButtonSlot

Заменяет кнопку закрытия на кастомные HTML-строку или HTMLElement (с версии 1.9.7).

### Переход на новый дизайн с предыдущих версий (до 1.0.1)

Таблица соответствия параметров:

| **Предыдущий дизайн**                                 | **Новый дизайн**                              |
| ----------------------------------------------------- | --------------------------------------------- |
| 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-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin/nastroika-interfeisa.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.

Событие	Payload	Вызов
`loader:init`	`{os, browser, platform}`	сразу после вставки слота
`loader:waitingCamera`	`{os, browser, platform, waitedMs}`	каждые `waitedMs` мс, пока нет доступа к камере
`loader:cameraReady`		когда доступ к камере получен и loader нужно скрыть
`loader:processing`	`{phase: 'start' \| 'end'}`	до / после подготовки данных
`loader:uploading`	`{phase: 'start' \| 'progress' \| 'end', percent?}`	до / во время / после отправки данных
`loader:destroy`		при скрытии слота

Параметр	Описание
type	Тип анимации: `none`, `fade`, `slide`, `scale`
duration	Длительность анимации в мс
easing (опционально)	Сглаживание: `linear`, `ease-in-out` и так далее