> ## Documentation Index > Fetch the complete documentation index at: https://docs.jelou.ai/llms.txt > Use this file to discover all available pages before exploring further. # Personalização do WebView > Configure a experiência personalizando cores, idioma e integrando validações legais e de segurança. Este guia explica o que você pode personalizar na experiência de **WebView** biométrica, como usar a tool **`[Webview] Biometric UI Configuration`**, quais saídas esperar ao testar e como preencher cada parâmetro de entrada. ## O que você pode personalizar Você pode alinhar a experiência à sua marca e regras de negócio com: * **Cores e modo** (claro ou escuro, com pares de variáveis por tema). * **Idioma** dos textos da interface e se o usuário pode trocar de idioma. * **Validação legal** (link para termos e condições). * **Validação de segurança** (limiar de facematch e verificação ghost do documento). Os **widgets de captura** de rosto e de documento **não** são personalizáveis; veja **Elementos não modificáveis** abaixo. ## Configuração no Brain Defina aparência e regras de UI com a tool **`[Webview] Biometric UI Configuration`**. Crie um **novo workflow** no Brain para esta tool. As alterações de personalização da UI do WebView devem ser aplicadas **apenas uma vez**; você pode manter este workflow como o único lugar onde executa a atualização de configuração. Modal Criar workflow no Jelou Producto para nomear o workflow dedicado Na **barra lateral**, busque pelo nome da tool. Se ainda não estiver conectada, abra o ícone **Tools** na barra lateral e localize **`[Webview] Biometric UI Configuration`** no catálogo. Marketplace com a tool [Webview] Biometric UI Configuration selecionada e conectada ao nó Início Conecte a tool, **arraste-a para o canvas** do workflow e preencha os campos na **barra lateral direita** com o nó selecionado. Consulte a aba **Entradas** na seção **Configuração** abaixo. Painel lateral do nó com seletor de versão da tool e instrução para configurar entradas Na aba **Saídas** do nó, conecte cada ramo da tool ao restante do fluxo e defina a **mensagem** (ou a ação seguinte) que deve ser executada em cada caso. A tool expõe três variáveis de saída: * **`success`** — corresponde a **UI atualizada**: a configuração foi aplicada corretamente à UI do WebView. * **`noData`** — corresponde a **Não foram encontradas alterações para atualizar** (por exemplo, valores iguais aos já vigentes ou validação que impede salvar). * **`error`** — corresponde a **Erro no serviço** (falha ao comunicar com o serviço que persiste a configuração). Canvas com saídas UI atualizada, sem alterações e erro no serviço ligadas a nós Texto com mensagens Use **Testar** no workflow. Deve retornar **sucesso** (saída **UI atualizada**, variável `success`) quando as alterações forem aplicadas corretamente à experiência WebView. Painel Testar projeto com execução bem-sucedida e mensagem do nó Texto na ramificação UI atualizada ## Configuração **Nome da variável:** Cores da UI **Variável:** `colors` **Descrição:** Ativa a **paleta personalizada** (`true` / `false`). Com `true`, você deve definir **`Modo`** e as cores HEX do tema escolhido. Com a paleta ativa, valide **contraste e legibilidade** entre fundo, texto e botões (principalmente se o tema do dispositivo puder mudar). **Valores disponíveis:** `true`, `false` **Nome da variável:** Modo **Variável:** `Modo` **Descrição:** Tema base **Claro** ou **Escuro**; define qual conjunto de cores se aplica. **Valores disponíveis:** `Claro`, `Oscuro` **Obrigatório quando:** `colors` = `true` No **modo claro**, use `primaryColor`, `secondaryColor`, `tertiaryColor`, `backgroundColor` e `fontColor`. No **modo escuro**, use `primaryDarkColor`, `secondaryDarkColor`, `tertiaryDarkColor`, `backgroundDarkColor` e `fontDarkColor` (os mesmos cinco papéis visuais, variante de tema). **Nome da variável:** Cor primária (modo claro) **Variável:** `primaryColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Afeta **progresso** e **estados ativos** (passos concluídos e atual, borda e estado do checkbox de termos, spinner de validação de documento). **Obrigatório quando:** `Modo` = `Claro` **Nome da variável:** Cor primária (modo escuro) **Variável:** `primaryDarkColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Mesmo papel visual que `primaryColor` no tema escuro. **Obrigatório quando:** `Modo` = `Oscuro` **Nome da variável:** Cor secundária (modo claro) **Variável:** `secondaryColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). **Botões** principais (Continuar, Tentar novamente etc.), spinners de carregamento, sucesso, links de termos, passos **pendentes** do progresso. **Obrigatório quando:** `Modo` = `Claro` **Nome da variável:** Cor secundária (modo escuro) **Variável:** `secondaryDarkColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Mesmo papel que `secondaryColor` no tema escuro. **Obrigatório quando:** `Modo` = `Oscuro` **Nome da variável:** Cor terciária (modo claro) **Variável:** `tertiaryColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Processos **em andamento**: spinners durante validações e indicadores de passo em execução. **Obrigatório quando:** `Modo` = `Claro` **Nome da variável:** Cor terciária (modo escuro) **Variável:** `tertiaryDarkColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Mesmo papel que `tertiaryColor` no tema escuro. **Obrigatório quando:** `Modo` = `Oscuro` **Nome da variável:** Cor de fundo da tela (modo claro) **Variável:** `backgroundColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Fundo geral das telas do fluxo. **Obrigatório quando:** `Modo` = `Claro` **Nome da variável:** Cor de fundo da tela (modo escuro) **Variável:** `backgroundDarkColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Fundo no tema escuro. **Obrigatório quando:** `Modo` = `Oscuro` **Nome da variável:** Cor da fonte (modo claro) **Variável:** `fontColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Textos: títulos, instruções, mensagens e estados. **Obrigatório quando:** `Modo` = `Claro` **Nome da variável:** Cor da fonte (modo escuro) **Variável:** `fontDarkColor` **Descrição:** Cor em formato HEX (por exemplo `#ffffff`). Textos no tema escuro. **Obrigatório quando:** `Modo` = `Oscuro` **Nome da variável:** Link de termos e condições **Variável:** `termsLink` **Descrição:** **URL pública** do documento legal. É **obrigatório** para um processo biométrico; sem o link você não atende aos requisitos mínimos de implementação. O documento deve deixar explícitos **uso**, **armazenamento** e **tratamento** de dados pessoais e biométricos, e ser exibido **antes** de iniciar a verificação. **Nome da variável:** Facematch: limiar de aprovação **Variável:** `facematchThreshold` **Descrição:** Exigência da **comparação facial** (percentual de coincidência). **Valores disponíveis:** `65`, `70`, `75`, `80`, `85`, `90` **Nome da variável:** Documento: validar imagem ghost **Variável:** `validateGhostPortrait` **Descrição:** Verifica a **coincidência entre a foto principal do documento e a miniatura (ghost)**. **Valores disponíveis:** `true`, `false` Use `false` se seus usuários costumam enviar fotos de **baixa qualidade**; com `true`, a taxa de rejeições pode aumentar. **Nome da variável:** Modificar idioma **Variável:** `editLanguage` **Descrição:** Habilita o bloco de idioma (`defaultLanguage`, `canChangeLanguage`). **Valores disponíveis:** `true`, `false` **Nome da variável:** Idioma padrão **Variável:** `defaultLanguage` **Descrição:** Idioma inicial dos textos do WebView. **Valores disponíveis:** `es`, `en` **Obrigatório quando:** `editLanguage` = `true` **Nome da variável:** Permitir que o usuário escolha o idioma **Variável:** `canChangeLanguage` **Descrição:** Se for `true`, o usuário pode **mudar o idioma da interface a qualquer momento** do processo. **Valores disponíveis:** `true`, `false` **Obrigatório quando:** `editLanguage` = `true` ### Sucesso Indica que a configuração enviada foi aplicada corretamente à UI do WebView. **Variável:** `success` **Descrição:** UI atualizada ### Erros A execução não produziu uma atualização efetiva da UI (por exemplo, valores iguais aos já vigentes ou validação que impede salvar). **Variável:** `noData` **Descrição:** Não foram encontradas alterações para atualizar A operação falhou ao comunicar com o serviço que persiste a configuração. **Variável:** `error` **Descrição:** Erro no serviço ## Escopo do WebView de biometria O WebView de biometria é composto por **12 telas** que guiam o usuário no processo de **validação com foto (WebView)**: prova de vida, documento (frente e verso) e encerramento com resultado. Os nomes e a ordem exatos das telas podem variar conforme a versão do produto e a configuração do agente (por exemplo, vídeo de introdução ou idioma). ## Elementos não modificáveis Para garantir a qualidade da verificação, não são modificáveis: * Widgets de captura facial. * Widgets de captura de documentos. ## Revisão antes de publicar Checklist recomendado: * Workflow dedicado à tool com execução de teste bem-sucedida (**UI atualizada**, `success`). * **`colors`**, **`Modo`** e pares de cores coerentes (claro e/ou escuro conforme o caso). * **`termsLink`** público e funcional. * **`facematchThreshold`** alinhado à sua política de risco. * **`validateGhostPortrait`** adequado à qualidade típica das fotos de documento. * **`editLanguage`**, **`defaultLanguage`** e **`canChangeLanguage`** revisados. * Widgets de captura visíveis e sem alterações não suportadas. * Testes ponta a ponta concluídos no WhatsApp.