> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whatabot.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Incorporação via Iframe

> Incorpore o editor de fluxos do whatabot no seu próprio aplicativo.

## Visão geral

O editor de fluxos do whatabot pode ser incorporado diretamente no seu próprio aplicativo usando um **iframe**. Isso permite que você ofereça capacidades de construção de fluxos aos seus usuários sem que eles precisem sair da sua plataforma.

## Requisitos

Para incorporar o editor de fluxos, você precisa de:

1. **Um cliente OAuth** -- criado nas configurações do seu espaço de trabalho, fornecendo um `clientId` e `clientSecret`.
2. **Um espaço de trabalho com `iframe_enabled` definido como `true`** -- a incorporação via iframe deve ser explicitamente habilitada no espaço de trabalho.
3. **Um serviço backend** -- seu servidor lida com o handshake de autenticação para que o client secret nunca seja exposto ao navegador.

<Callout type="warning">
  O `clientSecret` nunca deve ser exposto em código frontend. Toda autenticação
  com o client secret deve acontecer no seu backend. Consulte [Autenticação de
  Incorporação](/embed/authentication) para o fluxo seguro.
</Callout>

## Como funciona

O iframe usa uma combinação de **credenciais de cliente** e autenticação por **token de uso único (OTT)**:

1. Seu backend se autentica com o whatabot usando as credenciais de cliente (Basic Auth).
2. O whatabot retorna um token de uso único (OTT) válido por 60 segundos.
3. Seu frontend passa o OTT para o iframe, que o troca por tokens de acesso e atualização.
4. O iframe usa esses tokens para interagir com a API do whatabot.

## URL do iframe

A URL do iframe segue o formato:

```
https://flow.whatabot.app/{idioma}/flows/builder/{flowId}
```

| Parâmetro  | Descrição                                              |
| ---------- | ------------------------------------------------------ |
| `{idioma}` | Idioma da interface: `en` (inglês) ou `pt` (português) |
| `{flowId}` | UUID do fluxo a ser editado                            |

Exemplo:

```
https://flow.whatabot.app/en/flows/builder/019cfebf-b789-794b-9a86-3098d6e82772
```

<Warning>
  O iframe só pode abrir URLs no formato acima. Qualquer outro caminho será bloqueado.
</Warning>

### Tema

Você pode personalizar o tema do editor adicionando o query param `theme`:

```
https://flow.whatabot.app/en/flows/builder/{flowId}?theme=dark
```

| Valor   | Descrição           |
| ------- | ------------------- |
| `light` | Tema claro (padrão) |
| `dark`  | Tema escuro         |

## Escopo do token de cliente

Tokens de cliente são **vinculados a um único espaço de trabalho**. Um editor incorporado só pode acessar recursos dentro do espaço de trabalho para o qual o cliente OAuth foi criado.

## Caso de uso

Imagine que você tem uma plataforma SaaS e quer permitir que seus clientes criem e editem fluxos de conversa diretamente dentro do seu sistema.

1. **Liste os fluxos** do espaço de trabalho usando o endpoint [Listar Fluxos](/api-reference/flows/list-flows) com sua chave de API:

```bash theme={null}
curl -X GET "https://api.whatabot.app/api/v1/flows" \
  -H "X-Api-Key: wh_your_api_key"
```

2. **Exiba os fluxos** na sua interface para o usuário escolher qual editar.

3. **Abra o editor incorporado** com o `flowId` escolhido:

```
https://flow.whatabot.app/pt/flows/builder/{flowId}?theme=light
```

Dessa forma, seu usuário consegue listar, selecionar e editar fluxos sem sair da sua plataforma.

## Próximos passos

<CardGroup cols={1}>
  <Card title="Autenticação de Incorporação" icon="lock" href="/embed/authentication">
    Aprenda o fluxo completo de autenticação em 3 etapas para o editor
    incorporado, incluindo exemplos de código.
  </Card>
</CardGroup>