Olá, pessoal! Neste tópico quero compartilhar com vocês um método para enviar uma reação à mensagem e também um typing (aquela animação “digitando…”) no seu Contato Inteligente construído com o Blip.
Este método é válido apenas para o canal WhatsApp e será implementado via ação de Requisição HTTP.
Teremos como referência para esse guia, três documentações:
1. Send message | Blip Docs
2. Typing indicators | Meta Developers
3. Reaction messages| Meta Developers
Vamos pro passo-a-passo?
Ah! No final do tópico tem um extra para facilitar a sua implementação 👀
Pré-requisitos
- Seu Contato Inteligente deve estar publicado no canal WhatsApp.
- Você precisará da sua URL de envio de mensagens e da Chave de autorização do seu roteador Blip.
Passo 1: Posicionamento da Ação
Como nossa reação e/ou typing será incluída referenciando um input do usuário, a ação deve ser incluída num local onde ela seja executada após a inserção do input. Sendo assim, o local ideal é nas Ações de Saída de um bloco onde você aguarda o input do usuário.
Vamos então criar nossa ação de Requisição HTTP no local indicado.
Passo 2: Configuração da Requisição HTTP
Agora faremos o envio de uma requisição para o endpoint de enviar mensagens.
1. Tipo de Requisição
- Método: POST
- URL: Sua URL para enviar mensagens. (A url segue a estrutura https://{{contractid}}.http.msging.net/messages).
2. Headers
Inclua os seguintes headers:
| Chave | Valor |
|---|---|
| Content-Type | application/json |
| Authorization | Sua chave de autenticação do roteador |
3. Body
O corpo da requisição será um JSON contendo o objeto de typing ou reaction, seguindo a estrutura da API da Meta e utilizando variáveis da biblioteca Blip para referência.
Opção A: Enviar Reação (Emoji)
Para enviar uma reação à mensagem do usuário, utilize o JSON abaixo no corpo da requisição:
{
"id":"{{random.guid}}",
"to":"{{contact.identity}}",
"type":"application/json",
"content":{
"type":"reaction",
"reaction":{
"message_id":"{{input.message.id}}",
"emoji":"Seu Emoji Aqui"
}
}
}
- ➡️ id: Utiliza a variável {{random.guid}} para gerar um guid para a nossa requisição.
- ➡️ to: Utiliza a variável {{contact.identity}} para recuperar durante a execução o identificador do usuário.
- ➡️ message_id: Utiliza a variável {{input.message.id}} para reagir à mensagem que o usuário acabou de enviar.
- ➡️ emoji: Substitua "Seu Emoji Aqui" pelo emoji desejado (ex: "👍", "❤️", "🔥").
Opção B: Enviar Typing (Animação digitando)
Para enviar a animação de "digitando…" (typing), utilize o JSON abaixo no corpo da requisição:
{
"id":"{{random.guid}}",
"to":"{{contact.identity}}",
"type":"application/json",
"content":{
"messaging_product":"whatsapp",
"status":"read",
"message_id":"{{input.message.id}}",
"typing_indicator":{
"type":"text"
}
}
}
Passo 3: Aplicação e cuidados
- Mensagem por Mensagem: Esta requisição pode ser enviada mensagem por mensagem. Se você deseja que boa parte ou quase todos os inputs do usuário recebam uma reação/typing, você deve incluir esta ação nas Ações de Saída de todos os blocos que você deseja incluir a reação e/ou typing.
- Ação Global: Para aplicar em todos os inputs do usuário em um fluxo, você pode configurar a requisição nas Ações Globais de Saída. ⚠️ Cuidado: Ao usar ações globais, todos os itens que o usuário enviar (incluindo possíveis inputs inesperados) receberão a reação/typing.
- Teste e Validação: Sempre faça testes para garantir que a funcionalidade se encaixa corretamente na sua solução.
- Uso do typing: Para evitar uma experiência ruim para o usuário, faça a exibição da animação somente em casos que haja uma resposta do seu Contato Inteligente.
- Tempo do typing: Conforme a documentação da Meta, o “digitando…” desaparecerá assim que outra mensagem for enviada, ou após 25 segundos, o que ocorrer primeiro. Nesse sentido, pode ser interessante aumentar o tempo de resposta dos conteúdos no Builder/Studio.
Prontinho! Ao executar o fluxo, a Requisição HTTP será enviada imediatamente após o input do usuário, resultando no envio da reação ou da animação de typing para o usuário final no WhatsApp.
EXTRA:
Para facilitar a sua implementação: Use o JSON abaixo para copiar e colar o bloco que utilizamos como exemplo, nele já estão as ações de reação e typing.
Para copiar, basta selecionar todo o texto e, para colar, vá até o seu Builder/Studio, clique com o botão direito e selecione ‘colar’. Apenas certifique-se de atualizar a URL para Enviar Mensagens e a Chave de Autorização.
Curtiu o tutorial? Deixe seu comentário e compartilhe sua versão implementada com a gente!
JSON do bloco exemplo:
[{"$contentActions":[{"input":{"bypass":false,"$cardContent":{"document":{"id":"6c8ee4f5-095f-4a85-ab68-a6f8497f62af","type":"text/plain","textContent":"User input","content":"User input"},"editable":false,"deletable":true,"position":"right","editing":false},"$invalid":false},"$invalid":false,"$$hashKey":"object:6596"}],"$conditionOutputs":[],"$enteringCustomActions":[],"$leavingCustomActions":[{"$id":"a9ebc599-281a-4abb-9002-d867c9404065","$typeOfContent":"","type":"ProcessHttp","$title":"Send reaction to user input","$invalid":false,"settings":{"headers":{"Content-Type":"application/json","Authorization":"{{secret.routerKey}}"},"method":"POST","body":"{\n \"id\": \"{{random.guid}}\",\n \"to\": \"{{contact.identity}}\",\n \"type\": \"application/json\",\n \"content\": {\n \"type\": \"reaction\",\n \"reaction\": {\n \"message_id\": \"{{input.message.id}}\",\n \"emoji\": \"💙\"\n }\n }\n}","uri":"{{resource.urlSendMessage}}","responseStatusVariable":"statusReaction","responseBodyVariable":"responseReaction"},"conditions":[]},{"$id":"38b1a8f5-0600-49ec-80c1-786a8deb8d9a","$typeOfContent":"","type":"ProcessHttp","$title":"Send typing to user input","$invalid":false,"settings":{"headers":{"Content-Type":"application/json","Authorization":"{{secret.routerKey}}"},"method":"POST","body":"{\n \"id\": \"{{random.guid}}\",\n \"to\": \"{{contact.identity}}\",\n \"type\": \"application/json\",\n \"content\": {\n \"messaging_product\": \"whatsapp\",\n \"status\": \"read\",\n \"message_id\": \"{{input.message.id}}\",\n \"typing_indicator\": {\n \"type\": \"text\"\n }\n }\n}","uri":"{{resource.urlSendMessage}}","responseStatusVariable":"statusReaction","responseBodyVariable":"responseReaction"},"conditions":[]}],"$inputSuggestions":[],"$defaultOutput":{"stateId":"onboarding","$invalid":false,"typeOfStateId":"state"},"$localCustomActions":[],"isAiGenerated":false,"$tags":[],"id":"dbb07965-7dbf-46c1-9a82-d59d8444e060","root":false,"$title":"ON.1.0.1 - Waiting for user input","$position":{"top":"814px","left":"582px"},"$invalidContentActions":false,"$invalidOutputs":false,"$invalidCustomActions":false,"$invalid":false}]
