Novas Regras do Whatsapp Business API: veja na prática um caso de uso com chatbot

Mudanças nas regras do WhatsApp Business API permitem mais opções de mensagens. Veja um caso de chatbot para essas novas possibilidades!

A antiga política de uso do WhatsApp mantinha restrições sobre notificações no envio de cupons promocionais, anúncios de ofertas, entre outros. Porém, em junho de 2021, mudanças nas regras tornaram possível o envio de novas mensagens pelo Whatsapp Business API, como:  

  • recomendações de produtos relacionadas a compras anteriores de um cliente;  
  • alertas;  
  • ofertas relevantes.  

No seguimento de varejo/e-commerce agora também é permitido envios sobre:  

  • alertas de abastecimento de estoque de produto;  
  • recomendações de produto baseadas em compras recentes;  
  • lembretes de produtos abandonados em carrinho de compras;  
  • notificações de lançamento de novos produtos e/ou serviços.  

É uma grande oportunidade para empresas que querem melhorar a relação com seu consumidor final. Segundo um estudo publicado recentemente pela Accenture, 83% dos usuários brasileiros de WhatsApp utilizam o App como uma de suas ferramentas de compra. Além disso, segundo o Mobile Times, um estudo do Ecosystem Forum destacou que 84% dos brasileiros que usam o smartphone para trabalhar o fazem via WhatsApp.   

Mas como poderíamos criar uma ferramenta que nos possibilite aproveitar esta mudança das regras?  

A seguir, vamos exemplificar as novas regras do canal WhatsApp por meio da API da ZENVIA, no segmento varejo/e-commerce, criando um bot WhatsApp que possibilita o envio de mensagens conforme as novas regras do WhatsApp.  Quer saber mais sobre as novas regras? Confira aqui.

Caso de uso: construa um bot para produtos esquecidos no carrinho de volta ao estoque

Iniciando na plataforma da ZENVIA 

Para esta aplicação será necessário realizar a contratação do serviço do WhatsApp Business API através da  plataforma ZENVIA. Para isso acesse o site e realize a contratação. 

1. Após a contratação do serviço, acesse aqui e faça o login na plataforma, clique em Solutions  > Tokens e webhooks. 

2. Insira o nome do token exemplo “access token” e clique em “save”.

Logo mais, utilizaremos o token para enviar no header da requisição com o nome  X-API-Token, onde será permitido a integração com a API da ZENVIA.  

Cadastrando templates 

1. Para cadastrar templates de mensagens clique em Solutions  > WhatsApp > Templates. 

2. Clique em New Template, preencha o formulário com o nome do template, categoria, idioma, número de telefone e  e-mail, logo após clique em next. 

3. Selecione o tipo de mensagem, mensagem de texto simples ou com header, media, footer e botões. Para este exemplo, selecione a segunda opção e clique em next. 

4. No header da mensagem utilize a opção “image” e faça o upload da imagem de exemplo. 

5. Em “Message body”, é possível passar variáveis para o template como o exemplo abaixo. Preencha o campo com o seguinte exemplo de mensagem:  

“Olá {{customer_name}}, tudo bem? O {{product_name}} que você queria está de volta ao nosso estoque. Você pode comprá-lo agora em nosso site clicando em {{link_name}} **OU** para ver outras opções clique em “Mais ofertas”.” 

6. Selecione a opção “Quick Reply Buttons” e adicone o botão “mais ofertas” com a variável {{link_promotion}}, logo após clique em “Finish”.

 

Agora o template será enviado para análise e levará algum tempo para ser aprovado. Somente após a análise e aprovação poderemos utilizá-lo. 

7. Retorne para  a tela Solutions  > WhatsApp > Templates.  Repare que o template aprovado estará com o status “approved”. Clicando em Options > Copy JSON é possível copiar o json com a estrutura do template da mensagem onde podemos utilizá-la para testar o envio da mensagem. 

Criando um simples chatbot em nodejs 

1. Certifique-se de ter o Node instalado ou faça a instalação.         

2. Para este projeto, iremos utilizar o gerenciador de pacotes yarn, mas fique a vontade em utilizar o gerenciador padrão do node, o npm. 

3. Crie uma pasta chamada chatbot-qbm e, dentro da pasta, rode o comando: 

yarn init     

4. Faça a instalação do ts-node, ts-node-dev e o typescript como dependências de desenvolvimento:  

 yarn add ts-node ts-node-dev typescript -D  

 5. Instale o arquivo de  configuração do typescript com o comando:  

 yarn typescript –init 

