---
title: Conteúdo - Imagem 
slug: helper-new/conteudo-imagem
description: Learn how to add images to a chatbot conversation with ease! This document provides step-by-step instructions on adding images in a variety of formats and offers detailed guidance on modifying image options. Discover how to select an existing image, creat
createdAt: 2022-08-29T20:31:07.000Z
---

O conteúdo da imagem permite integrar uma imagem (uma imagem) na conversa do chatbot como uma mensagem distinta.

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/cQrjBXVRLJ6A6OZU_kMTc_image.png" size="38" width="368" height="226" position="center" showCaption="false"}

Formatos suportados


Os formatos de imagem suportados são:

- `.tiff`;
- `.jpg`;
- `.png`;
- `.jpeg`;
- `.gif`;
- `.bmp`;
- `.tif`.

:::hint{type="info"}
🖊️ <u>**Nota**</u>**:&#x20;**&#x41;o carregar uma imagem de uma URL variável, talvez seja necessário usar chaves triplas.
&#x20;<u>**Exemplo**</u>**:** `{{{temp.imageUrl}}}`
:::





### Adicionar uma imagem em um [nó](link)

1. No **Flow Editor**, clique no nó onde deseja adicionar sua imagem.
2. Escolha onde colocar sua imagem: `On Enter`, `On Receive` ou `Transitions`.
3. Clique no botão "**+**".
4. Em "**Mensagem**", clique na caixa.
   - Na caixa de diálogo **selecione Conteúdo**, em Pesquisar, **selecione Imagem**.
   - Também é possível:
     - Selecionar uma imagem existente na lista. (\*)
     - **Criar uma nova imagem** clicando no botão.
     - Uma nova janela será exibida onde será possível modificar as seguintes opções:
       - O botão Imagem;
       - A caixa Título;
       - O botão de opção Mostrar indicadores de digitação.
   - Clique em **Enviar**.
   - Clique em **Adicionar ação** (`Alt+Enter`).

(\*) Isso o levará diretamente ao passo 5.

### Opções&#xD;

Ao adicionar um conteúdo de Imagem, é possível modificar algumas opções:

:::hint{type="info"}
💡 <u>**Dica**</u>**:&#x20;**&#x41;o passar o mouse sobre uma caixa onde é possível digitar, o `</>`símbolo aparece. Este botão ajuda a inserir variáveis facilmente em sua mensagem. Quando clicar sobre ele, mostra uma lista de variáveis que são possíveis utilizar, como `temp.`, `user.`, `session.` ou `event.`.
:::

### Imagem&#xD;

Há duas maneiras de adicionar uma imagem:

- Em **Imagem**, clique no quadrado com uma seta para cima. Em seguida, é possível escolher qual imagem deseja adicionar lá do seu armazenamento;
- Em **Imagem**, clique no botão ou **digite o URL** no canto inferior direito do quadrado. Uma caixa aparecerá e será possível digitar a URL da sua imagem.

:::hint{type="info"}
🖊️ <u>**Nota**</u>**:&#x20;**&#x4E;ão se esqueça de dar uma olhada na lista de formatos suportados.
:::

### Título

Há uma caixa onde é possível adicionar um título à sua imagem. Este título é exibido quando passar o mouse sobre a imagem que acabou de enviar.

:::hint{type="info"}
🖊️ <u>**Nota**</u>**:&#x20;***Melhor prática:* Seu título deve ser curto, preciso e relevante.
:::



### Mostrar indicadores&#xD;

O botão de opção é verificado por padrão. É possível desmarcá-lo.

Quando seu usuário estiver conversando com o chatbot, ele verá o ícon&#x65;**&#x20;...&#x20;**(uma bolha com três pontos em movimento) enquanto o chatbot está "digitando" antes de receber uma resposta.