# Mensagem

Adicione um bloco de Mensagem arrastando e soltando-o [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="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FPJIl1HTZOSfhyWDDWqEu%2FScreenshot%202024-06-24%20at%2016.11.56.png?alt=media&#x26;token=cf9ded9a-a4b2-4454-b8a8-6932e5ba0067" alt=""><figcaption><p>O bloco 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 o número de caracteres que você já inseriu e não o limite de caracteres.&#x20;

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F9nY5EjUU17esyjaJ0AOZ%2FScreenshot%202024-06-24%20at%2016.13.54.png?alt=media&#x26;token=a5ddd1f6-e4f7-4649-b7b1-0e0290a16255" alt="" width="327"><figcaption><p>Escreva o bloco de Mensagem respeitando os limites de caracteres indicados.</p></figcaption></figure>

{% hint style="warning" %}
Observe que para o Facebook Messenger, os limites são estritos: 20 caracteres para um [rótulo](#buttons) de botão. 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 não é obrigatório.
{% endhint %}

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

### Mensagem de texto

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F9nY5EjUU17esyjaJ0AOZ%2FScreenshot%202024-06-24%20at%2016.13.54.png?alt=media&#x26;token=a5ddd1f6-e4f7-4649-b7b1-0e0290a16255" alt="" width="327"><figcaption><p>Etapa de mensagem de texto.</p></figcaption></figure>

### Botões

Botões são uma maneira útil de orientar 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="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FEBvbVILwLnIPJgzJyH4B%2FScreenshot%202024-06-24%20at%2016.25.26.png?alt=media&#x26;token=c9778e36-35d1-4930-ad26-79e18bcde291" alt="" width="328"><figcaption><p>Etapa de botões.</p></figcaption></figure>

<details>

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

Existem 4 tipos diferentes de botões:

* **Ir para**: Quando este botão for 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.
* **Chamada**: 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 string JSON e anexados à URL como uma string codificada em Base64. É possível decodificar essa string usando a `atob`  função JavaScript.

<img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FkrEjFvekEsCYqpLmbHA9%2FScreenshot%202024-02-06%20at%2013.03.11.png?alt=media&#x26;token=6927b8a4-d82b-42cd-aa81-50260fe3ee72" alt="Button types on Chatlayer" data-size="original">

</details>

### Mídia

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F1aBSaS7YCTuNGt2jflRo%2FScreenshot%202024-12-03%20at%2015.02.29.png?alt=media&#x26;token=2e511e9d-2528-4553-83b0-ea3880aa9ade" alt="" width="375"><figcaption><p>Etapa de Mídia.</p></figcaption></figure>

<details>

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

* **Imagens**: todos os tipos típicos de imagem, como jpg, png e gif, são suportados em nossa plataforma.
* **Vídeo**: vídeos estão disponíveis no [Janela do Emulador](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/emulator), [W](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2)[eb ](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2)e no canal do Facebook. Verifique [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 suportados:
  * mp4
  * ogv
  * webm
* **Áudio**: a mídia de áudio está disponível no [Janela do Emulador](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/emulator), o [Web](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2) canal e [Facebook Messenger](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/facebook). Atualmente suportamos apenas MP3 como formato de áudio.
* **Arquivos**: anexos de arquivo estão disponíveis em [Facebook Messenger](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/facebook). Atualmente, somente PDF é suportado. 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.

</details>

{% hint style="warning" %}
Está tendo problemas 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 que são enviados; isso pode causar a exibição incorreta.
{% endhint %}

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

### Respostas rápidas

Respostas rápidas se comportam 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 tantas respostas rápidas quanto achar necessário.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FhzftTG0WBHnKTB1Fk9Bo%2FScreenshot%202024-06-24%20at%2016.26.41.png?alt=media&#x26;token=a3cb5ec0-5e38-484d-bff7-a6c6fe340642" 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 Ir-para](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/flow-logic/go-to-connections).
* **página de Variáveis**: opcionalmente, [variáveis](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/navegacao/settings/secure-variables-gdpr) 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** somente vincular 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.&#x20;

Os botões em Carrosséis são os mesmos que em [**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="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F9Y010uSk2RzV9jNLMjqM%2FScreenshot%202024-06-24%20at%2016.32.24.png?alt=media&#x26;token=53b33c17-f296-4cc3-ab63-27809538b80c" alt="" width="375"><figcaption><p>Etapa de Carrossel.</p></figcaption></figure>

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

<details>

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

O botão de compartilhamento abre um bloco de compartilhamento no Facebook Messenger, permitindo que as pessoas compartilhem bolhas de mensagens (também chamadas de cartões de carrossel) com seus amigos.

Quando um novo usuário recebe uma bolha de mensagem, ele pode compartilhá-la com seus amigos tocando no mesmo botão de compartilhamento. Ao tocar no botão postback, o usuário é enviado para a página inicial do bot.

Você só pode usar o botão de compartilhamento em itens de templates genéricos (anteriormente chamados de carrosséis) e somente 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 para a configuração de idioma preferida do usuário.

<img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-LLTwINdA-k01sAajhSX%2F-LLTwJKVzShk3Y7meASp%2Fcarousel.png?generation=1535969958196585&#x26;alt=media" alt="" data-size="original">

</details>

### Lista

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

Cada item pode exibir um botão que pode ser usado como call-to-action (postback). Você também pode fornecer uma URL que abre quando um item é tocado.

Cada mensagem de template 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="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-LLTwINdA-k01sAajhSX%2F-LLTwJKXmBQxe0crxOg7%2Flist%20template.png?generation=1535969958272193&#x26;alt=media" alt="" data-size="original">

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

<img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-LLTwINdA-k01sAajhSX%2F-LLTwJKZWVwNUi1O0xTs%2Flist%20template%20compact.png?generation=1535969952924562&#x26;alt=media" alt="" data-size="original">

</details>

### Envio de arquivo

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

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FXHbVGUXeKFwmtLOg8hUT%2FScreenshot%202024-06-24%20at%2016.34.56.png?alt=media&#x26;token=e1015596-132a-40ca-aff5-c6b53321e9e1" 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 Enviar na conversa:

![](https://181262846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-M3L63O1_lCPCmfdqyUK%2F-M3LukpL2-eh7WBMg5h1%2Fimage.png?alt=media\&token=d32aee90-41b1-44f6-863a-a8db92300237)

<details>

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

* Se o envio falhar porque houve um problema com a conexão, ou o arquivo que o usuário escolheu foi maior que 10 MB, o bot irá para o bloco "envio falhou".
* A URL onde o arquivo enviado é armazenado pode ser encontrada em `{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 o [Mídia](#attachments) passo. Alternativamente, você pode recuperar a URL com um [plugin de API](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/integrateandcode/custom-back-end-integrations) para armazenar os arquivos em seus servidores.
* Arquivos enviados são mantidos nos servidores do Chatlayer por 30 dias, após os quais se tornarão inacessíveis automaticamente.

</details>

### Rich text

Rich text permite que você vá além das mensagens de texto e estilize seu texto da maneira que desejar. Você também pode adicionar links usando o editor de rich text.

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FfnD45ZhUsVSHeVYs8Y5K%2FScreenshot%202024-06-24%20at%2016.37.39.png?alt=media&#x26;token=d0a8fd5d-2dbf-4e26-a9bc-3084b1ec1c36" alt="" width="326"><figcaption><p>Etapa de Mensagem Rich text.</p></figcaption></figure>

<details>

<summary>Estilos de rich text</summary>

O editor de rich text permite que você use os seguintes estilos:

* Parágrafo
* Cabeçalho 1
* Cabeçalho 2
* Cabeçalho 3
* Cabeçalho 4
* Lista com marcadores
* Lista ordenada (= lista numerada)

E formate o texto das seguintes maneiras:

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

Você também pode adicionar hiperlinks (weblinks) que direcionam para uma página externa ou para um local específico na sua conversa.

Para transformar uma palavra ou frase em hyperlink, selecione-a e então clique no ícone de corrente à direita abaixo. Um popup aparecerá onde você poderá inserir o endereço do link. Em seguida clique em 'salvar'.

</details>