Elementos interativos no chat
Nível: Intermediário
Tempo de leitura: 5 min
Plano necessário: Qualquer plano
O agente pode oferecer opções clicáveis ao usuário. Ao clicar, o texto da opção é enviado automaticamente como mensagem — sem o usuário precisar digitar nada.
Esses elementos são definidos diretamente no prompt do agente ou nas respostas que o modelo gera durante a conversa.
Botões em linha (pills)
Exibe opções lado a lado em uma linha. Use quando as opções são curtas e exclusivas.
Sintaxe:
[[Opção A | Opção B | Opção C]]
Cada opção é separada por | (barra vertical com espaço antes e depois). O bloco inteiro deve estar em uma linha própria, sem texto antes ou depois.
Exemplo real:
Gostaria de continuar?
[[Sim, continuar | Não, encerrar | Falar com humano]]
Lista de seleção (vertical)
Exibe opções empilhadas verticalmente. Use quando as opções são mais longas ou quando há mais de três itens.
Sintaxe:
:::list
Primeira opção
Segunda opção
Terceira opção
:::
Cada linha entre :::list e ::: vira uma opção clicável.
Exemplo real:
O que você precisa hoje?
:::list
Agendar consulta
Ver planos e preços
Falar com o suporte
:::
Imagem
Exibe uma imagem diretamente no balão de conversa. Use quando o agente precisar mostrar um produto, diagrama, captura de tela ou qualquer conteúdo visual.
Sintaxe:
:::image
https://url-da-imagem.jpg
Legenda opcional
:::
A primeira linha dentro do bloco é a URL da imagem. A segunda linha, se existir, vira uma legenda abaixo da imagem. A legenda é opcional.
Exemplo real:
Aqui está o modelo que recomendo para você:
:::image
https://loja.exemplo.com/produtos/modelo-x.jpg
Modelo X — disponível em azul e preto
:::
A imagem precisa estar em uma URL pública acessível pelo navegador do usuário. URLs de upload interno ou que exijam autenticação não vão funcionar.
HTML livre
Renderiza HTML diretamente dentro do balão de conversa. Use para tabelas, formatação avançada ou layouts que o markdown não cobre.
Sintaxe:
:::html
<seu HTML aqui>
:::
Exemplo real:
:::html
<table style="width:100%;border-collapse:collapse">
<tr><td style="padding:4px 8px"><strong>Plano</strong></td><td style="padding:4px 8px"><strong>Preço</strong></td></tr>
<tr><td style="padding:4px 8px">Básico</td><td style="padding:4px 8px">R$57/mês</td></tr>
<tr><td style="padding:4px 8px">Pro</td><td style="padding:4px 8px">R$197/mês</td></tr>
</table>
:::
Por segurança, tags <script> e atributos de evento (onclick, onload etc.) são removidos automaticamente antes da renderização.
Regras importantes
- Coloque sempre em uma linha própria — não misture com texto na mesma linha
- Use
|com espaço antes e depois para separar pills - Após o usuário clicar em uma opção, as demais desaparecem automaticamente
- Esses elementos funcionam no chat web e no widget embed. No WhatsApp, as mensagens são entregues como texto simples (o WhatsApp não suporta HTML, pills customizados nem o bloco
:::image) - A imagem no bloco
:::imageprecisa ser uma URL pública. Imagens que exigem autenticação não carregam para o usuário
Como usar no prompt do agente
Instrua o agente a usar esses elementos nas situações certas. Exemplo de instrução no prompt:
Sempre que fizer uma pergunta com opções fechadas, apresente as alternativas
como pills usando a sintaxe [[Opção A | Opção B]]. Quando a lista tiver mais
de 3 itens ou os textos forem longos, use o bloco :::list.
Quando precisar mostrar uma imagem, use o bloco :::image com a URL na
primeira linha e uma legenda opcional na segunda.
Sem essa instrução, o modelo pode ou não usar os elementos dependendo do contexto. Com ela, o comportamento fica consistente.