Como enviar mensagens interativas

Este guia ensina a enviar cada um dos tipos de mensagem interativa. As mensagens interativas fornecem aos usuários uma forma mais simples de encontrar e selecionar o que eles querem da sua empresa no WhatsApp. Durante os testes, os bots de bate-papo que usaram os recursos de mensagens interativas alcançaram taxas de resposta e conversão significativamente mais altas em comparação com aqueles baseados em texto.

Tipos de mensagens interativas:

• Mensagens de lista: incluem um menu com até 10 opções. Esse tipo de mensagem oferece uma maneira mais simples e consistente para os usuários fazerem uma seleção ao interagirem com uma empresa.
• Mensagens com botões de resposta: incluem até 3 opções (cada uma sendo um botão). Esse tipo de mensagem permite que os usuários façam uma seleção em um menu mais rapidamente ao interagirem com uma empresa. Os botões de resposta oferecem a mesma experiência do usuário que os modelos interativos com botões.
• Mensagens de produto único: incluem apenas um item do inventário da empresa. Consulte Compartilhar produtos com os clientes para ver mais informações.
• Mensagens multiproduto: incluem uma seleção com até 30 itens do inventário da empresa. Consulte Compartilhar produtos com os clientes para ver mais informações.
• Mensagens para solicitar localização: incluem uma solicitação da localização do usuário.
• Mensagens do Flows: incluem interações estruturadas. Consulte WhatsApp Flows para ver mais informações.

Especificações para mensagens interativas

• Diferentes mensagens interativas podem ser combinadas no mesmo fluxo.
• Os usuários não podem selecionar mais de uma opção na mensagem de lista ou botões, mas podem voltar atrás e reabrir uma mensagem anterior.
• As mensagens de lista ou com botão de resposta não podem ser usadas como notificações. Atualmente, elas só podem ser enviadas na janela de 24 horas após a última mensagem enviada pelo usuário. Se tentar enviar uma mensagem depois disso, você receberá uma mensagem de erro.
• Plataformas compatíveis: iOS, Android e web (mensagens do Flows não são compatíveis com a web).

Veja como as mensagens de texto se comparam às interativas:

Veja um exemplo de como combinar mensagens de lista e com botões de resposta no mesmo fluxo:

Ocorreu um erro

Estamos tendo problemas ao reproduzir este vídeo.

Saiba mais

Visão geral

Por que usar

Compreensão do usuário

Quando comparadas com listas baseadas em texto, as mensagens interativas fornecem um formato mais simples e consistente para as pessoas encontrarem e selecionarem o que querem da empresa. Durante os testes, as pessoas tinham níveis de compreensão mais elevados ao interagir com esses recursos.

Resultados de negócios

Durante os testes, os bots de bate-papo que usaram os recursos de mensagens interativas alcançaram taxas de resposta e conversão significativamente mais altas em comparação com aqueles baseados em texto.

Personalização

Com preenchimento dinâmico em tempo real, as mensagens podem ser personalizadas para cada cliente ou situação. Por exemplo, você pode mostrar uma mensagem de lista com horários disponíveis para agendamento ou usar os botões de resposta para mostrar endereços de entrega anteriores.

Sem modelos

Para usar as mensagens interativas, não é preciso aplicar modelos nem receber aprovação prévia.

Quando usar

As mensagens de lista são a melhor escolha para apresentar várias opções, por exemplo:

• Um menu de atendimento ao cliente ou perguntas frequentes
• Um menu de retirada de comida
• Uma seleção de lojas ou locais próximos
• Horários disponíveis para reserva
• Escolha de um pedido recente para repetir

Os botões de resposta são os melhores para oferecer respostas rápidas com um conjunto limitado de opções, como:

• Recargas em viagens
• Mudança de dados pessoais
• Escolha de um pedido recente para repetir
• Solicitação de devolução
• Inclusão de ingredientes extras opcionais em um pedido de comida
• Escolha da forma de pagamento

Os botões de resposta são úteis em casos de uso "personalizados", para os quais uma resposta genérica não é adequada.

As mensagens do Flows são indicadas para comunicação estruturada em uma ou mais telas, como nestes casos:

• Agendar horários
• Navegar por produtos
• Coletar feedback do cliente
• Obter novos cadastros de vendas

Com as mensagens do Flows, as empresas oferecem uma experiência de usuário mais rica e envolvente que ajuda os clientes a realizar ações no WhatsApp sem visitar outro app ou site.

Como usar

No nível da API, as mensagens interativas são definidas ao especificar type como interactive e adicionar o objeto interactive. Em geral, elas incluem as quatro partes principais header, body, footer e action:

{
  "recipient_type": "individual",
  "to" : "whatsapp-id",
  "type": "interactive" 
  "interactive":{
    "type": "list" | "button" | ...,
    "header": {},
    "body": {},
    "footer": {},
    "action": {}
  }
}

