> ## 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. # Personalización de WebView > Configura la experiencia personalizando colores, idioma e integrando validaciones legales y de seguridad. Esta guía detalla qué puedes personalizar en la experiencia **WebView** de biometría, cómo usar la tool **`[Webview] Biometric UI Configuration`**, qué salidas esperar al probar y cómo completar cada parámetro de entrada. ## Elementos personalizables Puedes adaptar la experiencia a tu marca y reglas de negocio mediante: * **Colores y modo** (claro u oscuro, con pares de variables para cada tema). * **Idioma** de los textos y, si aplica, permiso para que el usuario cambie de idioma. * **Validaciones legales** (enlace a términos y condiciones). * **Validaciones de seguridad** (umbral de facematch y validación ghost del documento). Los widgets de captura facial y de documento **no** son modificables. ## Configuración en Brain Define la apariencia y reglas de UI con la tool **`[Webview] Biometric UI Configuration`**. Crea un **nuevo workflow** en Brain para esta tool. **Debes aplicar** los cambios de personalización de la UI del WebView **solo una vez**; puedes mantener este flujo como el lugar único donde ejecutas la actualización de configuración. Modal Crear workflow en Jelou Producto para nombrar el workflow dedicado En la **barra lateral** puedes buscar por el nombre de la tool **`[Webview] Biometric UI Configuration`**. Marketplace con la tool [Webview] Biometric UI Configuration seleccionada y conectada al nodo Inicio Conecta la tool, **arrástrala al canvas** del workflow y completa los campos en la **barra lateral derecha** al seleccionar el nodo. Revisa la pestaña **Inputs** (entradas) en la sección **Configuración** más abajo. Panel lateral del nodo con selector de versión del tool e instrucción para configurar inputs En la pestaña **Outputs** (salidas) del nodo, enlaza cada salida de la tool al resto del flujo y define el **mensaje** (o la acción siguiente) que debe ejecutarse en cada caso. La tool expone tres variables de salida: * **`success`** — corresponde a **UI actualizada**: la configuración se aplicó correctamente a la UI del WebView. * **`noData`** — corresponde a **No se encontraron cambios para actualizar** (por ejemplo, valores iguales a los ya vigentes o una validación que impide guardar). * **`error`** — corresponde a **Error en el servicio** (fallo al comunicarse con el servicio que persiste la configuración). Canvas con salidas UI actualizada, sin cambios y error en el servicio enlazadas a nodos Texto con mensajes Usa **Probar** sobre el workflow. Debe devolver **éxito** (salida **UI actualizada**, variable `success`) cuando los cambios se aplicaron correctamente a la experiencia WebView. Panel Probar proyecto con ejecución exitosa y mensaje del nodo de texto en la rama UI actualizada ## Configuración **Nombre de la variable:** Colores UI **Variable:** `colors` **Descripción:** Activa la **paleta personalizada** (`true` / `false`). Con `true` debes configurar **`Modo`** y los colores HEX del tema correspondiente. **Valores disponibles:** `true`, `false` **Nombre de la variable:** Modo **Variable:** `Modo` **Descripción:** Tema base **Claro** u **Oscuro**; define qué bloque de colores aplica. **Valores disponibles:** `Claro`, `Oscuro` **Obligatorio cuando:** `colors` = `true` En **modo claro** usa `primaryColor`, `secondaryColor`, `tertiaryColor`, `backgroundColor` y `fontColor`. En **modo oscuro** usa `primaryDarkColor`, `secondaryDarkColor`, `tertiaryDarkColor`, `backgroundDarkColor` y `fontDarkColor` (los mismos cinco roles visuales, variante de tema). **Nombre de la variable:** Color primario (modo claro) **Variable:** `primaryColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Afecta **progreso** y **estados activos** (pasos completados y actual, borde y estado del checkbox de términos, spinner de validación de documento). **Obligatorio cuando:** `Modo` = `Claro` **Nombre de la variable:** Color primario (modo oscuro) **Variable:** `primaryDarkColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Mismo rol visual que `primaryColor` en tema oscuro. **Obligatorio cuando:** `Modo` = `Oscuro` **Nombre de la variable:** Color secundario (modo claro) **Variable:** `secondaryColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Afecta los **botones** principales (Continuar, Reintentar, etc.), los spinners de carga, los estados de éxito, los enlaces de términos y los pasos **pendientes** del progreso. **Obligatorio cuando:** `Modo` = `Claro` **Nombre de la variable:** Color secundario (modo oscuro) **Variable:** `secondaryDarkColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Mismo rol que `secondaryColor` en tema oscuro. **Obligatorio cuando:** `Modo` = `Oscuro` **Nombre de la variable:** Color terciario (modo claro) **Variable:** `tertiaryColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Procesos **en curso**: spinners durante validaciones e indicadores de paso en ejecución. **Obligatorio cuando:** `Modo` = `Claro` **Nombre de la variable:** Color terciario (modo oscuro) **Variable:** `tertiaryDarkColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Mismo rol que `tertiaryColor` en tema oscuro. **Obligatorio cuando:** `Modo` = `Oscuro` **Nombre de la variable:** Color de fondo de pantalla (modo claro) **Variable:** `backgroundColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Fondo general de las pantallas del flujo. **Obligatorio cuando:** `Modo` = `Claro` **Nombre de la variable:** Color de fondo de pantalla (modo oscuro) **Variable:** `backgroundDarkColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Fondo en tema oscuro. **Obligatorio cuando:** `Modo` = `Oscuro` **Nombre de la variable:** Color de fuente (modo claro) **Variable:** `fontColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Textos: títulos, instrucciones, mensajes y estados. **Obligatorio cuando:** `Modo` = `Claro` **Nombre de la variable:** Color de fuente (modo oscuro) **Variable:** `fontDarkColor` **Descripción:** Color en formato HEX (por ejemplo `#ffffff`). Textos en tema oscuro. **Obligatorio cuando:** `Modo` = `Oscuro` **Nombre de la variable:** Enlace términos y condiciones **Variable:** `termsLink` **Descripción:** **URL pública** del documento legal. Es **obligatorio** para un proceso biométrico; sin enlace no cumples el mínimo de implementación. El documento debe explicitar **uso**, **almacenamiento** y **tratamiento** de datos personales y biométricos, y mostrarse **antes** de iniciar la verificación. **Nombre de la variable:** Facematch: umbral de aprobación **Variable:** `facematchThreshold` **Descripción:** Exigencia de la **comparación facial** (porcentaje de coincidencia). **Valores disponibles:** `65`, `70`, `75`, `80`, `85`, `90` **Nombre de la variable:** Documento: validar imagen ghost **Variable:** `validateGhostPortrait` **Descripción:** Comprueba la **coincidencia entre la foto principal del documento y la miniatura (ghost)**. **Valores disponibles:** `true`, `false` Usa `false` si tus usuarios suelen enviar fotos de **baja calidad**; con `true` puede subir la tasa de rechazos. **Nombre de la variable:** Modificar idioma **Variable:** `editLanguage` **Descripción:** Habilita el bloque de idioma (`defaultLanguage`, `canChangeLanguage`). **Valores disponibles:** `true`, `false` **Nombre de la variable:** Idioma por defecto **Variable:** `defaultLanguage` **Descripción:** Idioma inicial de los textos del WebView. **Valores disponibles:** `es`, `en` **Obligatorio cuando:** `editLanguage` = `true` **Nombre de la variable:** Permitir que el usuario elija el idioma **Variable:** `canChangeLanguage` **Descripción:** Si es `true`, el usuario puede **cambiar el idioma de la interfaz en cualquier momento** del proceso. **Valores disponibles:** `true`, `false` **Obligatorio cuando:** `editLanguage` = `true` ### Éxito Indica que la configuración enviada se aplicó correctamente a la UI del WebView. **Variable:** `success` **Descripción:** UI actualizada ### Errores La ejecución no produjo una actualización efectiva de la UI (por ejemplo, valores iguales a los ya vigentes o validación que impide guardar). **Variable:** `noData` **Descripción:** No se encontraron cambios para actualizar Falló la operación al comunicarse con el servicio que persiste la configuración. **Variable:** `error` **Descripción:** Error en el servicio ## Alcance del WebView de biometría El WebView de biometría está compuesto por **12 pantallas** que guían al usuario a lo largo del proceso de **validación de identidad**. ## Elementos no modificables Para garantizar la calidad de la verificación, no son modificables: * Widgets de captura facial. * Widgets de captura de documentos. ## Revisión antes de publicar Checklist recomendado: * Workflow dedicado a la tool con una ejecución de prueba exitosa (**UI actualizada**, `success`). * **`colors`**, **`Modo`** y pares de color coherentes (claro y/o oscuro según corresponda). * **`termsLink`** público y funcional. * **`facematchThreshold`** alineado a tu política de riesgo. * **`validateGhostPortrait`** acorde a la calidad típica de las fotos de documento. * **`editLanguage`**, **`defaultLanguage`** y **`canChangeLanguage`** revisados. * Widgets de captura visibles y sin alteraciones no soportadas. * Pruebas end-to-end completadas en WhatsApp.