> ## 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. # WebView customization > Configure the experience by customizing colors, language, and legal and security validations. This guide explains what you can customize in the **WebView** biometric experience, how to use the **`[Webview] Biometric UI Configuration`** tool, what outputs to expect when you test, and how to fill in each input parameter. ## What you can customize You can align the experience with your brand and business rules using: * **Colors and mode** (light or dark, with paired variables per theme). * **Language** for UI copy, and whether the user may switch language. * **Legal validation** (link to terms and conditions). * **Security validation** (facematch threshold and document ghost check). Face and document **capture widgets** are not customizable; see **Non-editable elements** below. ## Configure in Brain Set appearance and UI rules with the **`[Webview] Biometric UI Configuration`** tool. Create a **new workflow** in Brain for this tool. WebView UI personalization changes should only be applied **once**; you can keep this workflow as the single place where you run the configuration update. Create workflow modal in Jelou Producto to name the dedicated workflow In the **sidebar**, search by tool name. If it is not connected yet, open the **Tools** icon in the sidebar and locate **`[Webview] Biometric UI Configuration`** in the catalog. Marketplace with [Webview] Biometric UI Configuration selected and connected to the Start node Connect the tool, **drag it onto the workflow canvas**, and complete the fields in the **right-hand sidebar** when the node is selected. Review the **Inputs** tab under **Configuration** below. Node side panel with tool version selector and prompt to configure inputs On the node's **Outputs** tab, connect each tool branch to the rest of the workflow and set the **message** (or next action) that should run in each case. The tool exposes three output variables: * **`success`** — maps to **UI updated**: the configuration was applied successfully to the WebView UI. * **`noData`** — maps to **No changes found to update** (for example, same values as already live or validation blocking save). * **`error`** — maps to **Service error** (the operation failed while contacting the service that persists configuration). Canvas with UI updated, no changes, and service error branches connected to Text nodes Use **Test** on the workflow. It should return **success** (**UI updated**, variable `success`) when changes were applied correctly to the WebView experience. Test project panel showing a successful run and the Text node message on the UI updated branch ## Configuration **Variable name:** UI colors **Variable:** `colors` **Description:** Enables the **custom palette** (`true` / `false`). When `true`, you must set **`Modo`** and the HEX colors for the selected theme. With the palette on, validate **contrast and readability** between background, text, and buttons (especially if the device theme can change). **Available values:** `true`, `false` **Variable name:** Modo **Variable:** `Modo` **Description:** Base theme **Claro** (light) or **Oscuro** (dark); determines which color set applies. **Available values:** `Claro`, `Oscuro` **Required when:** `colors` = `true` In **light mode**, use `primaryColor`, `secondaryColor`, `tertiaryColor`, `backgroundColor`, and `fontColor`. In **dark mode**, use `primaryDarkColor`, `secondaryDarkColor`, `tertiaryDarkColor`, `backgroundDarkColor`, and `fontDarkColor` (same five visual roles, dark variant). **Variable name:** Primary color (light mode) **Variable:** `primaryColor` **Description:** HEX color (for example `#ffffff`). Drives **progress** and **active states** (completed and current steps, terms checkbox border and state, document validation spinner). **Required when:** `Modo` = `Claro` **Variable name:** Primary color (dark mode) **Variable:** `primaryDarkColor` **Description:** HEX color (for example `#ffffff`). Same visual role as `primaryColor` in dark theme. **Required when:** `Modo` = `Oscuro` **Variable name:** Secondary color (light mode) **Variable:** `secondaryColor` **Description:** HEX color (for example `#ffffff`). **Primary** actions: main buttons (Continue, Retry, etc.), loading spinners, success, terms links, **pending** progress steps. **Required when:** `Modo` = `Claro` **Variable name:** Secondary color (dark mode) **Variable:** `secondaryDarkColor` **Description:** HEX color (for example `#ffffff`). Same role as `secondaryColor` in dark theme. **Required when:** `Modo` = `Oscuro` **Variable name:** Tertiary color (light mode) **Variable:** `tertiaryColor` **Description:** HEX color (for example `#ffffff`). **In-progress** states: spinners during validations and step indicators while running. **Required when:** `Modo` = `Claro` Variable: `tertiaryDarkColor`. HEX: (example: `#ffffff`). Same role as `tertiaryColor` in dark theme. **Required when:** `Modo` = `Oscuro` **Variable name:** Screen background (light mode) **Variable:** `backgroundColor` **Description:** HEX color (for example `#ffffff`). Overall background for flow screens. **Required when:** `Modo` = `Claro` **Variable name:** Screen background (dark mode) **Variable:** `backgroundDarkColor` **Description:** HEX color (for example `#ffffff`). Background in dark theme. **Required when:** `Modo` = `Oscuro` **Variable name:** Font color (light mode) **Variable:** `fontColor` **Description:** HEX color (for example `#ffffff`). Text: titles, instructions, messages, and states. **Required when:** `Modo` = `Claro` **Variable name:** Font color (dark mode) **Variable:** `fontDarkColor` **Description:** HEX color (for example `#ffffff`). Text in dark theme. **Required when:** `Modo` = `Oscuro` **Variable name:** Terms and conditions link **Variable:** `termsLink` **Description:** **Public URL** of the legal document. **Required** for a biometric process; without it you do not meet minimum implementation requirements. The document must clearly state **use**, **storage**, and **processing** of personal and biometric data, and be shown **before** verification starts. **Variable name:** Facematch: approval threshold **Variable:** `facematchThreshold` **Description:** Strictness of **face comparison** (match percentage). **Available values:** `65`, `70`, `75`, `80`, `85`, `90` **Variable name:** Document: validate ghost image **Variable:** `validateGhostPortrait` **Description:** Checks **consistency between the main document photo and the thumbnail (ghost)**. **Available values:** `true`, `false` Use `false` if users often send **low-quality** photos; with `true`, rejection rates may increase. **Variable name:** Edit language **Variable:** `editLanguage` **Description:** Enables the language block (`defaultLanguage`, `canChangeLanguage`). **Available values:** `true`, `false` **Variable name:** Default language **Variable:** `defaultLanguage` **Description:** Initial language for WebView copy. **Available values:** `es`, `en` **Required when:** `editLanguage` = `true` **Variable name:** Allow user to change language **Variable:** `canChangeLanguage` **Description:** When `true`, the user may **change the interface language at any time** during the flow. **Available values:** `true`, `false` **Required when:** `editLanguage` = `true` ### Success The submitted configuration was applied successfully to the WebView UI. **Variable:** `success` **Description:** UI updated ### Errors The run did not produce an effective UI update (for example, same values as already live, or validation blocking save). **Variable:** `noData` **Description:** No changes found to update The operation failed while contacting the service that persists configuration. **Variable:** `error` **Description:** Service error ## Biometric WebView scope The biometric WebView includes **12 screens** that guide the user through **photo-based WebView verification**: liveness, document (front and back), and a final outcome. The exact names and order of screens may vary with the product version and agent settings (for example, intro video or language). ## Non-editable elements To keep verification quality, these are not customizable: * Face capture widgets. * Document capture widgets. ## Pre-publish review Recommended checklist: * Dedicated workflow for the tool with a successful test run (**UI updated**, `success`). * **`colors`**, **`Modo`**, and consistent color pairs (light and/or dark as applicable). * Public, working **`termsLink`**. * **`facematchThreshold`** aligned with your risk policy. * **`validateGhostPortrait`** suited to typical document photo quality. * **`editLanguage`**, **`defaultLanguage`**, and **`canChangeLanguage`** reviewed. * Capture widgets visible and not altered in unsupported ways. * End-to-end tests completed on WhatsApp.