Personalização da aparência

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.

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: '<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 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âmetro	Descriçã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).

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 é 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:destroy		quando for necessário ocultar o slot

loaderTransition

Configurações de transição do carregador (adicionado em 1.8.0).

Parâmetro	Descrição
tipo	Tipo de animação: nenhuma, fade, slide, scale
duração	Duraçã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 (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