Em mensagens de lista, as partes se encaixam assim:

Em mensagens com botões de resposta, as partes se encaixam assim:

Veja abaixo mais informações sobre como enviar essas mensagens.

Primeiros passos

Antes de enviar a mensagem, obtenha o ID do WhatsApp do destinatário fazendo uma chamada para o nó /contacts.

Recomendamos que você configure os webhooks para receber notificações sobre mensagens de entrada e o status de mensagens. Dessa forma, é possível acompanhar o envio da mensagem e as respostas recebidas de usuários. Consulte Webhooks para a API Local para ver mais informações.

Etapa 1: montar o objeto interactive

Mensagens de lista

Para enviar uma mensagem de lista, monte um objeto interactive do tipo list com estes componentes:

Ao final do processo, o objeto interactive deverá ter a seguinte aparência:

"interactive":{
  "type": "list",
  "header": {
    "type": "text",
    "text": "your-header-content"
  },
  "body": {
    "text": "your-text-message-content"
  },
  "footer": {
    "text": "your-footer-content"
  },
  "action": {
    "button": "cta-button-content",
    "sections":[
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      ...
    ]
  }
}

Botões de resposta

Para enviar uma mensagem com botão de resposta, monte um objeto interactive do tipo button com estes componentes:

"header": {
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }

"action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    }

Ao final do processo, o objeto interactive deverá ter a seguinte aparência:

"interactive": {
    "type": "button",
    "header": { # optional
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }, # end header
    "body": {
      "text": "your-text-body-content"
    },
    "footer": { # optional
      "text": "your-text-footer-content"
    },
    "action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    } # end action   
  } # end interactive

Mensagens de solicitação de localização

As mensagens de solicitação de localização incluem um corpo de texto e o botão Enviar localização, no qual os usuários podem tocar. Quando o usuário toca no botão, uma tela para compartilhar a localização é exibida, permitindo que o usuário a use a fim de realizar essa ação.

Para enviar uma mensagem de solicitação de localização, primeiro monte um objeto interactive com texto a ser exibido:

{
  "type": "location_request_message",
  "body": {
    "type": "text",
    "text": "<TEXT>"
  },
  "action": {
    "name": "send_location" 
  }
}

Mensagens do Flows

As mensagens do Flows incluem um botão de chamada para ação no qual os usuários podem tocar. Quando clicam no botão, o fluxo personalizado é exibido.

Para enviar uma mensagem do Flows, monte um objeto interactive do tipo flow. Veja aqui todas as informações.

Etapa 2: adicionar parâmetros comuns de mensagem

Quando o objeto interativo estiver pronto, acrescente os outros parâmetros que compõem a mensagem (recipient_type, to e type). Lembre-se de definir type como interactive.

{
  "recipient_type": "individual",
  "to" : "whatsapp-id", // WhatsApp ID of your recipient
  "type": "interactive",
  "interactive":{
    // Your interactive object  
   }
  }

Consulte os parâmetros comuns a todos os tipos de mensagem aqui.

Etapa 3: fazer uma chamada POST para /messages

Faça uma chamada POST para o ponto de extremidade /messages com o objeto JSON criado nas etapas 1 e 2. Caso a mensagem seja enviada com sucesso, você receberá a seguinte resposta:

{
  "messages": [{
    "id": "{message-id}"
  }]
}

Etapa 4: verificar os webhooks

Se você configurou os webhooks, verifique se há alterações no status da mensagem, bem como respostas vindas dos usuários.

Os webhooks de respostas a mensagens interativas incluem o novo componente interactive, que contém informações sobre a escolha do usuário. Consulte Components para ver mais informações.

Veja uma solicitação de webhook descrevendo que um usuário compartilhou a própria localização:

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "12345",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "12345",
              "phone_number_id": "12345"
            },
            "contacts": [
              {
                "profile": {
                  "name": "John Doe"
                },
                "wa_id": "12345"
              }
            ],
            "messages": [
              {
                "context": {
                  "from": "12345",
                  "id": "test-id"
                },
                "from": "123450",
                "id": "test-id",
                "timestamp": "16632",
                "location": {
                  "address": "1071 5th Ave, New York, NY 10128", #Optional
                  "latitude": 37.421996751527,
                  "longitude": -122.08407156636,
                  "name": "Solomon R. Guggenheim Museum" #Optional
                },
                "type": "location"
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

O componente location na carga contém a latitude e a longitude do usuário. Vale ressaltar que address e name são opcionais para o usuário e podem não ser incluídos.

"location": {
  "address": "1071 5th Ave, New York, NY 10128", #Optional
  "latitude": 40.782910059774,
  "longitude": -73.959075808525,
  "name": "Solomon R. Guggenheim Museum" #Optional
}