> 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 e usabilidade Para definir suas próprias opções de aparência, use o `style` seção na `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, 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: '...', /* 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, /* */ loaderTransition: {type: 'fade', duration: 500} } }); ``` ### baseColorCustomization Configurações de cor principal. | **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 da fonte principal. | **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 plano de fundo | | backgroundCornerRadius | Raio dos cantos da moldura | | 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 da moldura do rosto. | **Parâmetro** | **Descrição** | | ---------------------- | ------------------------------------------------------------ | | geometryType | Formato da moldura: retângulo ou oval | | cornersRadius | Raio dos cantos da moldura (para retângulo) | | strokeDefaultColor | Cor da moldura quando o rosto não está alinhado corretamente | | strokeFaceInFrameColor | Cor da moldura quando o rosto está alinhado corretamente | | strokeOpacity | Opacidade do traço | | strokeWidth | Largura do traço | | strokePadding | Espaçamento a partir do traço | ### documentFrameCustomization Configurações da moldura de captura do documento. | **Parâmetro** | **Descrição** | | --------------- | ---------------------------------- | | cornersRadius | Raio dos cantos da moldura | | templateColor | Cor do template do documento | | templateOpacity | Opacidade do template do documento | ### backgroundCustomization Configurações de fundo. | **Parâmetro** | **Descrição** | | ----------------- | --------------------------- | | backgroundColor | Cor de fundo | | backgroundOpacity | Opacidade do plano de 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 plano de fundo | | backgroundCornerRadius | Raio dos cantos da moldura | | flashColor | Cor do indicador piscante | | 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. Em 1º de janeiro de 2027, 3D Mask ficará indisponível. | **Parâmetro** | **Descrição** | | ------------- | ---------------------------------------------------------------------- | | maskColor | A cor da própria máscara | | glowColor | A cor da forma brilhante 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 em 1.7.14).
ParâmetroDescrição
enableSwitchCameraButton
  • true (padrão) – exibe o Alternar câmera botão,
  • false – oculta o botão.
### loaderSlot Configurações para um carregador personalizado (adicionado em 1.7.15).
EventoCarga ú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:cameraReadyquando o acesso é 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 de dados
loader:destroyquando for necessário ocultar o slot
### loaderTransition Configurações de transição do carregador (adicionado em 1.8.0).
ParâmetroDescrição
tipoTipo de animação: nenhuma, fade, slide, scale
duraçãoDuração da animação em ms
easing (opcional)easing: linear, ease-in-out, etc
### ozliveness\_face\_stroke Use esta classe para personalizar o oval (adicionado em 1.9.2). Todas as propriedades CSS padrão são suportadas. ### logo Gerencia a posição do logo (adicionado em 1.9.7). | **Parâmetro** | **Descrição** | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | url | URL para o logo personalizado, somente se if [permitido pela licença](/oz-knowledge/oz-knowledge/pt-br/geral/conceitos-chave-de-oz-liveness-e-biometria/oz-licensing-options.md) (cobrado adicionalmente). Formatos: SVG (recomendado), PNG, JPG | | posição |

Posição do logo:
bottom-left (padrão) – à esquerda,

bottom-center – no centro

| | largura | Largura do logo | | altura | Altura do logo | ### closeButtonSlot Substitui o botão de fechar padrão por uma string HTML personalizada ou HTMLElement (adicionado em 1.9.7). ### Migração para o novo design a partir das versões anteriores (antes de 1.0.1) Tabela de correspondência dos parâmetros: | **Design anterior** | **Novo 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 | --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` 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=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.