Blog Zenvia
O melhor portal de Marketing e Vendas para a sua empresa
O melhor portal de Marketing e Vendas para a sua empresa
Mudanças nas regras do WhatsApp Business API permitem mais opções de mensagens. Veja um caso de chatbot para essas novas possibilidades!
min de leitura
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:
No seguimento de varejo/e-commerce agora também é permitido envios sobre:
É 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.
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.
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.
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"
} 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.