6. No arquivo package.json insira o script ”dev”: 

“ts-node-dev — transpile-only — ignore-watch     node_modules — respawn index.ts”,   como no exemplo abaixo, que será responsável por iniciar a aplicação. 

{ 
 "name": "Wellington Santos", 
 "version": "1.0.0", 
 "main": "index.js", 
 "scripts": { 
   "dev": "ts-node-dev --transpile-only --ignore-watch node_modules --respawn index.ts" 
 }, 
 "author": "Wellington Santos", 
 "license": "MIT", 
 "devDependencies": { 
   "ts-node": "^9.0.0", 
   "ts-node-dev": "^1.0.0", 
   "typescript": "^4.0.5" 
 } 

Criando a aplicação 

1. Para este projeto será necessária a instalação das seguintes dependências:  

yarn add express node-cron json-server, axios  

2. Faça a instalação das tipagens destas dependências com o comando: 

 yarn add @types/express @types/node-cron –D 

3. Para simular um cenário de uso do WhatsApp no cenário de e-commerce,vamos utilizar uma api fake com a biblioteca json-server.  

4. Crie um arquivo chamado db.json na raiz do projeto, copie e cole o exemplo abaixo: 

 { 
 "customers": [ 
   { 
     "customerId": 1, 
     "name":  "Teste 1", 
     "email": "[email protected]", 
     "whatsapp": "5511912345678", 
     "cart": [ 
       { 
         "product": { 
           "id": 3, 
           "title": "Mens Cotton Jacket", 
           "price": 55.99, 
           "category": "men's clothing", 
           "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg" 
         }, 
         "quantity": 1 
       } 
     ] 
   }, 
   { 
     "customerId": 2, 
     "name":  "Test 2", 
     "email": "[email protected]", 
     "whatsapp": "5511912345678", 
     "cart": [ 
       { 
         "product":  { 
           "id": 1, 
           "title": "Snowboard Jacket Winter Coats", 
           "price": 56.99, 
           "category": "women's clothing", 
           "image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg" 
         }, 
         "quantity": 1 
       } 
     ] 
   } 
 ] 
} 

5. Em scripts no arquivo  package.json adicione o script com a seguinte instrução: 

"json-server": "json-server db.json -p 4000"

6. Troque o número que está no campo “WhatsApp” no arquivo db.json e adicione seu número para testes. 

7. Rode o seguinte comando para iniciar a API com o json server. A API estará rodando em http://localhost:4000:  

 yarn json-server 

8. Crie uma pasta chamada src.  É nela que ficarão todos os arquivos da aplicação. Adicione o arquivo server.ts com a seguinte configuração:  

import express from "express"; 
import cron from "node-cron"; 
import AlertProductsBackToStockService from "./services/AlertProductsBackToStockService"; 
  
const app = express(); 
  
// Com está biblioteca o cron job é possível controlar tarefas a serem executadas em tempos pré-configurados. 
cron.schedule("* * * * *", async () => { 
 const alertProductsChangeBackToCart = new AlertProductsBackToStockService(); 
  
 //esta função vai mandar um alerta sobre produtos que estão de volta ao estoque. 
 await alertProductsChangeBackToCart.execute(); 
}); 
  
app.listen(3000, () => console.log("Web server running on port 3000!")); 

9. Crie uma pasta config dentro de src e crie um arquivo args.ts, copie e cole o código de exemplo, adicione o token que foi gerado no portal da ZENVIA no campo x_api_token e o número configurado para enviar as mensagens no campo from.  No campo hour_messages adicione o horário de envio das mensagens de alerta.

export const args = { 
 x_api_token: "", // token onde geramos no portal da ZENVIA 
 hour_messages: "10:00", // horário de envio da mensagem de alerta 
 from: "", // numero que será utilizado para enviar a mensagem 
} 

10. Crie uma pasta chamada utils dentro de src adicionando um arquivo chamado sendMessage.ts com o código a seguir. Ele será a função que utilizaremos para receber os dados da mensagem e realizar o envio.  

import axios from "axios"; 
import axios from "axios"; 
import { args } from "../configs/api"; 
  
interface IBody { 
 from: string; 
 to: string; 
 contents: any[]; 
} 
  
// função que será responsavel por enviar uma requisição POST onde será enviado as mensagem 
async function sendMessage(body: IBody) { 
 try { 
   const data = await axios.post( 
     "https://api.zenvia.com/v2/channels/whatsapp/messages", // endpoint de envios de mensagens 
     body, 
     { 
       headers: { 
         "content-type": "application/json", 
         "X-API-TOKEN": args.x_api_token, // token gerado na plataforma da zenvia 
       }, 
     } 
   ); 
  
   return data; 
 } catch (error) { 
   return error; 
 } 
} 
  
export default sendMessage; 

11. Ainda na pasta utils, crie uma função chamada formatUnitOfTime, com o código a seguir. Esta função formatUnitOfTime será responsável por formatar horas e minutos, recebendo no formato exemplo “1”, devolvendo no formato “01” e assim por diante.

function formatUnitOfTime(unitOfTime: number) { 
 return unitOfTime < 10 ? `0${unitOfTime}`.substring(0, 2) : unitOfTime.toString().substring(0, 2); 
} 
  
export default formatUnitOfTime 

12.  Na pasta services adicione um arquivo chamado AlertProductsBackToCartService.ts, copie e cole o exemplo de código abaixo. Repare que foi passado para a função sendMessages um objeto com a estrutura do template da mensagem que criamos.

import sendMessage from "../utils/sendMessages"; 
import api from "axios"; 
import formatUnitOfTime from "../utils/formatUnitOfTime"; 
import { args } from "../configs/api"; 
  
class AlertProductsBackToStockService { 
 public async execute() { 
   // retorno da chamada da api que foi criada utilizando o JSON server 
   const responseCustomers = await api.get("http://localhost:4000/customers"); 
  
   //dados retornados da api fake 
   const customers = responseCustomers.data; 
  
   // irá percorer os dados da api fake para cada cliente irá ser 
   // feita a verificação de produtos no carrinho enviando a mensagem de alerta 
   customers.forEach(async (cusomter: any) => { 
const productsInCart = cusomter.cart; // guarda o length da array cart 
  
  
     const today = new Date(); 
  
     //A vaŕiável hourNow recebera o horário convertido no formato 00:00 
     const hourNow = `${formatUnitOfTime(today.getHours())}:${formatUnitOfTime( 
       today.getMinutes() 
     )}`; 
  
     if (productsInCart.length > 0) { 
       // será feita uma comparação com o horário atual e o horário que foi configurado no objeto args 
       // se o horário configurado for o horário atual se  tiver produtos no carrinho será enviado a mensagem de alerta 
       if (hourNow === args.hour_messages) { 
         cusomter.cart.forEach(async (productsCart: any) => { 
           await sendMessage({ 
             contents: [ 
               //Estrutura do template onde será enviado a mensagem conforme os dados da api fake JSON Server 
               { 
                 type: "template", 
                 templateId: "c19443a9-1b36-4dec-a5ba-d3c7a480c90f", 
                 fields: { 
                   imageUrl: productsCart.product.image, 
                   customer_name: cusomter.name, 
                   product_name: productsCart.product.title, 
                   link_name: "www.example.com", 
                   link_promotions: "www.example.com", 
                 }, 
               }, 
             ], 
             from: args.from, 
             to: cusomter.whatsapp, 
           }); 
         }); 
       } 
     } 
   }); 
 } 
} 
  
export default AlertProductsBackToStockService; 

13. Execute o seguinte comando para iniciar a aplicação:  

yarn dev 

Será enviada uma mensagem conforme o horário configurado para os números que estão no arquivo db.json com uma mensagem de alerta para produtos esquecidos no carrinho de volta ao estoque. 

O repositório desta aplicação está disponível em zenvia-whatsapp-business-new-rules.  

Com este exemplo criamos um chatbot WhastaApp que possibilita o envio de uma mensagem de alerta de produtos esquecidos no carrinho que estão de novo ao estoque com mensagens personalizadas através da criação do template na plataforma da ZENVIA.

Com as novas regras de uso do Whatsapp Business API e utilizando a plataforma ZENVIA, agora é possível criar muitas outras estratégias para um atendimento personalizado utilizando o WhatsApp! 

Confira mais artigos:

 *O artigo foi desenvolvido com a revisão de Henrique Magarotto, IT Specialist | Tech Leader da ZENVIA | Twitter.

Categorias:
Escrito por

Zenvia

Leia também

Fique por dentro e confira as nossas dicas sobre o mercado mobile e interação digital.