> For the complete documentation index, see [llms.txt](https://help.hyperflow.global/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.hyperflow.global/docs/builder-hyperflow/gerenciamento-de-aplicativos/fluxos/resposta/enviar-mensagem.md).

# Enviar mensagem

O módulo **Enviar mensagem** é o principal recurso de envio de mensagens do Builder. Com ele, o seu chatbot envia textos, imagens, áudios, vídeos, arquivos, listas, cartões interativos e muito mais para os usuários — em diferentes canais de atendimento, tudo dentro do mesmo fluxo.

Você pode configurar cada canal de forma independente: o que o WhatsApp recebe pode ser diferente do que o E-mail ou o Instagram recebe, tudo no mesmo nó.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FVW32XYOUnww7dSqEjN8p%2F01-visao-geral-no-painel-config.png?alt=media&amp;token=2ee0bc4c-1c1a-4098-97b2-2e5a3e4f3f12" alt=""><figcaption><p>Imagem 1 - Nó Chat no canvas com o painel de configuração aberto e os pontos de saída visíveis.</p></figcaption></figure>

***

### 🗂️ Como acessar

1. No menu lateral, clique em **Aplicativo**.
2. Em seguida, clique em **Fluxos**.
3. Abra o fluxo desejado ou crie um novo.
4. No canvas do Builder, clique no botão **+** para adicionar um novo nó.
5. Localize e selecione **Enviar mensagem** na lista de módulos disponíveis.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FbcP71Q0svdBXQ19Dkl5r%2F02-lista-modulos-chat-destaque.png?alt=media&amp;token=3c875ae8-a546-4efb-aa36-124099a93c31" alt=""><figcaption><p>Imagem 2 - Lista de módulos do Builder com o item Enviar mensagem (Chat) em destaque.</p></figcaption></figure>

***

### 🧩 Conhecendo o módulo

Ao adicionar o módulo ao fluxo, um painel de configuração é aberto. Na parte superior do painel, você verá uma **barra de abas** com os canais disponíveis na sua plataforma. Cada aba representa um canal de envio diferente, e você pode configurar conteúdos distintos para cada um.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FGcFrVl0bcUpKZEunVR8x%2F03-painel-abas-canais.png?alt=media&amp;token=bf93b6f0-b84d-4328-b050-4f7d12c03518" alt=""><figcaption><p>Imagem 3 - Painel de configuração do módulo Chat com a barra de abas de canais no topo.</p></figcaption></figure>

#### 📡 Abas de canais

Cada aba corresponde a um canal de entrega. Os canais disponíveis podem incluir:

| Canal             | Descrição                                                      |
| ----------------- | -------------------------------------------------------------- |
| **Padrão**        | Canal padrão do sistema. Serve como base para outros canais.   |
| **WhatsApp**      | Mensagens via WhatsApp Business API.                           |
| **Messenger**     | Mensagens via Facebook Messenger.                              |
| **Instagram**     | Mensagens via Instagram Direct.                                |
| **E-mail**        | Envio de e-mails com remetente, destinatários e corpo em HTML. |
| **WebSDK**        | Canal para integrações via SDK web.                            |
| **Telegram**      | Mensagens via Telegram Bot.                                    |
| **Personalizado** | Canal para integrações customizadas.                           |
| **RCS**           | Rich Communication Services (mensagens ricas por operadoras).  |
| **Alexa**         | Canal para Amazon Alexa.                                       |
| **Assistente**    | Canal para Google Assistant.                                   |

{% hint style="info" %}
Você não precisa configurar todos os canais. Configure apenas os que o seu fluxo utiliza. Se apenas o canal **Padrão** estiver configurado, ele será usado para todos os canais não configurados individualmente.
{% endhint %}

O número de elementos adicionados em cada aba é exibido como um contador colorido na própria aba, facilitando a visualização rápida de quais canais já foram configurados.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FgM9Fus9dtQenK7AcatiU%2F04-contador-elementos-abas.png?alt=media&amp;token=e228f1f9-3c21-4a78-a7f3-44fe0926a98e" alt=""><figcaption><p>Imagem 4 - Barra de abas mostrando o contador de elementos em cada canal (Default e Instagram).</p></figcaption></figure>

#### 📋 Copiar configuração do canal padrão

Em qualquer aba de canal (exceto a aba Padrão), você verá o botão **Preencher com canal padrão**. Esse botão copia todos os elementos já configurados na aba Padrão para o canal selecionado, poupando tempo quando o conteúdo for parecido entre os canais.

{% hint style="warning" %}
**Atenção:** ao usar essa função, todos os elementos já configurados no canal de destino serão substituídos. Uma mensagem de confirmação aparecerá antes de prosseguir.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FONlodGaDo8TtdUGWgnQh%2F05-preencher-canal-padrao-confirmacao.png?alt=media&amp;token=ab8d9c46-0938-4e32-bdad-a22c8e74cd17" alt=""><figcaption><p>Imagem 5 - Confirmação ao usar "Preencher com canal Default" num canal que já tem elementos.</p></figcaption></figure>

***

### ➕ Adicionando elementos ao canal

Dentro de cada aba de canal, você encontra um botão para adicionar elementos à mensagem. Ao clicar nele, uma lista de tipos de elemento é exibida para você escolher o que deseja enviar.

Os elementos são enviados na ordem em que aparecem na tela. Você pode **reordenar os elementos** arrastando-os para cima ou para baixo, ou usando as setas de movimentação (↑↓) ao lado de cada um. Para remover um elemento, clique no ícone de lixeira.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FC7tjIMETzqRWhRinl7dc%2F06-lista-tipos-elemento-icones.png?alt=media&amp;token=00774e98-e265-4e08-8047-0d643e4a34a7" alt=""><figcaption><p>Imagem 6 - Lista de tipos de elemento ao clicar em Adicionar elemento, com ícones de reordenação e exclusão.</p></figcaption></figure>

***

### 📨 Tipos de elemento disponíveis

#### 1️⃣ Texto

Envia uma mensagem de texto simples ao usuário. É o tipo mais utilizado.

**🎯 Propósito**

Enviar mensagens escritas, com ou sem botões de resposta rápida, personalizadas com variáveis do fluxo.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Texto**.
2. No campo **Conteúdo**, escreva a mensagem que o chatbot enviará.
   * Para inserir uma variável, use a sintaxe `{{nome.da.variavel}}` dentro do texto.
3. Se desejar adicionar um rodapé, preencha o campo **Rodapé** (máximo 60 caracteres). Esse campo só aparece quando há botões adicionados.
4. Para adicionar botões, clique em **Adicionar botão** e escolha o tipo:
   * **Resposta:** o usuário clica no botão e uma resposta é enviada ao fluxo.
   * **Link:** o botão abre uma URL no navegador do usuário.
   * **Chamada de voz:** o botão inicia uma ligação telefônica.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FBdzhKmn6NPnV4Tmgsa3N%2F07-elemento-texto-variavel-botoes.png?alt=media&amp;token=7192c7ae-0fcf-468e-b9bf-98b6d83ce183" alt=""><figcaption><p>Imagem 7 - Elemento de Texto configurado com conteúdo, variável e dois botões adicionados.</p></figcaption></figure>

**📌 Resultado esperado**

A mensagem de texto é enviada ao usuário no canal configurado. Se houver botões do tipo **Resposta**, cada botão cria uma saída adicional no nó do canvas, permitindo que o fluxo siga caminhos diferentes conforme a escolha do usuário.

{% hint style="info" %}
**Limites de caracteres no WhatsApp:**

* Com botões: até **1.024 caracteres** no campo Conteúdo.
* Sem botões: até **4.000 caracteres**.

Se você estiver configurando o canal **Padrão** e o texto ultrapassar 1.024 caracteres, uma mensagem de aviso aparecerá sugerindo que você configure o canal WhatsApp separadamente.
{% endhint %}

***

#### 2️⃣ Imagem

Envia uma imagem ao usuário.

**🎯 Propósito**

Compartilhar imagens, fotos de produtos, banners ou qualquer arquivo visual durante a conversa.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Imagem**.
2. No campo **URL**, informe o endereço da imagem ou arraste o arquivo para a área indicada.
   * Uma pré-visualização da imagem aparece abaixo do campo assim que a URL é inserida.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FOuihGqaKS9wWf9JXlGUn%2F08-elemento-imagem-preview.png?alt=media&amp;token=84d7a7a5-6639-4a68-9960-860a9dbbba1d" alt=""><figcaption><p>Imagem 8 - Elemento de Imagem com URL preenchida e pré-visualização exibida abaixo.</p></figcaption></figure>

**📌 Resultado esperado**

A imagem é enviada ao usuário. Se a URL não puder ser carregada, um ícone de espaço reservado será exibido na pré-visualização.

***

#### 3️⃣ Áudio

Envia um arquivo de áudio ao usuário.

**🎯 Propósito**

Compartilhar mensagens de voz, gravações ou qualquer conteúdo em áudio.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Áudio**.
2. No campo **URL**, informe o endereço do arquivo de áudio ou arraste o arquivo para a área indicada.
   * Formatos aceitos: MP3, OGG e outros formatos de áudio.
   * Um reprodutor de áudio aparece para você ouvir o conteúdo antes de salvar.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FbQxpILDMq2mXP2J3aX4i%2F09-elemento-audio-player.png?alt=media&amp;token=8a51dfd1-3ac1-4580-b4a9-ec29b8dd54f7" alt=""><figcaption><p>Imagem 9 - Elemento de Áudio com URL preenchida e reprodutor visível para pré-escuta.</p></figcaption></figure>

**📌 Resultado esperado**

O áudio é enviado ao usuário no chat.

***

#### 4️⃣ Vídeo

Envia um arquivo de vídeo ao usuário.

**🎯 Propósito**

Compartilhar tutoriais, demonstrações ou conteúdo em vídeo diretamente na conversa.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Vídeo**.
2. No campo **URL**, informe o endereço do arquivo de vídeo ou arraste o arquivo para a área indicada.
   * Formatos aceitos: MP4, OGG e outros formatos de vídeo.
   * Um reprodutor de vídeo aparece para pré-visualização.

{% hint style="warning" %}
O arquivo de vídeo não pode ultrapassar **16 MB**. Se o arquivo for maior, uma mensagem de erro aparecerá na tela.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FUOBh3lT0ycQ2HpqEpwCZ%2F10-elemento-video-player.png?alt=media&amp;token=6d38cc4e-5e9f-4a73-ac99-f4cf42f59e94" alt=""><figcaption><p>Imagem 10 - Elemento de Vídeo com URL preenchida e player exibido para pré-visualização.</p></figcaption></figure>

**📌 Resultado esperado**

O vídeo é enviado ao usuário no chat.

***

#### 5️⃣ Arquivo

Envia um documento ou arquivo genérico ao usuário.

**🎯 Propósito**

Compartilhar contratos, PDFs, planilhas ou qualquer outro tipo de documento.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Arquivo**.
2. No campo **URL do arquivo**, informe o endereço do documento. Aceita variáveis do fluxo.
3. No campo **Nome do arquivo**, informe o nome que o destinatário verá ao receber o arquivo (ex.: `proposta-comercial.pdf`). Aceita variáveis do fluxo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FR2XsjkTMl2KPzwi0xfjt%2F11-elemento-arquivo.png?alt=media&amp;token=d9df1f67-5128-4886-8769-628a11bf51df" alt=""><figcaption><p>Imagem 11 - Elemento de Arquivo com URL e nome do arquivo preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

O arquivo é enviado ao usuário com o nome configurado, disponível para download no chat.

***

#### 6️⃣ Contato

Envia um cartão de contato com nome e número de telefone.

**🎯 Propósito**

Compartilhar um número de telefone ou contato de forma estruturada e clicável no chat.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Contato**.
2. Preencha os campos obrigatórios:
   * **Nome do contato:** nome que aparecerá no cartão.
   * **Código do país:** código internacional (ex.: `+55` para Brasil).
   * **Número de telefone:** número do contato.
3. Todos os campos aceitam variáveis do fluxo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FxTpcLAKzDAOgieFjuLvS%2F12-elemento-contato.png?alt=media&amp;token=e0e67e07-6eb9-49c6-9960-835a299a66a2" alt=""><figcaption><p>Imagem 12 - Elemento de Contato com nome, código do país e telefone preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

Um cartão de contato é enviado ao usuário. No WhatsApp, o usuário pode salvar o contato diretamente pelo chat.

***

#### 7️⃣ Localização

Envia um ponto no mapa para o usuário.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp**.
{% endhint %}

**🎯 Propósito**

Compartilhar um endereço ou localização geográfica durante a conversa.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Localização**.
2. Preencha os campos:
   * **Nome:** nome do local (ex.: `Loja Centro`).
   * **Endereço:** endereço completo.
   * **Latitude:** coordenada geográfica (ex.: `-23.5489`).
   * **Longitude:** coordenada geográfica (ex.: `-46.6388`).
3. Todos os campos aceitam variáveis do fluxo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FaZi9j1RXP31OGjZCJF4Y%2F13-elemento-localizacao.png?alt=media&amp;token=5926a6d4-0266-493c-b559-080c053d41f6" alt=""><figcaption><p>Imagem 13 - Elemento de Localização com nome, endereço, latitude e longitude preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

Um mapa com o ponto marcado é enviado ao usuário no WhatsApp.

***

#### 8️⃣ Figurinha

Envia uma figurinha (sticker) ao usuário.

**🎯 Propósito**

Adicionar um toque visual e descontraído à conversa com o envio de uma imagem no formato de figurinha.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Figurinha**.
2. No campo **URL**, informe o endereço da imagem da figurinha.
   * Uma miniatura (80×80 px) é exibida como pré-visualização.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FfU5pELiWBZUuCMgqrpuQ%2F14-elemento-figurinha.png?alt=media&amp;token=935367b1-d0b4-4ef8-a4c4-024dd2aba720" alt=""><figcaption><p>Imagem 14 - Elemento de Figurinha com URL preenchida e miniatura exibida.</p></figcaption></figure>

**📌 Resultado esperado**

A figurinha é enviada ao usuário no chat.

***

#### 9️⃣ Cartão genérico

Envia um carrossel de cartões interativos com imagem, título, subtítulo e botões.

**🎯 Propósito**

Apresentar múltiplas opções ao usuário em formato visual deslizável — ideal para exibir produtos, serviços ou menus de navegação.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Cartão genérico**.
2. Um cartão inicial é criado. Preencha os campos:
   * **URL da imagem:** imagem do cartão (opcional).
   * **Título:** título em destaque **(caso queira envio como carrossel)**.
   * **Subtítulo:** texto complementar.
   * **Botões:** adicione até 3 botões por cartão (tipos: Resposta, Link, Chamada de voz).
3. Para adicionar mais cartões ao carrossel, clique em **Adicionar cartão**.
4. Para reordenar os cartões, arraste-os para a posição desejada.

{% hint style="info" %}
Para canais RCS, é possível ativar a opção de **fallback** no cartão. Quando ativada, um caminho de saída de falha é criado no nó para lidar com erros de entrega.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FVZHj2fq8FXpclkqj14iR%2F15-cartao-generico-carrossel.png?alt=media&amp;token=6ae30fe5-9ec3-436f-bc87-b6021b6cbecf" alt=""><figcaption><p>Imagem 15 - Elemento de cartão genérico com dois cartões configurados no carrossel.</p></figcaption></figure>

**📌 Resultado esperado**

O carrossel de cartões é enviado ao usuário. Cada botão do tipo **Resposta** cria uma saída adicional no nó do canvas.

***

#### 🔟 Lista

Envia uma lista interativa com seções e opções clicáveis.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp**.
{% endhint %}

**🎯 Propósito**

Apresentar um menu estruturado com múltiplas opções agrupadas em seções, ideal para menus de atendimento e seleção de serviços.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Lista**.
2. Preencha os campos:

| Campo                  | O que preencher                                                     |
| ---------------------- | ------------------------------------------------------------------- |
| **Conteúdo**           | Texto da mensagem enviada antes da lista (máximo 1.024 caracteres). |
| **Rodapé**             | Texto exibido abaixo da lista (máximo 60 caracteres). Opcional.     |
| **Rótulo do botão**    | Texto do botão que abre a lista (padrão: "Ver opções").             |
| **Cabeçalho da lista** | Título que aparece no topo da lista ao ser aberta.                  |

3. Na seção **Seções**, adicione grupos de opções:
   * Informe o **título da seção**.
   * Adicione os botões de cada seção com o texto desejado.
   * Arraste as seções e opções para reordená-las.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FRvEyqowTEr32BIpeuu7L%2F16-lista-secoes-opcoes.png?alt=media&amp;token=82df4ac8-fa2d-406a-a6cd-3a8bcbcb2fe0" alt=""><figcaption><p>Imagem 16 - Elemento de lista com duas seções e opções configuradas.</p></figcaption></figure>

**📌 Resultado esperado**

A mensagem com o botão que abre a lista é enviada ao usuário. Cada opção da lista cria uma saída no nó do canvas para o fluxo continuar conforme a escolha do usuário.

{% hint style="info" %}
A lista suporta no máximo **3 seções** e **10 opções no total**.
{% endhint %}

***

#### 1️⃣1️⃣ Produto

Exibe um produto específico do catálogo do WhatsApp Business.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp** e requer um catálogo configurado na conta do WhatsApp Business.
{% endhint %}

**🎯 Propósito**

Mostrar um produto específico ao usuário diretamente na conversa, com botão para adicionar ao carrinho.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Produto**.
2. Preencha os campos:

| Campo              | O que preencher                                        |
| ------------------ | ------------------------------------------------------ |
| **ID do catálogo** | Identificador do catálogo do WhatsApp Business.        |
| **ID do produto**  | Identificador (SKU) do produto no catálogo.            |
| **Conteúdo**       | Descrição da mensagem enviada junto ao produto.        |
| **Rodapé**         | Texto exibido abaixo (máximo 60 caracteres). Opcional. |

3. Todos os campos aceitam variáveis do fluxo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FVj5mCf7BjuuyrJVUaVdV%2F17-produto-catalogo-id.png?alt=media&amp;token=4d92fa4e-c4e6-4900-84c3-a7e8b51e42fb" alt=""><figcaption><p>Imagem 17 - Elemento de produto com ID do catálogo e ID do produto preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

O produto é exibido ao usuário com imagem, nome e preço do catálogo, junto com a mensagem configurada.

***

#### 1️⃣2️⃣ Lista de produtos

Exibe múltiplos produtos organizados em seções.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp** e requer um catálogo configurado.
{% endhint %}

**🎯 Propósito**

Apresentar uma seleção de produtos em um formato estruturado por categorias ou grupos.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Lista de produtos**.
2. Preencha os campos principais:

| Campo              | O que preencher                                      |
| ------------------ | ---------------------------------------------------- |
| **ID do catálogo** | Identificador do catálogo do WhatsApp Business.      |
| **Cabeçalho**      | Título da mensagem exibida ao usuário.               |
| **Conteúdo**       | Descrição da mensagem.                               |
| **Rodapé**         | Texto complementar (máximo 60 caracteres). Opcional. |

3. Adicione **seções** e em cada seção informe o título e os IDs dos produtos que fazem parte dela.

{% hint style="info" %}
Cada seção suporta no máximo **30 produtos**.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2Fw1w61A3YyeZ9myPAtIuh%2F18-lista-produtos-secoes.png?alt=media&amp;token=aa5f3eda-60e8-4b9e-a90b-2aded7ec21b6" alt=""><figcaption><p>Imagem 18 - Elemento de lista de produtos com catálogo, duas seções e IDs configurados.</p></figcaption></figure>

**📌 Resultado esperado**

A lista estruturada de produtos é enviada ao usuário no WhatsApp.

***

#### 1️⃣3️⃣ Catálogo

Exibe o catálogo completo da empresa no WhatsApp.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp** e requer um catálogo configurado.
{% endhint %}

**🎯 Propósito**

Abrir o catálogo do WhatsApp Business diretamente na conversa, com um produto em destaque.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Catálogo**.
2. Preencha os campos:

| Campo              | O que preencher                                      |
| ------------------ | ---------------------------------------------------- |
| **ID do catálogo** | Identificador do catálogo do WhatsApp Business.      |
| **ID do produto**  | Produto em destaque exibido na abertura do catálogo. |
| **Conteúdo**       | Texto da mensagem que acompanha o catálogo.          |
| **Rodapé**         | Texto complementar (máximo 60 caracteres). Opcional. |

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2F8m0v9tRtpeTCI1M8niTs%2F19-catalogo-completo.png?alt=media&amp;token=9a2d7d53-6a06-49ab-843b-999853f6a8be" alt=""><figcaption><p>Imagem 19 - Elemento de catálogo com os campos preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

O usuário recebe a mensagem com um botão que abre o catálogo completo do WhatsApp Business.

***

#### 1️⃣4️⃣ Detalhes do pedido

Envia ao usuário as informações completas de um pedido, incluindo produtos, valores e opções de pagamento.

{% hint style="warning" %}
Este elemento está disponível nos canais **Padrão** e **WhatsApp**.
{% endhint %}

**🎯 Propósito**

Apresentar um resumo detalhado de um pedido com produtos, quantidades, valores e link de pagamento diretamente no chat.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Detalhes do pedido**.
2. Preencha os campos principais:

| Campo                          | O que preencher                                           |
| ------------------------------ | --------------------------------------------------------- |
| **ID de referência do pedido** | Identificador único do pedido. Obrigatório.               |
| **Conteúdo**                   | Texto da mensagem (máximo 1.024 caracteres). Obrigatório. |
| **Rodapé**                     | Texto complementar (máximo 60 caracteres). Opcional.      |
| **URL da imagem**              | Imagem do pedido ou produto principal. Opcional.          |

3. Na seção **Pagamento principal**, escolha o método:
   * **Pix:** informe o código Pix, nome do titular, tipo de chave e a chave Pix.
   * **Boleto:** informe a linha digitável do boleto.
   * **Link de pagamento:** informe a URL do link de pagamento.
   * **Cartão externo:** cria uma saída de pagamento no nó do canvas.
4. Se desejar, adicione um **Pagamento secundário** (opcional) — disponível apenas após configurar o pagamento principal.
5. Na seção **Produtos**, adicione os itens do pedido:
   * **ID do produto**, **Nome**, **Quantidade** e **Valor**.
   * Opcionalmente, informe o **Valor com desconto**.
6. Expanda as **Opções avançadas** para configurar taxas, frete, descontos e validade do pedido.
7. No campo **Total**, informe o valor total do pedido.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FDxLA8lOWyiZTIY7VCPw3%2F20-detalhes-pedido.gif?alt=media&amp;token=88c80e3f-3d9e-4437-8c06-79e28d0cc46a" alt=""><figcaption><p>Video 1 - Preenchimento completo do elemento Detalhes do pedido, com produtos, pagamento via Pix e total.</p></figcaption></figure>

**📌 Resultado esperado**

O usuário recebe no chat um resumo completo do pedido com os produtos listados, o valor total e a opção de pagamento configurada.

{% hint style="info" %}
Todos os campos de texto aceitam variáveis do fluxo com a sintaxe `{{nome.da.variavel}}`, permitindo preencher dinamicamente os dados do pedido com informações coletadas durante a conversa.
{% endhint %}

***

#### 1️⃣5️⃣ Status do pedido

Envia uma atualização sobre o estado atual de um pedido.

{% hint style="warning" %}
Este elemento está disponível nos canais **Padrão** e **WhatsApp**.
{% endhint %}

**🎯 Propósito**

Informar ao usuário a situação atual de um pedido, como "em processamento", "enviado" ou "concluído".

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Status do pedido**.
2. Preencha os campos:

| Campo                          | O que preencher                                                                                                 |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| **ID de referência do pedido** | Identificador único do pedido. Obrigatório.                                                                     |
| **Conteúdo**                   | Texto da mensagem (máximo 1.024 caracteres). Obrigatório.                                                       |
| **Rodapé**                     | Texto complementar (máximo 60 caracteres). Opcional.                                                            |
| **Status do pedido**           | Selecione: pendente, em processamento, parcialmente enviado, enviado, concluído ou cancelado.                   |
| **Descrição do status**        | Texto explicativo sobre o status (máximo 120 caracteres). Opcional.                                             |
| **Status do pagamento**        | Selecione: pendente, capturado ou falhou. Opcional.                                                             |
| **Data personalizada**         | Ative a opção para informar uma data específica do evento. Se desativado, a data atual é usada automaticamente. |

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2Fo5eMPsdauUYsXUl6YWhp%2F21-status-pedido.gif?alt=media&amp;token=2b27e7d4-c145-44f7-8ae1-4bf1d0d1492d" alt=""><figcaption><p>Video 2 - Preenchimento do elemento Status do pedido com status do pedido e status do pagamento.</p></figcaption></figure>

**📌 Resultado esperado**

O usuário recebe uma mensagem estruturada com as informações de rastreamento e status do pedido.

***

#### 1️⃣6️⃣ Modelo de mensagem (HSM)

Envia uma mensagem usando um template pré-aprovado pelo WhatsApp (HSM — Highly Structured Message).

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp** e requer que os templates estejam criados e aprovados na conta do WhatsApp Business.
{% endhint %}

**🎯 Propósito**

Iniciar ou retomar uma conversa no WhatsApp usando mensagens padronizadas e aprovadas pela Meta — obrigatório para contatos fora da janela de 24 horas.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Modelo de mensagem**.
2. No campo **Canal**, selecione a conta do WhatsApp Business configurada na plataforma.
3. No campo **Template**, escolha o modelo desejado na lista de templates aprovados.
4. Uma pré-visualização do template é exibida em modo somente leitura.
5. Preencha os **parâmetros** de cada parte do template (cabeçalho, corpo, botões) com os valores desejados — que podem ser variáveis do fluxo.
6. Se desejar tratar falhas de entrega, ative a opção **Ativar fallback**. Uma saída de falha (em vermelho) será criada no nó do canvas.
7. Ative **Forçar execução ao responder quando transferido** se necessário para o seu fluxo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FwJ8rXCArt1GKC0Uwv91H%2F22-hsm-template-parametros.png?alt=media&amp;token=73b5b08e-53ba-4ae6-9112-86941ee46e24" alt=""><figcaption><p>Imagem 20 - Elemento de modelo de mensagem com template selecionado, pré-visualização e parâmetro preenchido.</p></figcaption></figure>

**📌 Resultado esperado**

A mensagem template é enviada ao usuário. Se o template tiver botões de resposta rápida ou de navegação para fluxos, cada um cria uma saída adicional no nó do canvas.

{% hint style="info" %}
Ao selecionar um template com carrossel, campos de configuração para cada cartão do carrossel serão exibidos automaticamente.
{% endhint %}

***

#### 1️⃣7️⃣ Fluxo interativo (Flows)

Abre um fluxo interativo do WhatsApp diretamente na conversa.

{% hint style="warning" %}
Este elemento está disponível apenas no canal **WhatsApp** e requer que os fluxos interativos estejam criados na conta do WhatsApp Business.
{% endhint %}

**🎯 Propósito**

Guiar o usuário por uma experiência interativa nativa do WhatsApp, como preenchimento de formulários ou seleção de opções em tela cheia.

**✅ Como fazer na tela**

1. Na aba **WhatsApp**, clique em **Adicionar elemento** e selecione **Fluxo interativo**.
2. No campo **Canal**, selecione a conta do WhatsApp Business.
3. No campo **Fluxo**, escolha o fluxo interativo desejado.
4. Se necessário, ative as opções de fallback e execução forçada.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FtLyFS905yrL1xmqOuLxg%2F23-flows-canal-fluxo-selecionados.png?alt=media&amp;token=6ef2a4fd-99d4-4a26-b120-3c513a069f3c" alt=""><figcaption><p>Imagem 21 - Elemento de modelo de mensagem com flows selecionado, pré-visualização e parâmetros preenchidos</p></figcaption></figure>

**📌 Resultado esperado**

O usuário recebe uma mensagem com o botão que abre o fluxo interativo diretamente no WhatsApp.

***

#### 1️⃣8️⃣ E-mail completo

Envia um e-mail completo com remetente, destinatários, assunto, corpo HTML e anexos.

{% hint style="warning" %}
Este elemento está disponível **apenas no canal E-mail** e requer uma integração de e-mail configurada na plataforma.
{% endhint %}

**🎯 Propósito**

Enviar e-mails personalizados e formatados em HTML a partir do fluxo do chatbot, com suporte a cópia oculta e anexos.

**✅ Como fazer na tela**

1. Na aba **E-mail**, clique em **Adicionar elemento** e selecione **E-mail completo**.
2. Preencha os campos do painel:

| Campo               | O que preencher                                                                                            |
| ------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Canal de e-mail** | Selecione a integração de e-mail cadastrada na plataforma. Obrigatório.                                    |
| **Destinatário**    | Informe o endereço de e-mail do destinatário. Aceita variáveis do fluxo. Obrigatório.                      |
| **CC**              | Endereços para cópia. Separe múltiplos e-mails por vírgula. Opcional.                                      |
| **CCO**             | Endereços para cópia oculta. Os destinatários principais não verão esses endereços. Opcional.              |
| **Assunto**         | Assunto do e-mail. Aceita variáveis do fluxo. Obrigatório.                                                 |
| **Corpo do e-mail** | Editor de texto rico com formatação HTML. Obrigatório.                                                     |
| **Assinatura**      | Assinatura do e-mail — use uma variável ou escreva uma assinatura personalizada com o editor. Obrigatório. |

3. Para adicionar anexos, arraste os arquivos para a área de **Anexos** ou clique para fazer o upload.
   * Os arquivos enviados aparecem como etiquetas acima da área de upload.
   * Para remover um anexo, clique no botão de exclusão ao lado da etiqueta.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2F8CpdAiN3uNBV0FWrWXS7%2F24-email-completo.png?alt=media&amp;token=0414aeae-3d9e-4af3-8e4e-09d414bb4eab" alt=""><figcaption><p>Imagem 22 - Elemento de e-mail completo com destinatário, assunto, corpo e assinatura preenchidos, e um arquivo anexado exibido como etiqueta.</p></figcaption></figure>

**📌 Resultado esperado**

O e-mail é enviado ao destinatário com o corpo HTML formatado, a assinatura e os anexos, no momento em que o fluxo executar este nó.

{% hint style="info" %}
O campo **Destinatário** pode ser preenchido com uma variável do fluxo (ex.: `{{input.emailCliente}}`) para enviar o e-mail para o endereço coletado durante a conversa.
{% endhint %}

***

#### 1️⃣9️⃣ Evento

Dispara um evento personalizado para a interface web integrada.

{% hint style="warning" %}
Este elemento está disponível **apenas no canal WebSDK**.
{% endhint %}

**🎯 Propósito**

Enviar um evento com dados estruturados para a página web onde o chatbot está incorporado, permitindo que a interface execute ações personalizadas.

**✅ Como fazer na tela**

1. Na aba **WebSDK**, clique em **Adicionar elemento** e selecione **Evento**.
2. No campo **Nome do evento**, informe o identificador do evento (ex.: `abrirModal`). Aceita variáveis do fluxo.
3. No campo **Payload**, insira o objeto JSON com os dados que acompanharão o evento.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FdV6ue9aW2HrebypzXHQ8%2F25-evento-websdk.png?alt=media&amp;token=d13c3655-54f2-4c55-bfe3-cc776419df44" alt=""><figcaption><p>Imagem 23 - Elemento de evento com nome do evento e payload JSON preenchidos.</p></figcaption></figure>

**📌 Resultado esperado**

O evento é disparado para a página web com os dados configurados no payload.

***

#### 2️⃣0️⃣ Webview

Abre ou fecha uma janela de conteúdo web dentro do chat.

{% hint style="warning" %}
Este elemento está disponível **apenas no canal WebSDK**.
{% endhint %}

**🎯 Propósito**

Exibir uma URL dentro do chat como uma janela embutida (webview), ou fechar uma janela que já esteja aberta.

**✅ Como fazer na tela**

1. Na aba **WebSDK**, clique em **Adicionar elemento** e selecione **Webview**.
2. Ative ou desative a opção:
   * **Ativado:** abre a webview. O campo **URL** aparecerá para você informar o endereço a ser exibido. Aceita variáveis do fluxo.
   * **Desativado:** fecha a webview que estiver aberta.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2Fz8zAlvbwfrE4tUViXViL%2F26-webview.png?alt=media&amp;token=b3e75d86-8a17-4f56-ae6e-d4fc0dd4c7ff" alt=""><figcaption><p>Imagem 24 - Elemento de webview com a opção ativada e o campo de URL preenchido.</p></figcaption></figure>

**📌 Resultado esperado**

A janela de webview é aberta com a URL configurada, ou fechada, conforme o estado definido.

***

#### 2️⃣1️⃣ Teclado

Bloqueia ou libera o teclado do usuário no chat.

**🎯 Propósito**

Controlar se o usuário pode ou não digitar mensagens livremente durante o fluxo — útil para forçar o uso de botões em vez de texto livre.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Teclado**.
2. Use o interruptor para definir o comportamento:
   * **Ativado:** o teclado do usuário fica bloqueado — o usuário não pode digitar.
   * **Desativado:** o teclado é liberado para o usuário digitar livremente.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FtyUr1XOqq4buosmKHzu4%2F27-teclado.png?alt=media&amp;token=92e3263e-fc53-4c31-8796-3a63b31607ef" alt=""><figcaption><p>Imagem 25 - Elemento de teclado com o interruptor na posição "ativado" (bloqueado).</p></figcaption></figure>

**📌 Resultado esperado**

O teclado do usuário é bloqueado ou liberado conforme a configuração.

***

#### 2️⃣2️⃣ Atraso

Insere uma pausa entre os elementos antes que o próximo seja enviado.

**🎯 Propósito**

Dar um tempo de espera entre mensagens, criando uma sensação mais natural de conversa ou aguardando o processamento de uma informação.

**✅ Como fazer na tela**

1. Clique em **Adicionar elemento** e selecione **Atraso**.
2. Use o controle deslizante ou o campo numérico para definir o tempo de espera, de **1 a 10 segundos**.

{% hint style="warning" %}
A soma de todos os elementos de **Atraso** em um mesmo nó não pode ultrapassar **30 segundos**.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FSwpaco3g5YK4BVFsRAd5%2F28-atraso.png?alt=media&amp;token=47e29aec-ceb4-4b03-a283-3fb8fba37ae5" alt=""><figcaption><p>Imagem 26 - Elemento de atraso com o controle deslizante posicionado em 3 segundos.</p></figcaption></figure>

**📌 Resultado esperado**

O fluxo aguarda o tempo configurado antes de enviar o próximo elemento ou prosseguir para o próximo nó.

***

### ⚡ Respostas rápidas

As **Respostas rápidas** são botões exibidos abaixo dos elementos de mensagem, permitindo que o usuário selecione uma opção com um toque sem precisar digitar.

#### 🎯 Propósito

Oferecer atalhos de navegação ao usuário ao final das mensagens, direcionando o fluxo para caminhos diferentes conforme a escolha.

#### ✅ Como configurar na tela

1. Após adicionar ao menos um elemento ao canal, um botão **Adicionar resposta rápida** aparece na parte inferior do canal configurado.
2. Clique em **Adicionar resposta rápida**. Um bloco de botão é criado.
3. Clique no botão para editar:
   * **Rótulo:** texto exibido no botão para o usuário.
   * **Sinônimos:** textos alternativos que o sistema reconhece como equivalentes a essa resposta.
4. Para reordenar as respostas rápidas, arraste-as para a posição desejada.
5. Para remover uma, clique no menu da resposta e selecione **Excluir**.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2Fr060vh9qgnxnbctUViVQ%2Fimage.png?alt=media&amp;token=7f1fb2e5-f74f-47c0-acee-f568d9cc5752" alt=""><figcaption><p>Imagem 27 - Painel de configuração com três respostas rápidas adicionadas.</p></figcaption></figure>

#### 📌 Resultado esperado

Cada resposta rápida adicionada cria uma **saída verde** adicional no nó do canvas, permitindo que o fluxo siga por um caminho específico conforme a opção escolhida pelo usuário.

***

### ⏳ Aguardar resposta do usuário

A seção **Aguardar resposta do usuário** permite que o fluxo pause e aguarde que o usuário envie uma mensagem — com ou sem validação do conteúdo.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FRwfGNyPWOHsmkNQn2CPz%2F30-aguardar-resposta-validacao.png?alt=media&amp;token=22a18b8c-6d36-4417-bb7c-4fed93e7078d" alt=""><figcaption><p>Imagem 28 - Seção "Aguardar resposta do usuário" ativada dentro de um canal, com as opções de validação visíveis.</p></figcaption></figure>

#### ✅ Como configurar na tela

1. Dentro de um canal, ative o interruptor **Aguardar resposta do usuário**.
2. No campo **Validar resposta**, escolha o tipo de validação desejada:
   * **Sem validação:** qualquer resposta do usuário é aceita e o fluxo avança.
   * Outros tipos: o sistema valida o formato da resposta (ex.: e-mail válido, número de telefone, data, etc.).
3. Ao passar o cursor sobre cada opção, exemplos de respostas aceitas e rejeitadas são exibidos.
4. Se você escolheu um tipo de validação, aparecerão os campos:
   * **Número de tentativas:** quantas vezes o bot tenta novamente caso a resposta seja inválida (de 0 a 10).
   * **Mensagem de nova tentativa:** texto enviado ao usuário antes de cada nova tentativa.

{% hint style="info" %}
Quando o número de tentativas é maior que zero, uma saída adicional vermelha chamada **"Tentativas esgotadas"** é criada no nó do canvas, permitindo direcionar o usuário para outro caminho após esgotar as tentativas.
{% endhint %}

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FdF5iu6XyXlKUPFE0Ed5g%2F31-validacao-tentativas-mensagem.png?alt=media&amp;token=7b181280-2c43-47fd-a76e-a1f9426b6dad" alt=""><figcaption><p>Imagem 29 - Campos de validação com o tipo "E-mail" selecionado, número de tentativas e mensagem de nova tentativa preenchidos.</p></figcaption></figure>

***

### ❓ Mensagem fora do contexto

A seção **Tratar mensagem fora do contexto** permite definir o comportamento do fluxo quando o usuário envia uma mensagem que não corresponde a nenhuma das respostas rápidas disponíveis ou intenções reconhecidas.

#### ✅ Como configurar na tela

1. Ative o interruptor **Tratar mensagem fora do contexto**.
2. Preencha os campos:
   * **Número de tentativas:** quantas vezes o bot tenta novamente antes de seguir por outro caminho.
   * **Mensagem de nova tentativa:** texto enviado ao usuário antes de cada nova tentativa.

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FFDdeWehgwHbsqqsaRXag%2F32-fora-contexto-tentativas.png?alt=media&amp;token=82b89e8e-5871-43f7-8b81-95976c1803d1" alt=""><figcaption><p>Imagem 30 - Seção "Tratar mensagem fora de contexto" ativada, com número de tentativas e mensagem de nova tentativa preenchidos.</p></figcaption></figure>

#### 📌 Resultado esperado

Uma saída adicional verde chamada **"Fora do contexto"** é criada no nó do canvas. O fluxo segue por essa saída quando o usuário não seleciona nenhuma opção disponível e também não dispara uma intenção de NLP.

***

### 🔀 Saídas do módulo no fluxo

O nó do módulo Chat pode ter várias saídas dependendo de como ele está configurado:

| Saída                                | Cor      | Quando aparece                                                                         |
| ------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
| **Continuar automaticamente**        | Verde    | Sempre presente. O fluxo segue automaticamente após todos os elementos serem enviados. |
| **\[Resposta rápida]**               | Verde    | Uma saída por cada resposta rápida adicionada.                                         |
| **Aguardar resposta do usuário**     | Verde    | Quando a opção de aguardar está ativada.                                               |
| **Tentativas esgotadas**             | Vermelho | Quando validação está ativa e o número de tentativas é maior que zero.                 |
| **Fora do contexto**                 | Verde    | Quando a opção "Tratar mensagem fora do contexto" está ativada.                        |
| **\[Botão de resposta de template]** | Verde    | Uma saída por botão de resposta rápida ou de fluxo nos templates HSM.                  |
| **Pagamento externo**                | Verde    | Quando o método de pagamento "Cartão externo" é selecionado em Detalhes do pedido.     |
| **Fallback**                         | Vermelho | Quando a opção de fallback está ativada em templates HSM, Flows ou Cartão RCS.         |

<figure><img src="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FUxg5oqsgggy1GPNcSkPb%2F33-canvas-multiplas-saidas.png?alt=media&amp;token=29703e53-5efe-460a-8143-54aa3a170525" alt=""><figcaption><p>Imagem 31 - Nó Chat no canvas com múltiplas saídas visíveis: resposta rápida, aguardar resposta do usuário e tentativas esgotadas.</p></figcaption></figure>

***

### 💡 Dicas úteis

* **Use variáveis em todos os campos de texto** com a sintaxe `{{nome.da.variavel}}` para personalizar as mensagens com informações coletadas durante a conversa — como nome do cliente, número do protocolo ou e-mail.
* **Configure canais separados quando necessário:** o WhatsApp tem limites de caracteres e tipos de elementos diferentes de outros canais. Use a aba WhatsApp para mensagens específicas em vez de adaptar tudo no canal Padrão.
* **Reordene os elementos** arrastando-os ou usando as setas ↑↓ para controlar a ordem em que as mensagens são enviadas.
* **Combine elementos e respostas rápidas:** um texto explicativo seguido de respostas rápidas cria menus de navegação simples e eficientes.
* **Use Atraso com moderação:** delays pequenos (2–3 segundos) tornam a conversa mais natural, mas delays excessivos podem frustrar o usuário.
* **Fallback em templates HSM:** sempre configure a saída de fallback em templates HSM para lidar com falhas de entrega fora da janela de atendimento do WhatsApp.
* **Estatísticas no canvas:** quando o fluxo já foi executado, o nó exibe as métricas de **enviados**, **entregues** e **lidos** por elemento, diretamente no canvas.

***

### 📋 Caso de uso

**Cenário:** Uma loja virtual usa um chatbot para acompanhar pedidos. Ao final do atendimento, o bot envia ao cliente um resumo do pedido com o link de pagamento via WhatsApp e, ao mesmo tempo, dispara um e-mail de confirmação com os detalhes do pedido.

**Configuração principal:**

1. **Adicionar o módulo Chat ao fluxo:**
   * Após o nó que registra o pedido, adicione o módulo **Chat** ao fluxo.
2. **Configurar a aba WhatsApp:**
   * Clique na aba **WhatsApp**.
   * Adicione o elemento **Detalhes do pedido**.
   * No campo **ID de referência**, use a variável `{{pedido.id}}`.
   * No campo **Conteúdo**, escreva: `Olá, {{cliente.nome}}! Seu pedido foi registrado com sucesso.`
   * No campo **Pagamento principal**, selecione **Link de pagamento** e informe `{{pedido.linkPagamento}}`.
   * Adicione os produtos usando as variáveis `{{produto.nome}}`, `{{produto.quantidade}}` e `{{produto.valor}}`.
   * Preencha o campo **Total** com `{{pedido.total}}`.
3. **Configurar a aba E-mail:**
   * Clique na aba **E-mail**.
   * Adicione o elemento **E-mail completo**.
   * Selecione o **Canal de e-mail** configurado na plataforma.
   * No campo **Destinatário**, use `{{cliente.email}}`.
   * No campo **Assunto**, escreva: `Confirmação do pedido #{{pedido.id}}`.
   * No editor **Corpo do e-mail**, escreva o HTML de confirmação com as variáveis do pedido.
4. **Adicionar resposta rápida para acompanhamento:**
   * Na aba **WhatsApp**, adicione uma resposta rápida com o rótulo **"Ver status do pedido"**.
   * Conecte a saída dessa resposta a um nó de status do pedido.
5. **Conectar as saídas:**
   * Conecte a saída **Continuar automaticamente** ao nó de encerramento do atendimento.

**Resultado esperado no fluxo:** O cliente recebe no WhatsApp um resumo completo do pedido com o link de pagamento e o botão para acompanhar o status. Ao mesmo tempo, um e-mail de confirmação é enviado para o endereço cadastrado, tudo em um único nó do fluxo.

***

### ✅ Resumo

* O módulo **Chat** é o principal nó de envio de mensagens do Builder, suportando mais de 20 tipos de elemento em múltiplos canais simultaneamente.
* Cada canal (WhatsApp, E-mail, Instagram, etc.) pode ter uma configuração **independente** — você define o que enviar para cada canal dentro do mesmo nó.
* Elementos como **Resposta rápida**, **Modelo de mensagem (HSM)** e **Lista** criam saídas adicionais no nó, permitindo criar fluxos ramificados com base na escolha do usuário.
* A opção **Aguardar resposta do usuário** com validação permite garantir que a informação coletada está no formato correto antes de avançar o fluxo.
* Todos os campos de texto aceitam **variáveis do fluxo** com a sintaxe `{{nome.da.variavel}}`, tornando as mensagens personalizadas e dinâmicas.