Como criar mensagens interativas?

As mensagens interativas permitem enviar conteúdos que o cliente seleciona ou responde diretamente, como listas de opções, formulários, cartões e artigos. O widget do site oferece o conjunto mais completo; outros canais renderizam apenas os formatos que seus provedores suportam.

Esses tipos de mensagem são criados de forma programática, usando a API de mensagens (New Message API) da plataforma.

Antes de começar

• Os exemplos completos abaixo são voltados ao widget de chat do site. Mensagens de opções (input_select) também são adaptadas em canais como Facebook, Telegram, LINE e WhatsApp Cloud; teste o formato no canal de destino.
• Você precisa de um token de acesso à API e do endpoint de criação de mensagens de uma conversa.
• O campo content_type define o tipo da mensagem e o campo content_attributes carrega os dados exibidos ao cliente. Mantenha esses nomes exatamente como mostrado nos exemplos.

Exemplos de payload

Use os exemplos abaixo como corpo da requisição para criar cada tipo de mensagem interativa.

1. Opções

Exibe uma lista de itens para o cliente escolher.

{
    "content": "Selecione um dos itens abaixo",
    "content_type": "input_select",
    "content_attributes": {
        "items": [
            { "title": "Opção1", "value": "Opção 1" },
            { "title": "Opção2", "value": "Opção 2" }
        ]
    },
    "private": false
}

2. Formulário

Solicita um conjunto de campos ao cliente (texto, e-mail, seleção etc.).

{
  "content": "formulário",
  "content_type": "form",
  "content_attributes": {
    "items": [
      {
        "name": "email",
        "placeholder": "Por favor, insira seu email",
        "type": "email",
        "label": "Email",
        "default": "[email protected]"
      },
      {
        "name": "text_area",
        "placeholder": "Por favor, insira o texto",
        "type": "text_area",
        "label": "Texto Longo",
        "default": "Texto de exemplo"
      },
      {
        "name": "text",
        "placeholder": "Por favor, insira o texto",
        "type": "text",
        "label": "Texto",
        "default": "Entrada de exemplo"
      },
      {
        "name": "select",
        "label": "Selecionar Opção",
        "type": "select",
        "options": [
          {
            "label": "🌯 Burrito",
            "value": "Burrito"
          },
          {
            "label": "🍝 Macarrão",
            "value": "Macarrão"
          }
        ]
      }
    ]
  },
  "private": false
}

3. Cartões

Apresenta um card com imagem, título, descrição e botões de ação (links ou postbacks).

{
   "content": "mensagem de cartão",
   "content_type": "cards",
   "content_attributes": {
      "items": [
         {
            "media_url": "https://cdn.exemplo.com/produtos/camiseta-branca.jpg",
            "title": "Tênis Nike 2.0",
            "description": "Correndo com o Tênis Nike 2.0",
            "actions": [
               {
                  "type": "link",
                  "text": "Ver Mais",
                  "uri": "https://exemplo.com/produtos/camiseta-branca"
               },
               {
                  "type": "postback",
                  "text": "Adicionar ao carrinho",
                  "payload": "ITEM_SELECIONADO"
               }
            ]
         }
      ]
   },
   "private": false
}

4. Artigos

Compartilha uma lista de artigos com título, descrição e link.

{
    "content": "artigos",
    "content_type": "article",
    "content_attributes": {
        "items": [
            { "title": "Guia inicial da API", "description": "Um guia de início rápido para API", "link": "https://exemplo.com/guias/api" },
            { "title": "Documentos de desenvolvimento", "description": "Documentação e diretrizes de desenvolvimento", "link": "https://exemplo.com/docs" }
        ]
    },
    "private": false
}

Ajuste os títulos, valores e links dos exemplos conforme a necessidade do seu atendimento. O campo private deve permanecer como false para que a mensagem seja enviada ao cliente.