> For the complete documentation index, see [llms.txt](https://doc.ozforensics.com/oz-knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.ozforensics.com/oz-knowledge/oz-knowledge/pt-br/guias/developer-guide/sdk/oz-liveness-websdk/web-plugin/look-and-feel-customization.md).

# Personalização da aparência

Para definir suas próprias opções de aparência, use a `style` seção em `Ozliveness.open` método. As opções estão listadas abaixo do exemplo.

```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: true,
        textMessage: "",
        textFont: "inherit",
        textSize: "14px",
        textWeight: "500",
        textStyle: "normal",
        textColor: "#000000",
        textOpacity: "100%",
        backgroundColor: "#F2F2F7",
        backgroundOpacity: "100%",
        backgroundCornerRadius: "20px",
        flashColor: "#FF453A",
        verticalPosition: "84%"
        },
    versionTextCustomization: {
        textFont: "inherit",
        textSize: "16px",
        textWeight: "500",
        textStyle: "normal",
        textColor: "#000000",
        textOpacity: "56%"
        },
    /* Em 1º de janeiro de 2027, a 3D Mask ficará indisponível. */
    maskCustomization: {
        maskColor: "#008700",
        glowColor: "#000102",
        minAlpha: "30%", /* 0 a 1 ou 0% a 100% */
         maxAlpha: "100%" /* 0 a 1 ou 0% a 100% */

        },
    switchCameraButtonCustomization: {
        enableSwitchCameraButton: true,
        },
    logo: {
        url: 'https://your-website-link/logo.svg', /* logo personalizado, somente se permitido pela licença */
        position: 'bottom-center', /* ou 'bottom-left' */
        width: 120,
        height: 40 
        },
    closeButtonSlot: '<svg>...</svg>', /* HTMLElement ou null */
    .ozliveness_wrap_overlay .ozliveness_face_stroke {
        overflow: hidden;
        box-shadow: 0 0 10px rgb(90 201 207);
        border: none; /* Importante remover a borda padrão */
        }, 
/* para uma string HTML, use string; para HTMLElement, insira-o via cloneNode(true) */
    loaderSlot: yourLoader, /* <string | HTMLElement> */
    loaderTransition: {type: 'fade', duration: 500}

    }
});
```

### baseColorCustomization

Configurações principais de cor.

| **Parâmetro**            | **Descrição**           |
| ------------------------ | ----------------------- |
| textColorPrimary         | Cor principal do texto  |
| backgroundColorPrimary   | Cor principal de fundo  |
| textColorSecondary       | Cor secundária do texto |
| backgroundColorSecondary | Cor secundária de fundo |
| iconColor                | Cor dos ícones          |

### baseFontCustomization

Configurações principais de fonte.

| **Parâmetro** | **Descrição**    |
| ------------- | ---------------- |
| textFont      | Fonte            |
| textSize      | Tamanho da fonte |
| textWeight    | Peso da fonte    |
| textStyle     | Estilo da fonte  |

### titleFontCustomization

Configurações da fonte do título.

| **Parâmetro** | **Descrição**    |
| ------------- | ---------------- |
| textFont      | Fonte            |
| textSize      | Tamanho da fonte |
| textWeight    | Peso da fonte    |
| textStyle     | Estilo da fonte  |

### buttonCustomization

Configurações dos botões.

| **Parâmetro**            | **Descrição**            |
| ------------------------ | ------------------------ |
| textFont                 | Fonte                    |
| textSize                 | Tamanho da fonte         |
| textWeight               | Peso da fonte            |
| textStyle                | Estilo da fonte          |
| textColorPrimary         | Cor principal do texto   |
| backgroundColorPrimary   | Cor principal de fundo   |
| textColorSecondary       | Cor secundária do texto  |
| backgroundColorSecondary | Cor secundária de fundo  |
| cornerRadius             | Raio dos cantos do botão |

### toolbarCustomization

Configurações da barra de ferramentas.

| **Parâmetro**   | **Descrição**                   |
| --------------- | ------------------------------- |
| closeButtonIcon | Ícone do botão de fechar        |
| iconColor       | Cor do ícone do botão de fechar |

### centerHintCustomization

Configurações da dica central.

| **Parâmetro**          | **Descrição**             |
| ---------------------- | ------------------------- |
| textFont               | Fonte                     |
| textSize               | Tamanho da fonte          |
| textWeight             | Peso da fonte             |
| textStyle              | Estilo da fonte           |
| textColor              | Cor do texto              |
| backgroundColor        | Cor de fundo              |
| backgroundOpacity      | Opacidade do fundo        |
| backgroundCornerRadius | Raio dos cantos do quadro |
| verticalPosition       | Posição vertical          |

### hintAnimation

Configurações da animação da dica.

| **Parâmetro**       | **Descrição**                |
| ------------------- | ---------------------------- |
| hideAnimation       | Desativar animação           |
| hintGradientColor   | Cor do gradiente             |
| hintGradientOpacity | Opacidade do gradiente       |
| animationIconSize   | Tamanho do ícone da animação |

### faceFrameCustomization

Configurações do quadro do rosto.

| **Parâmetro**          | **Descrição**                                                |
| ---------------------- | ------------------------------------------------------------ |
| geometryType           | Forma do quadro: retângulo ou oval                           |
| cornersRadius          | Raio dos cantos do quadro (para retângulo)                   |
| strokeDefaultColor     | Cor do quadro quando um rosto não está alinhado corretamente |
| strokeFaceInFrameColor | Cor do quadro quando um rosto está alinhado corretamente     |
| strokeOpacity          | Opacidade do traço                                           |
| strokeWidth            | Largura do traço                                             |
| strokePadding          | Espaçamento do traço                                         |

### documentFrameCustomization

Configurações do quadro de captura de documento.

| **Parâmetro**   | **Descrição**                    |
| --------------- | -------------------------------- |
| cornersRadius   | Raio dos cantos do quadro        |
| templateColor   | Cor do modelo de documento       |
| templateOpacity | Opacidade do modelo de documento |

### backgroundCustomization

Configurações de fundo.

| **Parâmetro**     | **Descrição**      |
| ----------------- | ------------------ |
| backgroundColor   | Cor de fundo       |
| backgroundOpacity | Opacidade do fundo |

### antiscamCustomization

Configurações de proteção contra fraude: a mensagem antiscam avisa o usuário de que suas ações estão sendo registradas.

| **Parâmetro**          | **Descrição**                                                                                         |
| ---------------------- | ----------------------------------------------------------------------------------------------------- |
| enableAntiscam         | `true` exibe a mensagem antiscam com suas configurações                                               |
| textMessage            | Texto da mensagem antiscam                                                                            |
| textFont               | Fonte                                                                                                 |
| textSize               | Tamanho da fonte                                                                                      |
| textWeight             | Peso da fonte                                                                                         |
| textStyle              | Estilo da fonte                                                                                       |
| textColor              | Cor do texto                                                                                          |
| textOpacity            | Opacidade do texto                                                                                    |
| backgroundColor        | Cor de fundo                                                                                          |
| backgroundOpacity      | Opacidade do fundo                                                                                    |
| backgroundCornerRadius | Raio dos cantos do quadro                                                                             |
| flashColor             | Cor do indicador de pisca                                                                             |
| verticalPosition       | Posição vertical da mensagem antiscam; se não for definida, a mensagem fica vinculada ao topo do oval |

### versionTextCustomization

Configurações do texto da versão do SDK.

| **Parâmetro** | **Descrição**      |
| ------------- | ------------------ |
| textFont      | Fonte              |
| textSize      | Tamanho da fonte   |
| textWeight    | Peso da fonte      |
| textStyle     | Estilo da fonte    |
| textColor     | Cor do texto       |
| textOpacity   | Opacidade do texto |

### maskCustomization

Configurações da máscara 3D. A máscara foi implementada na versão 1.2.1. <mark style="background-color:red;">Em 1º de janeiro de 2027, a 3D Mask ficará indisponível. Planeje sua</mark> [<mark style="background-color:red;">migração</mark>](/oz-knowledge/oz-knowledge/pt-br/guias/developer-guide/guias-de-migracao/migracao-da-mascara-3d-no-web-sdk.md).

| **Parâmetro** | **Descrição**                                                          |
| ------------- | ---------------------------------------------------------------------- |
| maskColor     | A cor da própria máscara                                               |
| glowColor     | A cor da forma luminosa da máscara                                     |
| minAlpha      | Nível mínimo de transparência da máscara. Implementado na versão 1.3.1 |
| maxAlpha      | Nível máximo de transparência da máscara. Implementado na versão 1.3.1 |

### switchCameraButtonCustomization

Use esta configuração para ocultar o **Alternar câmera** botão (adicionado na versão 1.7.14).

<table data-header-hidden><thead><tr><th width="197"></th><th width="489"></th></tr></thead><tbody><tr><td><strong>Parâmetro</strong></td><td><strong>Descrição</strong></td></tr><tr><td>enableSwitchCameraButton</td><td><ul><li><code>true</code> (padrão) – exibe o <strong>Alternar câmera</strong> botão,</li><li><code>false</code> – oculta o botão.</li></ul></td></tr></tbody></table>

### loaderSlot

Configurações para um carregador personalizado (adicionado na versão 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>Evento</strong></td><td><strong>Carga útil</strong></td><td><strong>É chamado</strong></td></tr><tr><td><code>loader:init</code></td><td><code>{os, browser, platform}</code></td><td>imediatamente após inserir o slot</td></tr><tr><td><code>loader:waitingCamera</code></td><td><code>{os, browser, platform, waitedMs}</code></td><td>a cada <code>waitedMs</code> ms, enquanto aguarda acesso à câmera</td></tr><tr><td><code>loader:cameraReady</code></td><td></td><td>quando o acesso for concedido e o carregador deve ser ocultado</td></tr><tr><td><code>loader:processing</code></td><td><code>{phase: 'start' | 'end'}</code></td><td>antes / depois da preparação dos dados</td></tr><tr><td><code>loader:uploading</code></td><td><code>{phase: 'start' | 'progress' | 'end', percent?}</code></td><td>antes / durante / depois da transmissão dos dados</td></tr><tr><td><code>loader:destroy</code></td><td></td><td>quando for necessário ocultar o slot</td></tr></tbody></table>

### loaderTransition

Configurações da transição do carregador (adicionado na versão 1.8.0).

<table data-header-hidden><thead><tr><th width="197"></th><th width="489"></th></tr></thead><tbody><tr><td><strong>Parâmetro</strong></td><td><strong>Descrição</strong></td></tr><tr><td>type</td><td>Tipo de animação: <code>none</code>, <code>fade</code>, <code>slide</code>, <code>scale</code></td></tr><tr><td>duration</td><td>Duração da animação em 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 esta classe para personalizar o oval (adicionado na versão 1.9.2). Todas as propriedades CSS padrão são suportadas.

### logo

Gerencia a posição do logo (adicionado na versão 1.9.7).

| **Parâmetro** | **Descrição**                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| url           | URL para logo personalizado, somente se [permitido pela licença](/oz-knowledge/oz-knowledge/pt-br/geral/conceitos-chave-do-oz-liveness-e-biometry/oz-licensing-options.md) (cobrado à parte). Formatos: SVG (recomendado), PNG, JPG |
| position      | <p>Posição do logo:<br><code>bottom-left</code> (padrão) – à esquerda,</p><p><code>bottom-center</code> – no centro</p>                                                                                                             |
| width         | Largura do logo                                                                                                                                                                                                                     |
| height        | Altura do logo                                                                                                                                                                                                                      |

### closeButtonSlot

Substitui o botão de fechar padrão por uma string HTML personalizada ou HTMLElement (adicionado na versão 1.9.7).

### Migração para o novo design a partir das versões anteriores (antes da 1.0.1)

Tabela de correspondência dos parâmetros:

| **Design anterior**                                   | **Novo 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.

Parâmetro	Descrição
enableSwitchCameraButton	`true` (padrão) – exibe o Alternar câmera botão, `false` – oculta o botão.

Evento	Carga útil	É chamado
`loader:init`	`{os, browser, platform}`	imediatamente após inserir o slot
`loader:waitingCamera`	`{os, browser, platform, waitedMs}`	a cada `waitedMs` ms, enquanto aguarda acesso à câmera
`loader:cameraReady`		quando o acesso for concedido e o carregador deve ser ocultado
`loader:processing`	`{phase: 'start' \| 'end'}`	antes / depois da preparação dos dados
`loader:uploading`	`{phase: 'start' \| 'progress' \| 'end', percent?}`	antes / durante / depois da transmissão dos dados
`loader:destroy`		quando for necessário ocultar o slot

Parâmetro	Descrição
type	Tipo de animação: `none`, `fade`, `slide`, `scale`
duration	Duração da animação em ms
easing (optional)	easing: `linear`, `ease-in-out`, etc