> ## 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 uma interface web no chat, pausa o fluxo e continua com base no callback ou no tempo de expiração

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

O nodo **WebView** abre uma interface web para que o usuário conclua uma ação (por exemplo, um pagamento ou um formulário). Se você habilitar a opção de bloqueio de fluxo, o fluxo permanece pausado até receber uma resposta de callback ou o tempo de expiração ser atingido.

## Como funciona

<Steps>
  <Step title="Configurar a URL">
    No nodo, insira a URL da sua interface web no campo correspondente. O fluxo envia esse link ao usuário como um botão ou link no chat.

    <Note>
      O `executionId` é **sempre** adicionado como parâmetro na URL quando o WebView é aberto. Sua página deve lê-lo da URL e enviá-lo no callback.
    </Note>

    A URL que o usuário recebe tem este formato (o `executionId` é adicionado automaticamente):

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

    Se sua URL já tiver outros query params, ele é adicionado com `&`: `https://seu-dominio.com?foo=1&executionId=<valor>`.
  </Step>

  <Step title="O usuário abre o WebView">
    O usuário clica no botão e conclui a ação na interface web (pagamento, formulário, etc.).
  </Step>

  <Step title="Seu WebView envia o callback">
    Quando o usuário terminar, sua página web deve chamar o endpoint de callback para desbloquear o fluxo.

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

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

    **Corpo da requisição (JSON):**

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

    | Campo         | Tipo    | Obrigatório | Descrição                                                                                                                                         |
    | :------------ | :------ | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
    | `executionId` | string  | Sim         | Valor que vem na URL do WebView quando ele é aberto (query param). Identifica o fluxo pausado.                                                    |
    | `success`     | boolean | Sim         | `true` = caminho de sucesso do WebView (SuccessCallback), `false` = caminho de erro do WebView (ErrorCallback).                                   |
    | `data`        | object  | Não         | Objeto com informações coletadas no WebView para continuar o fluxo (ex.: opções selecionadas). Salvo na variável de resposta configurada no nodo. |
  </Step>
</Steps>

## Enquanto aguarda

Quando a opção de bloqueio de fluxo está habilitada, se o usuário escrever algo no chat enquanto o WebView está aberto:

* Eles recebem a mensagem configurada em **Mensagem de espera**.
* O fluxo não avança até que o WebView responda ou o tempo de expiração seja atingido.

<Warning>
  O fluxo só é bloqueado se você habilitar a opção "Bloquear fluxo até resposta", localizada na aba avançada do nodo.
</Warning>

## Três saídas possíveis

Quando o bloqueio de fluxo está habilitado, cada resultado de callback se conecta a um ramo diferente por meio de sua própria aresta:

| Resultado    | Condição                               | Ramo                                     |
| :----------- | :------------------------------------- | :--------------------------------------- |
| **Sucesso**  | `success: true` no callback            | O fluxo continua pela saída de sucesso   |
| **Erro**     | `success: false` no callback           | O fluxo continua pela saída de erro      |
| **Expirado** | Sem resposta antes do `expirationTime` | O fluxo continua pela saída de expiração |

<Note>
  Conecte todas as três arestas do nodo WebView aos nodos correspondentes: uma para sucesso, uma para erro e uma para quando o tempo expirar.
</Note>

## Configuração

| Campo                    | Descrição                                                                                                           |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------ |
| **URL**                  | Endereço web que abre ao clicar. Você configura isso no nodo.                                                       |
| **Variável de entrada**  | Dados passados para a URL como query params.                                                                        |
| **Tempo de expiração**   | Segundos máximos para aguardar antes de tomar a saída Expirado. Aplica-se somente se o bloqueio estiver habilitado. |
| **Mensagem pendente**    | Mensagem que o usuário recebe se escrever no chat enquanto o fluxo está aguardando.                                 |
| **Variável de resposta** | Variável onde os dados enviados no campo `data` do callback são armazenados.                                        |

## Fechar o WebView

Se você quiser fechar o WebView após uma ação, um truque: redirecione para um link do WhatsApp para retornar ao chat:

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