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

> Abre una interfaz web en el chat, pausa el flujo y continúa según el callback o el tiempo de expiración

<Frame>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/7nRa3tdAWms" title="WebView" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

El nodo **WebView** abre una interfaz web para que el usuario complete una acción (por ejemplo, un pago o un formulario). Si activas la opción de bloquear el flujo, este permanece pausado hasta que recibe una respuesta del callback o se cumple el tiempo de expiración.

## Cómo funciona

<Steps>
  <Step title="Configura la URL">
    En el nodo, ingresa la URL de tu interfaz web en el campo correspondiente. El flujo envía ese enlace al usuario como botón o enlace en el chat.

    <Note>
      **Siempre** se añade el `executionId` como parámetro en la URL cuando se abre el WebView. Tu página debe leerlo de la URL y enviarlo en el callback.
    </Note>

    La URL que recibe el usuario tiene este formato (el `executionId` se añade automáticamente):

    ```
    https://tu-dominio.com?executionId=<valor>
    ```

    Si tu URL ya lleva otros query params, se añade con `&`: `https://tu-dominio.com?foo=1&executionId=<valor>`.
  </Step>

  <Step title="El usuario abre el WebView">
    El usuario hace clic en el botón y completa la acción en la interfaz web (pago, formulario, etc.).
  </Step>

  <Step title="Tu WebView envía el callback">
    Cuando el usuario termina, tu página web debe llamar al endpoint de callback para desbloquear el flujo.

    **Endpoint (método POST):**

    ```
    https://workflows.jelou.ai/v1/webview/callback
    ```

    **Cuerpo del request (JSON):**

    ```json theme={null}
    {
      "executionId": "exec_abc123xyz",
      "success": true,
      "data": {
        "paymentId": "pay_789",
        "status": "completed",
        "amount": 99.99
      }
    }
    ```

    | Campo         | Tipo    | Obligatorio | Descripción                                                                                                                                                          |
    | :------------ | :------ | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `executionId` | string  | Sí          | Valor que viene en la URL del WebView cuando se abre (query param). Identifica el flujo pausado.                                                                     |
    | `success`     | boolean | Sí          | `true` = ruta de éxito del WebView (SuccessCallback), `false` = ruta de error del WebView (ErrorCallback).                                                           |
    | `data`        | object  | No          | Objeto con la información recogida en el WebView para continuar el flujo (ej. opciones seleccionadas). Se guarda en la variable de respuesta configurada en el nodo. |
  </Step>
</Steps>

## Mientras espera

Cuando la opción de bloquear el flujo está activada, si el usuario escribe algo en el chat mientras el WebView está abierto:

* Recibe el mensaje configurado en **Mensaje de espera**.
* El flujo no avanza hasta que el WebView responda o se cumpla el tiempo de expiración.

<Warning>
  El flujo solo se bloquea si activas la opción de "Bloquear flujo hasta respuesta", ubicado en el tab avanzado del nodo.
</Warning>

## Tres salidas posibles

Cuando el bloqueo del flujo está activado, cada resultado del callback se conecta a una rama distinta a través de su propia arista (edge):

| Resultado    | Condición                                   | Rama                                       |
| :----------- | :------------------------------------------ | :----------------------------------------- |
| **Éxito**    | `success: true` en el callback              | Flujo continúa por la salida de éxito      |
| **Error**    | `success: false` en el callback             | Flujo continúa por la salida de error      |
| **Expirado** | No hubo respuesta antes de `expirationTime` | Flujo continúa por la salida de expiración |

<Note>
  Conecta las tres aristas del nodo WebView a los nodos que correspondan: uno para éxito, uno para error y uno para cuando expire el tiempo.
</Note>

## Configuración

| Campo                     | Descripción                                                                                           |
| :------------------------ | :---------------------------------------------------------------------------------------------------- |
| **URL**                   | Dirección web que se abre al hacer clic. La configuras tú en el nodo.                                 |
| **Variable de entrada**   | Datos que se pasan a la URL como query params.                                                        |
| **Tiempo de expiración**  | Segundos máximos de espera antes de tomar la salida Expired. Solo aplica si el bloqueo está activado. |
| **Mensaje pendiente**     | Mensaje que recibe el usuario si escribe en el chat mientras el flujo espera.                         |
| **Variable de respuesta** | Variable donde se guardan los datos enviados en `data` del callback.                                  |

## Cerrar el WebView

Si quieres cerrar el WebView luego de una acción, un truco: redirige a un enlace de WhatsApp para regresar al chat:

```javascript theme={null}
window.location.href = "https://wa.me/13239183195";
```