> ## 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.

# Validation with photo (WebView)

> Verify identity on WhatsApp via WebView with photo selfie, document, and facial comparison.

This agent lets you run a full identity verification inside **WhatsApp via WebView**, combining photo liveness, document validation, and facial comparison. The experience opens from a unique link in the chat and uses guided capture with immediate feedback.

<Info>
  For **liveness** and **document check**, WebView uses guided capture with on-screen feedback; the user stays in the chat.
</Info>

## Prerequisites

### ✅ Checklist to start without blockers

* You must have a **verified WhatsApp account**.
* You must have the **Terms and Conditions PDF** (public URL) to configure in the agent. **This is mandatory.**
* The user must be able to **take photos** from the chat (camera permissions enabled on the device).
* **Location permissions** are also requested so data can be collected for better audit and traceability of the biometric process.

## How does it work?

In under one minute, the user completes these steps:

<Steps>
  <Step title="Access via a unique link">
    The user receives a unique WhatsApp link to start the session. The link contains a non-reusable session id and the associated flow information.
  </Step>

  <Step title="Take a photo">
    The user captures a live photo from the camera, with visual guides for a correct shot.
  </Step>

  <Step title="Capture their ID document">
    **Front and back** images of the document are requested, with visual assistance to validate validity and authenticity.
  </Step>

  <Step title="Automatic facial comparison">
    The system compares the photo to the face extracted from the document and computes the similarity level. This version does not yet include facematch against government entities.
  </Step>
</Steps>

## How to connect the integration?

<Frame caption="How to connect the Biometrics integration">
  <iframe width="100%" height="400" src="https://www.youtube.com/embed/b_hlkjk0pQs" title="Conectar Biometría" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Steps>
  <Step title="Open the platform">
    Use the Agent to create a biometrics flow, or select the **Identity validation** template.
    To start a flow from scratch, click Brain Studio in the sidebar.
  </Step>

  <Step title="Select Biometrics">
    In the toolbar you will see the **Biometrics** option. Click **Connect**.
  </Step>

  <Step title="Connect the integration">
    Once connected, you will see the **Biometrics** node, where you can configure retries, experience, and additional validations.
  </Step>

  <Step title="Configure outputs">
    This agent has **1 success output and 3 error outputs**. Each can route to:

    * Text input with a custom message.
    * Connect, only if you have this module.
  </Step>

  <Step title="Run tests">
    With the configuration you just set, run tests with the **Test** button.
  </Step>
</Steps>

## Configuration

<Tabs>
  <Tab title="Outputs">
    ### Success

    <AccordionGroup>
      <Accordion title="Biometrics approved" icon="circle-check">
        Confirms that biometric verification succeeded.

        **Variable:** `approved`

        **Description:** Biometrics approved

        **Response structure (JSON):**

        ```json theme={null}
        {
          "document_response": {
            "document_check": {
              "result": "",
              "verified_fields": { "...": "Main document data" },
              "secondary_fields": { "...": "Secondary document data" },
              "details": { "...": "Document type details" },
              "status_fields": { "...": "Validation status" },
              "image_quality_details": { "...": "Image quality details" },
              "images_extracted": { "...": "Images extracted from the document" },
              "gov_entity_fields": { "document_number": "ID document number" }
            },
            "document_image_front_url": "Front document image URL",
            "document_image_back_url": "Back document image URL",
            "document_face_image_url": "Face image extracted from document URL"
          },
          "liveness_response": {
            "result": "true",
            "url_selfie_image": "URL of the photo used for liveness"
          },
          "facematch_response": {
            "facematch_result": "approved",
            "facematch_confidence": "Match percentage (0-100)"
          },
          "reporte_de_biometria": {
            "report": "Biometric report URL (web)",
            "report_pdf": "Biometric report URL (PDF)"
          },
          "device_info": {
            "userAgent": "User agent string",
            "browser": "Browser",
            "operatingSystem": "Operating system",
            "platform": "Device platform",
            "language": "Language",
            "timezone": "Timezone",
            "screenResolution": "Screen resolution",
            "colorDepth": "Color depth in bits",
            "timestamp": "Device timestamp",
            "ipAddress": "IP address",
            "location": {
              "latitude": "Latitude (if the user grants permission)",
              "longitude": "Longitude (if the user grants permission)"
            },
            "deviceId": "Unique device id",
            "deviceName": "Device name"
          },
          "gov_entity_data": {
            "...": "Government entity data for the country (varies by country)"
          }
        }
        ```

        **Important fields:**

        * `document_response`: ID document information
        * `liveness_response`: Photo used for liveness
        * `facematch_response`: Facial comparison result
        * `reporte_de_biometria`: Report URLs (web and PDF)
        * `device_info`: Device and location data (audit and traceability)
        * `gov_entity_data`: Government entity data (if applicable)

        **JSON response variable definitions:**

        * **document\_response:** `document_check` (result, verified\_fields, secondary\_fields, details, status\_fields, image\_quality\_details, images\_extracted, gov\_entity\_fields), `document_image_front_url`, `document_image_back_url`, `document_face_image_url`
        * **liveness\_response:** `result`, `url_selfie_image`
        * **facematch\_response:** `facematch_result` (approved/decline), `facematch_confidence`
        * **reporte\_de\_biometria:** `report`, `report_pdf`
        * **device\_info:** `userAgent`, `browser`, `operatingSystem`, `platform`, `language`, `timezone`, `screenResolution`, `colorDepth`, `timestamp`, `ipAddress`, `location` (latitude, longitude; only if location permission), `deviceId`, `deviceName`
        * **gov\_entity\_data:** government entity data for the country (fields vary by country)
      </Accordion>
    </AccordionGroup>

    ### Errors

    <AccordionGroup>
      <Accordion title="Process abandoned" icon="door-open">
        The user left the process before completing it.

        **Variable:** `incomplete`

        **Description:** Process abandoned
      </Accordion>

      <Accordion title="Biometrics rejected" icon="ban">
        Biometric verification failed or was rejected.

        **Variable:** `reject`

        **Description:** Biometrics rejected
      </Accordion>

      <Accordion title="Process error" icon="triangle-exclamation">
        Error while running the biometric process.

        **Variable:** `error`

        **Description:** Process error
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Report

