> For the complete documentation index, see [llms.txt](https://docs.chatlayer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/message-components.md).

# Mensagem

Adicione um bloco de Mensagem por [arrastando e soltando-o](https://docs.chatlayer.ai/buildabot/bot-navigation/bot-builder/flows/canvas-functionalities#drag-and-drop) no seu fluxo.

<figure><img src="/files/c29ed0c75ca10ffdadaa7509ecc8f00546dd44e9" alt=""><figcaption><p>O bloco de Mensagem.</p></figcaption></figure>

## Limites de caracteres

O Chatlayer indica quantos caracteres ainda são permitidos no canto inferior direito de qualquer campo de texto.

A única exceção é para [**Carrosséis**](#carousel), que mostram a quantidade de caracteres que você já digitou e não o limite de caracteres.

<figure><img src="/files/6bf054a23d21f0f710600ee37cb40c17f8ed91cf" alt="" width="327"><figcaption><p>Escreva o bloco de Mensagem respeitando os limites de caracteres indicados.</p></figcaption></figure>

{% hint style="warning" %}
Observe que, no Facebook Messenger, o limite é rigoroso de 20 caracteres para um [botão](#buttons) rótulo. Se o rótulo do seu botão for maior, ele será cortado e exibido com reticências. Saiba mais sobre nossas [limitações dos canais](https://developers.sinch.com/docs/conversation/message-types/).
{% endhint %}

{% hint style="info" %}
Para todos os outros canais, o limite de caracteres é baseado em boas práticas. Recomendamos usar menos caracteres do que o limite, mas isso não é obrigatório.
{% endhint %}

## Etapas de Mensagem <a href="#text" id="text"></a>

### Mensagem de texto

As mensagens de texto são os componentes mais simples. A maioria dos canais as mostrará como balões de fala.

<figure><img src="/files/6bf054a23d21f0f710600ee37cb40c17f8ed91cf" alt="" width="327"><figcaption><p>Etapa de mensagem de texto.</p></figcaption></figure>

### Botões

Botões são uma forma útil de conduzir a conversa, oferecendo ao usuário um conjunto limitado de opções. Você pode adicionar no máximo três botões a uma mensagem, com diferentes [tipos de botão](#button-types).

<figure><img src="/files/b8b421d32ee7a9ce6881861794a2463f5ebc83d0" alt="" width="328"><figcaption><p>Etapa de botões.</p></figcaption></figure>

<details>

<summary>Tipos de botão</summary>

Há 4 tipos diferentes de botões:

* **Ir para**: Quando este botão é clicado, a conversa vai para um novo bloco. Opcionalmente, você pode adicionar combinações de chave-valor a um botão. Elas definirão variáveis dependendo de qual botão o usuário clicou. Essas variáveis podem então ser usadas posteriormente para direcionar blocos, fazer uma chamada de API ou renderizar texto específico.
* **URL**: você pode vincular um botão a uma URL externa.
* **Chamar**: este botão iniciará uma chamada se o usuário estiver usando um dispositivo móvel.
* **Webview**: este botão abrirá uma webview (ou uma nova janela do navegador, dependendo do canal) com a URL configurada como destino. Os parâmetros que você configurar para este botão serão convertidos em JSON e anexados à URL como uma string codificada em Base64. É possível decodificar essa string usando a `atob` função JavaScript.

<img src="/files/cf0f9758a96c5ea94b853e9b1eb3788145a32b7f" alt="Button types on Chatlayer" data-size="original">

</details>

### Mídia

Com a **Mídia** etapa, você pode permitir que o bot envie arquivos aos seus usuários.

<figure><img src="/files/38365f747bb63661d3a44cb4b5f858f8c3661cca" alt="" width="375"><figcaption><p>Etapa de mídia.</p></figcaption></figure>

<details>

<summary>Tipos de mídia</summary>

* **Imagens**: todos os tipos comuns de imagem, como jpg, png e gif, são compatíveis com nossa plataforma.
* **Vídeo**: vídeos estão disponíveis no [Emulador](/chatlayer-documentation-pt-br/buildabot/emulator.md), [W](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md)[eb ](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md)e no canal do Facebook. Confira [este artigo](https://docs.chatlayer.ai/support/solving-bot-issues/3.-media-upload-not-working) para adicionar vídeos ao seu bot. Os seguintes formatos de vídeo são compatíveis:
  * mp4
  * ogv
  * webm
* **Áudio**: a mídia de áudio está disponível no [Emulador](/chatlayer-documentation-pt-br/buildabot/emulator.md), no [Web](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md) canal e [Facebook Messenger](/chatlayer-documentation-pt-br/channels/all-channels/facebook.md). Atualmente, suportamos apenas MP3 como formato de áudio.
* **Arquivos**: anexos de arquivo estão disponíveis em [Facebook Messenger](/chatlayer-documentation-pt-br/channels/all-channels/facebook.md). Atualmente, apenas PDF é compatível. Se você enviar o arquivo diretamente na plataforma, há um limite de tamanho de arquivo de 10 MB. Se você usar uma URL direta para o arquivo, não há limite de tamanho de arquivo.

</details>

{% hint style="warning" %}
Está com dificuldade para adicionar um vídeo externo ao seu bot? Confira [este ](https://docs.chatlayer.ai/tips-and-best-practices/solving-bot-issues/3.-media-upload-not-working)artigo.
{% endhint %}

{% hint style="warning" %}
Certifique-se de remover espaços dos arquivos de mídia enviados; isso pode fazer com que eles não sejam exibidos corretamente.
{% endhint %}

{% hint style="info" %}
Recomendamos que os arquivos de mídia compartilhados no Facebook Messenger tenham menos de 5 MB, pois o Facebook parece ter dificuldade em lidar com arquivos maiores com desempenho aceitável.
{% endhint %}

### Respostas rápidas

Respostas rápidas funcionam de forma semelhante aos botões. Elas são exibidas horizontalmente, lado a lado, em um contêiner rolável. Isso significa que você pode adicionar quantas respostas rápidas achar necessário.

<figure><img src="/files/10b979eb1a3ba2f70b9ab1e1da6d3497ab77503e" alt="" width="330"><figcaption></figcaption></figure>

<details>

<summary>Configurações de respostas rápidas</summary>

* **Ícone**: opcionalmente, você pode adicionar um ícone a uma resposta rápida especificando sua URL.
* **Ir para**: para cada resposta rápida, você precisa definir um próximo bloco a ser visitado no fluxo. Em outras palavras, você criará uma [Conexão de ir para](/chatlayer-documentation-pt-br/buildabot/flow-logic/go-to-connections.md).
* **Variáveis**: opcionalmente, [variáveis](/chatlayer-documentation-pt-br/navegacao/settings/secure-variables-gdpr.md) podem ser definidas dependendo de qual botão o usuário clicou. Essas variáveis podem então ser usadas posteriormente para direcionar blocos, fazer uma chamada de API ou renderizar texto específico.

</details>

{% hint style="info" %}
Observe que **Respostas rápidas** apenas vincula a outro bloco. Para vincular seu botão a qualquer outra coisa, use [**Botões**](#buttons).
{% endhint %}

### Carrossel

Carrosséis são uma forma de visualizar opções, com ou sem imagens e botões.

Os botões em Carrosséis são os mesmos que os botões normais [**Botões**](#buttons) e usam as mesmas propriedades, como payloads e URL, com a adição de um botão extra de compartilhamento.

<figure><img src="/files/a46eaf95110d86bd1344b43b81ace9188978a083" alt="" width="375"><figcaption><p>Etapa de carrossel.</p></figcaption></figure>

{% hint style="success" %}
Você está usando Carrosséis no seu canal RCS? Veja como você pode [aproveitá-los ao máximo](/chatlayer-documentation-pt-br/channels/sinch-conversation-api-beta/make-the-most-of-rcs-with-carousels.md).
{% endhint %}

<details>

<summary>Botão de compartilhar</summary>

O botão de compartilhar abre um bloco de compartilhamento no Facebook Messenger, permitindo que as pessoas compartilhem balões de mensagem (também conhecidos como cards de carrossel) com seus amigos.

Quando um novo usuário recebe um balão de mensagem, ele pode compartilhá-lo com seus amigos tocando no mesmo botão de compartilhar. Ao tocar no botão de postback, o usuário é levado para a página inicial do bot.

Você só pode usar o botão de compartilhar em itens de modelos genéricos (anteriormente chamados de carrosséis) e apenas itens com no máximo uma URL podem ser compartilhados pelo Facebook. Não é possível alterar o título do botão: o Facebook Messenger traduzirá o botão de acordo com a configuração de idioma preferida do perfil do usuário.

<img src="/files/3d96fa98a151bf80cc5f8d08c730bd2b94e2d4ed" alt="" data-size="original">

</details>

### Lista

A etapa de Lista é uma etapa que permite apresentar uma lista de itens, exibida verticalmente.

Cada item pode mostrar um botão que pode ser usado como uma chamada para ação (postback). Você também pode fornecer uma URL que se abre quando um item é tocado.

Cada mensagem de modelo de lista também pode ter até um botão global que será exibido abaixo da lista de itens.

<details>

<summary>Estilos de lista</summary>

As listas podem ser exibidas em 2 estilos diferentes:

* **Grande** listas mostram o primeiro item com uma imagem de capa e sobreposição de texto. Isso é útil se você quiser destacar o primeiro item em relação aos outros.

<img src="/files/c8a2362cd66ec07e4d19499ad13638998664a910" alt="" data-size="original">

* **Compacta** listas mostram cada item da mesma forma. Isso é útil para apresentar uma lista de itens em que nenhum item é exibido com mais destaque.

<img src="/files/a3ac88617de04be692cd06e8476fc47023963abc" alt="" data-size="original">

</details>

### Envio de arquivo

Use o modelo de envio de arquivo para permitir que os usuários enviem um arquivo diretamente do dispositivo deles para o seu bot.

{% hint style="info" %}
Este modelo só funciona no canal do widget da web V1. Para qualquer outro canal, você pode usar o tipo de formato 'image' na [Coletar entrada](/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/user-input-bot-dialog.md) bloco.
{% endhint %}

<figure><img src="/files/76c3524a94ce2fd6637ab5dc6bb628bb8ea4c04b" alt="" width="333"><figcaption><p>etapa de mensagem de envio de arquivo.</p></figcaption></figure>

Configurar o envio de arquivo como mostrado acima exibirá um botão de upload na conversa:

<img src="/files/4c8d6c2b131e7f4e9789a5a52b0b0379f984507c" alt="" width="375">

<details>

<summary>Observações sobre envio de arquivo</summary>

* Se o envio falhar porque houve um problema com a conexão ou porque o arquivo escolhido pelo usuário era maior que 10 MB, o bot irá para o bloco "falha no envio".
* A URL onde o arquivo enviado é armazenado pode ser encontrada na `{uploadedFileUrl}` variável na [sessão do usuário](https://docs.chatlayer.ai/quickstart/tutorials/leadzy-tutorial/3.-collect-and-display-user-input#check-the-variable-in-the-user-session). Você pode reutilizar essa variável para mostrar o arquivo que o usuário enviou usando a [Mídia](#attachments) etapa. Como alternativa, você pode recuperar a URL com um [plugin de API](/chatlayer-documentation-pt-br/integrateandcode/custom-back-end-integrations.md) para armazenar os arquivos em seus servidores.
* Os arquivos enviados são mantidos nos servidores do Chatlayer por 30 dias, após os quais ficarão automaticamente inacessíveis.

</details>

### Texto rico

Rich text permite ir além das mensagens de texto e estilizar seu texto da maneira que quiser. Você também pode adicionar links da web usando o editor de rich text.

{% hint style="warning" %}
Rich text só é visível no [Web](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md) canal. Os outros canais não suportam esse tipo de texto.
{% endhint %}

<figure><img src="/files/75beba14c292774b4cf4e83f615faffe6a09c501" alt="" width="326"><figcaption><p>Etapa de mensagem rich text.</p></figcaption></figure>

<details>

<summary>Estilos de rich text</summary>

O editor rich text permite usar os seguintes estilos:

* Parágrafo
* Título 1
* Título 2
* Título 3
* Título 4
* Lista com marcadores
* Lista ordenada (= lista numerada)

E formatar o texto das seguintes maneiras:

* **Negrito**
* *Itálico*
* Sublinhado

Você também pode adicionar hiperlinks (links da web) que levam a uma página externa ou a um local específico na sua conversa.

Para criar um hiperlink em uma palavra ou frase, selecione-a e depois clique no ícone de corrente à direita abaixo. Uma janela pop-up aparecerá onde você pode inserir o endereço do link. Depois, clique em 'salvar'.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/message-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.