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

> Opens a web interface in the chat, pauses the flow, and continues based on the callback or the expiration time

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

The **WebView** node opens a web interface for the user to complete an action (for example, a payment or a form). If you enable the flow-blocking option, the flow remains paused until it receives a callback response or the expiration time is reached.

## How it works

<Steps>
  <Step title="Configure the URL">
    In the node, enter the URL of your web interface in the corresponding field. The flow sends that link to the user as a button or link in the chat.

    <Note>
      The `executionId` is **always** added as a parameter in the URL when the WebView is opened. Your page must read it from the URL and send it in the callback.
    </Note>

    The URL the user receives has this format (the `executionId` is added automatically):

    ```
    https://your-domain.com?executionId=<value>
    ```

    If your URL already has other query params, it is added with `&`: `https://your-domain.com?foo=1&executionId=<value>`.
  </Step>

  <Step title="The user opens the WebView">
    The user clicks the button and completes the action in the web interface (payment, form, etc.).
  </Step>

  <Step title="Your WebView sends the callback">
    When the user finishes, your web page must call the callback endpoint to unblock the flow.

    **Endpoint (POST method):**

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

    **Request body (JSON):**

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

    | Field         | Type    | Required | Description                                                                                                                                           |
    | :------------ | :------ | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `executionId` | string  | Yes      | Value that comes in the WebView URL when it opens (query param). Identifies the paused flow.                                                          |
    | `success`     | boolean | Yes      | `true` = WebView success path (SuccessCallback), `false` = WebView error path (ErrorCallback).                                                        |
    | `data`        | object  | No       | Object with information collected in the WebView to continue the flow (e.g. selected options). Saved in the response variable configured in the node. |
  </Step>
</Steps>

## While waiting

When the flow-blocking option is enabled, if the user writes something in the chat while the WebView is open:

* They receive the message configured in **Waiting message**.
* The flow does not advance until the WebView responds or the expiration time is reached.

<Warning>
  The flow is only blocked if you enable the "Block flow until response" option, located in the advanced tab of the node.
</Warning>

## Three possible outputs

When flow blocking is enabled, each callback result connects to a different branch through its own edge:

| Result      | Condition                           | Branch                                       |
| :---------- | :---------------------------------- | :------------------------------------------- |
| **Success** | `success: true` in the callback     | Flow continues through the success output    |
| **Error**   | `success: false` in the callback    | Flow continues through the error output      |
| **Expired** | No response before `expirationTime` | Flow continues through the expiration output |

<Note>
  Connect all three edges of the WebView node to the corresponding nodes: one for success, one for error, and one for when the time expires.
</Note>

## Configuration

| Field                 | Description                                                                                    |
| :-------------------- | :--------------------------------------------------------------------------------------------- |
| **URL**               | Web address that opens when clicked. You configure this in the node.                           |
| **Input variable**    | Data passed to the URL as query params.                                                        |
| **Expiration time**   | Maximum seconds to wait before taking the Expired output. Only applies if blocking is enabled. |
| **Pending message**   | Message the user receives if they write in the chat while the flow is waiting.                 |
| **Response variable** | Variable where the data sent in the callback's `data` field is stored.                         |

## Closing the WebView

If you want to close the WebView after an action, a trick: redirect to a WhatsApp link to return to the chat:

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