By default a report is generated with the following fields:

| **Field**              | **Description**                   |
| ---------------------- | --------------------------------- |
| Biometric code         | Unique process id                 |
| Date and time          | Verification timestamp            |
| Biometric result       | Approved / Not approved           |
| ID number              | User document                     |
| ID type                | Document type                     |
| First names            | User first names                  |
| Last names             | User last names                   |
| Mobile                 | Phone                             |
| Photo                  | Selfie URL                        |
| Liveness result        | Approved / Not approved           |
| Front document photo   | URL                               |
| Back document photo    | URL                               |
| Document check result  | Approved / Not approved           |
| Face on document photo | URL                               |
| Facematch result       | Match percentage                  |
| Biometric report       | Report URL                        |
| Failure description    | Error detail                      |
| Notes                  | Additional notes                  |
| User agent             | Browser user agent string         |
| Browser                | Browser (e.g. Chrome)             |
| Operating System       | Device OS                         |
| Platform               | Platform (e.g. Linux aarch64)     |
| Language               | Configured language (e.g. es-US)  |
| Timezone               | Timezone (e.g. America/Guayaquil) |
| Screen Resolution      | Screen resolution (e.g. 376x835)  |
| Color Depth            | Color depth in bits               |
| Timestamp (device)     | Device timestamp                  |
| IP Address             | IP used for verification          |
| Latitude               | Location latitude                 |
| Longitude              | Location longitude                |
| Device ID              | Unique device id                  |
| Device Name            | Device name (e.g. Linux - Chrome) |

<Info>
  The biometric report can be downloaded as **PDF** for audit or internal backup.
</Info>

<Warning>
  **Location in the report:** Latitude and longitude depend on permission granted by the user. If the user denies location access or location is disabled on the device, these fields will not appear in the report.
</Warning>

## How to customize the experience?

When you click the **Biometrics** node on the canvas, a side panel opens with three configuration tabs.

<Tabs>
  <Tab title="General">
    Configure the number of retries allowed per stage of the biometric process.

    * **Maximum liveness attempts** — defines how many times the user can retry the facial capture before the process fails.
    * **Maximum document verification attempts** — defines how many times the user can retry the document capture.

    <Info>
      This configuration is **global for your company**: any changes will apply to all flows using WebView biometrics.
    </Info>
  </Tab>

  <Tab title="Experience">
    Customize the appearance of the WebView the end user will see. Use the **Preview** button to view the mockup of each screen before publishing.

    | Option                  | Description                                                                                               |
    | ----------------------- | --------------------------------------------------------------------------------------------------------- |
    | **Colors**              | Use Jelou colors (default) or define custom colors for buttons, steppers, spinners, background, and text. |
    | **Experience language** | Choose **Spanish** or **English** as the default UI language.                                             |
    | **Language toggle**     | Enable this so the user can change the language directly from the initial screen.                         |

    <Note>
      This tab is available only in **WebView** mode.
    </Note>

    <Info>
      The experience configuration is **global for your company** and applies to all flows using WebView biometrics.
    </Info>
  </Tab>

  <Tab title="Validations">
    Define the minimum validation levels the user must pass for the process to be considered successful.

    | Parameter                    | Options                                   | Description                                                                                 |
    | ---------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- |
    | **Document verification**    | Medium / Advanced                         | **Medium**: standard document validation. **Advanced**: advanced fraud detection.           |
    | **Facial comparison**        | Low (65%) / Standard (80%) / Strict (90%) | Minimum similarity percentage accepted between the selfie and the document photo.           |
    | **Terms and conditions URL** | Public URL                                | The user must accept the terms on the initial screen. The link must be publicly accessible. |

    <Info>
      The validations configuration is **global for your company** and applies to all flows using WebView biometrics.
    </Info>
  </Tab>
</Tabs>

## FAQ

<AccordionGroup>
  <Accordion title="What document images are required during the biometric process?">
    Photos of the **ID document on both sides**: front and back.
  </Accordion>

  <Accordion title="How is WebView biometrics different from Flows or conversational?">
    WebView opens a dedicated link with guided capture; the report includes **device data** (browser, OS, resolution, timezone, IP, device ID) and **location** if the user grants permission. You can adjust **colors** (background, text, buttons, stepper), **UI language**, and security options described in the customization guide; **capture widgets** are not editable. Conversational uses **video** in chat; Flows uses **photo** inside WhatsApp Flows with its own gallery rules and native UI.
  </Accordion>

  <Accordion title="Can I customize colors and UI language?">
    Yes: background, text, button, and stepper colors; UI language (Spanish/English) and, when enabled, a user-facing language selector. Stepper color also applies to widgets. Face and document capture widgets are not customizable.
  </Accordion>

  <Accordion title="How many outputs does this agent have?">
    **1 success** output (Biometrics approved) and **3 error** outputs (Process abandoned, Biometrics rejected, Process error). Each can route to a custom text message or Connect.
  </Accordion>
</AccordionGroup>