Com os modelos de mensagem do WhatsApp, você tem um super-recurso para enviar informações valiosas aos clientes. Use-os para enviar lembretes, notificações ou atualizações personalizadas.
O WhatsApp permite que você inicie conversas diretas com os usuários que aceitaram o recebimento de mensagens. Além disso, você pode responder a qualquer mensagem que um usuário iniciar. Em seguida, o usuário poderá receber mensagens baseadas em um modelo do WhatsApp.
Quando você usa a Plataforma do WhatsApp Business para gerar esses modelos, agiliza a comunicação com os clientes e melhora consideravelmente a experiência do usuário.
Veja só este exemplo. Uma agência de viagens hipotética chamada “Viagens Incríveis Ltda.” oferece serviços de reserva de transporte, hospedagem e atividades recreativas. Como o WhatsApp está presente no mundo inteiro, isso o torna uma plataforma ideal para essa empresa se comunicar com os clientes. As confirmações por e-mail são excelentes para manter informações registradas. Contudo, poder interagir com os clientes em conversas bidirecionais é de grande valor para quem está viajando, e isso os SMS tradicionais não conseguem oferecer.
Ademais, com os modelos de mensagem do WhatsApp, a Viagens Incríveis Ltda. consegue se comunicar passando a quantidade ideal de detalhes personalizados. Nesse exemplo, com uma mensagem de boas-vindas personalizada, notificações em tempo hábil e passagens eletrônicas acessíveis instantaneamente, os clientes têm a certeza de que a viagem deles está sendo gerida, e isso permite que eles relaxem e aproveitem as férias.
Para você ver como é fácil aproveitar todos os recursos da API do WhatsApp Business e dos modelos de mensagem, o presente tutorial prático guiará você pelos processos de gerenciamento de modelos, incluindo a criação, a exclusão e a personalização.
Como gerenciar modelos de mensagem com a Plataforma do WhatsApp Business
Pré-requisitos
Este tutorial parte do princípio de que você tem um conhecimento básico dos apps Node.js e Express.js. Antes de continuar, conclua as etapas fornecidas na seção introdutória da documentação da Plataforma do WhatsApp Business. Se você for um provedor de soluções empresariais (BSP), siga os Primeiros passos para provedores de soluções empresariais e garanta que seu app da Meta passe no processo de análise.
Antes de continuar com o tutorial, confirme que você tem um ID do WhatsApp Business e um ID do número de telefone.
Os BSPs também precisam de um token de usuário do sistema com as permissões necessárias (whatsapp_business_management, whatsapp_business_messaging e business_management).
Se você não tiver os apps Node.js e Express.js, poderá usar este padrão de app criado especificamente para o tutorial.
Além disso, o tutorial usará vários pacotes, incluindo o dotenv, para armazenar o token e as solicitações para fazer solicitações HTTP com a API. Também usaremos o Postman para testar os pontos de extremidade da API.
Para explorar mais, veja aqui o código completo.
Quando você configurar o app inicial e adicionar o token com as devidas permissões, já terá tudo pronto para começar.
Como criar um novo modelo de mensagem
Vamos supor que a Global Voyager queira criar vários modelos de mensagem, um para cada finalidade. Por exemplo, um modelo para enviar uma saudação aos clientes e outro para enviar cópias em PDF de documentos relevantes.
Antes de começar com a codificação, tire um tempinho para entender o funcionamento do processo de criação de modelos e os tipos de parâmetros aceitos. Observe também que a Meta analisa os modelos diariamente e poderá rejeitá-los se não atenderem às diretrizes especificadas.
A documentação informa que você precisa fazer uma solicitação POST para message_templates usando seu ID do WhatsApp Business.
Os parâmetros a seguir são aceitos:
- categoria do tipo ENUM
- componentes de um tipo de matriz JSON
- idioma
- nome
O parâmetro de componentes define o corpo do modelo de mensagem. Ele aceita os seguintes subparâmetros:
- tipo — do tipo ENUM de HEADER, BODY, FOOTER e BUTTONS
- formato — do tipo ENUM de TEXT, IMAGE, DOCUMENT, VIDEO, LOCATION
- texto — do tipo string
- botões — do tipo matriz JSON
Agora você tem um modelo de mensagem baseado em texto para saudar os clientes e outro baseado em mídia para enviar um PDF. Pensando em nosso exemplo, esses modelos seriam perfeitos para enviar passagens ou confirmações de itinerário.
Como criar um modelo de mensagem baseado em texto
Primeiro, você precisa criar um novo roteador em routes/messageTemplates.js:
router.post("/messageTemplate", createMessageTemplate);Em seguida, use o método de controlador createMessageTemplate, que faremos em controllers/messageTemplate.js:
exports.createMessageTemplate = async (req, res) => {exports.createMessageTemplate = async (req, res) => { const { name, language, category, components } = req.body; if (!name || !language || !category || !components) { return res.status(400).json({ error: "Required Fields: name, language, category, and components", }); } request.post( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ name: name, language: language, category: category, components: components, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Agora que criamos a rota e o método, é hora de testar a API no Postman. Ficará assim:
E o retorno, assim:
Veja abaixo um exemplo de objeto de solicitação que você pode passar para criar o modelo de mensagem. {{1}} é usado para passar variáveis. Vale lembrar que {{X}} é usado para definir as variáveis do modelo de mensagem, e não as variáveis do Postman.
{ "name": "welcome_greetings", "language": "en_US", "category": "ALERT_UPDATE", "components": [ { "type": "HEADER", "format":"TEXT", "text": "Oi, {{1}}! Como vai você?" }, { "type": "BODY", "text": "Agradecemos por você escolher a Terrific Travel Ltd. como sua concierge de férias! Entre em contato conosco caso tenha dúvidas." }, { "type": "FOOTER", "text": "Terrific Travel Ltd." } ] }A resposta bem-sucedida da API retorna o valor do ID, representando o ID do modelo.
Como criar um modelo de mensagem baseado em mídia
Quando concluir o modelo baseado em texto, você poderá criar modelos baseados em mídia com a mesma facilidade. São meios flexíveis e eficientes de enviar documentos que os clientes podem acessar imediatamente.
O modelo abaixo terá um HEADER que incluirá o documento anexado, um componente BODY e um componente FOOTER:
{ "name": "sample_ticket_confirmation", "language": "en_US", "category": "TICKET_UPDATE", "components": [ { "type": "HEADER", "format": "DOCUMENT" }, { "type": "BODY", "text": "This is your flight confirmation for {{1}}-{{2}} on {{3}}." }, { "type": "FOOTER", "text": "This message is from an unverified business." } ] }Observação: antes de você poder usar os modelos de mensagem para se comunicar com os clientes, os modelos precisam ser aprovados e atender às Diretrizes para Modelo de Mensagem.
Como recuperar uma lista de modelos de mensagem existentes
Agora que você criou os modelos de mensagem, já pode recuperá-los. Para isso, faça uma chamada GET para:
https://graph.facebook.com/v13.0/whatsapp-business-account-ID/message_templates.Observação: a versão da API pode mudar. Garanta que sua URL seja atualizada de acordo.
Em seguida, crie uma nova rota em routes/messageTemplates.js:
router.get("/messageTemplates", getMessageTemplates);O getMessageTemplates acima é um método de controlador que você pode criar em controllers/messageTemplate.js. Veja abaixo:
exports.getMessageTemplates = async (req, res) => { request.get( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Uma resposta bem-sucedida inclui os modelos que você criou e o exemplo de modelo do WhatsApp.
Como excluir um modelo de mensagem
De forma parecida com a rota GET, você também pode criar uma rota DELETE em routes/messageTemplates.js:
router.delete("/messageTemplate", deleteMessageTemplate);Agora, crie o método controlador de apoio em controllers/messageTemplates.js:
exports.deleteMessageTemplate = async (req, res) => { request.delete( { url: `https://graph.facebook.com/v13.0/${process.env.META_BUSINESS_ID}/message_templates`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ name: req.body.name, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Para excluir um modelo, você precisa passar o nome do modelo como um corpo JSON.
Por exemplo, as capturas de tela abaixo mostram uma solicitação e uma resposta Postman bem-sucedidas para excluir um modelo denominado demo_template_user:
Como enviar uma mensagem usando o modelo
Agora, vamos usar um modelo de mensagem para enviar mensagens.
Primeiro, faça um roteador e o respectivo controlador de apoio. Em routes/messageTemplates.js, adicione:
router.post("/sendMessage/:id", sendMessage);No código acima, o parâmetro :id é usado para passar o ID do número de telefone. Veja como o controlador fica em controllers/messageTemplate.js.
exports.sendMessage = async (req, res) => { const { id, to, type,template } = req.body; if (!id || !to || !type || !template) { return res.status(400).json({ error: "Required Fields: to, type, template and id", }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: JSON.stringify({ messaging_product: process.env.MESSAGING_PRODUCT, to: to, type: type, template: template, }), }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Agora você pode criar um objeto de solicitação no Postman. Lembre-se de que você passará um parâmetro — {{1}} — no Header.
O corpo de solicitação Postman demonstra o modelo baseado em texto que criamos.
Observe esse trecho de código na captura de tela acima:
"components": [ { "type": "HEADER", "parameters": [ { "type": "text", "text": "Name" } ] } ]Esse trecho é usado para passar o valor para o parâmetro {{1}}. Uma resposta bem-sucedida inclui o ID da mensagem, como vemos abaixo.
É assim que essa mensagem aparece para os clientes no WhatsApp:
Em seguida, você usará um objeto de solicitação JSON para outro modelo no qual precisa passar um documento no HEADER, bem como as variáveis {{1}}, {{2}} e {{3}} no BODY.
Primeiro, veja a captura de tela abaixo:
Note que o trecho abaixo passa os parâmetros para o HEADER:
"parameters": [ { "type": "DOCUMENT", "document": { "id":"984786545564592" } } ] }, { Then, the following code does the same for the BODY: "parameters": [ { "type": "text", "text": "Toronto" }, { "type": "text", "text": "Dubai" }, { "type": "text", "text": "2022-05-03" } ] } ] } }A mídia anexada pode ser um link ou o ID da mídia carregada.
Por fim, veja na imagem abaixo como fica uma saída bem-sucedida no WhatsApp.
Conclusão
Com o presente tutorial, você começou a explorar as funcionalidades da API do WhatsApp Business para criar modelos de mensagem simples mas muito eficientes. A facilidade e a flexibilidade da API do WhatsApp Business melhoram os sistemas de comunicação de qualquer empresa, ajudando-as a transformar os consumidores em clientes de longo prazo. Aproveite já essa oportunidade.
