Não há dúvidas de que a Black Friday se tornou uma das datas mais importantes para os varejistas. Em 2020, um estudo realizado pelo Google mostrou que houve um crescimento de 25% das vendas em relação ao ano anterior. E a tendência é que 2021 também siga o mesmo ritmo. Por isso, se preparar para a Black Friday é tão importante. E é aqui que entra o chatbot WhatsApp.

Por exemplo, o abandono do carrinho é um problema que assola os varejistas on-line o ano todo, e a Black Friday não é exceção.  Muitos compradores adicionam itens ao carrinho com a intenção de comprá-los somente quando os produtos forem colocados em promoção.

Isso é particularmente evidente durante a Black Friday, quando os clientes esperam que os varejistas ofereçam promoções. Um chatbot WhatsApp focado na época da Black Friday pode acompanhar uma pessoa que deixou um item em seu carrinho de compras. Eles podem simplesmente fazer o check-in ou oferecer incentivos adicionais para estimular uma compra. 

Além disso, utilizar um chatbot WhatsApp é oferecer ao cliente um assistente pessoal que faz recomendações e sugestões amigáveis e conversacionais, tudo de uma forma que dá a sensação de fazer compras auxiliado por um amigo. 

Com todos esses benefícios, é comum que diversos e-commerces optem pela utilização de um chatbot WhatsApp durante a Black Friday.  

Entretanto é preciso que a organização se prepare para desenvolver o canal e garantir que tudo saia como o planejado. 

Uma das primeiras etapas é solicitar a aprovação do WhatsApp para utilizar o WhatsApp Business API.  Esse processo envolve desde a criação da conta e a ativação do número no WhatsApp Business API até a verificação.  Para ficar por dentro das regras do WhatsApp Business API e das possibilidades de interação, confira o artigo “Novas opções de mensagens e regras do WhatsApp Business API”.

Depois disso, é chegada a hora de construir o seu chatbot. Mas como fazer isso? Neste tutorial, será construído um chatbot utilizando a API do WhatsApp e o ZENVIA Bots. 

Visão geral: construindo um chatbot WhatsApp

A construção do fluxo deste artigo segue a seguinte lógica: 

Deve-se obter o acesso à API do WhatsApp na ZENVIA, que também pode ser utilizada de forma integrada com a ferramenta ZENVIA Bots. Esta é capaz de criar fluxos conversacionais automatizados. Eles podem ser criados através de uma interface gráfica, ou através do ZENVIA Builder, um editor JSON que altera o fluxo. Serão utilizadas as duas formas neste tutorial. 

O fluxo entrará em contato com uma aplicação externa, também construída neste artigo, que, por sua vez, fará requisições à fake store API (uma API pronta que retorna informações de uma loja fictícia) e gerará a mensagem que deverá ser enviada ao usuário. 

Obtendo acesso a API do WhatsApp na ZENVIA 

Iniciando a construção do nosso chatbot WhatsApp, para utilizar a API do WhatsApp, é necessário realizar a contratação do serviço do WhatsApp Business através da plataforma ZENVIA. Para isso, acesse o site e realize a contratação. 

Após a contratação do serviço, é preciso criar um token para identificar suas requisições à API. Acesse, faça o login na plataforma e clique em Produtos > Tokens e webhooks: 

Crie um token, dê um nome e clique em Salvar: 

Salve o token em algum lugar, pois ele será utilizado mais tarde durante a integração com o ZENVIA Bots. Ele serve para que a ZENVIA identifique quem está efetuando a requisição e verifique se tem autorização ou não para utilizar o recurso.

Cadastrando templates 

Há duas formas de conversar com o usuário através da API: 

• O usuário entra em contato iniciando uma conversa, permitindo que nós enviemos mensagens a partir de então numa janela de 24 horas desde a última mensagem enviada por ele. 
• Enviamos uma mensagem a partir de um template, sem um início de conversa vindo do usuário. 

Neste tutorial, vamos seguir o seguinte fluxo: usuário solicita o contato por um meio externo > contato do usuário é salvo em uma base > chatbot envia uma mensagem inicial através de um template para todos os contatos salvos em um arquivo .csv > usuário responde > chabot segue a conversa. 

Os templates podem ter trechos dinâmicos, porém sempre seguem um “esqueleto” padrão. Vale ressaltar que este modelo deve ser enviado e aprovado pelo Facebook/Whatsapp. 

Existem algumas categorias de templates pré-definidas que devem ser seguidas. Para que sua mensagem não seja reprovada, ela deve estar relacionada com a categoria em questão. São elas: 

• Atualização de Conta; 
• Atualização de Pagamento; 
• Atualização de Finanças Pessoais; 
• Atualização de Envio; 
• Atualização de Reserva; 
• Resolução de Problemas; 
• Atualização de Agendamento; 
• Atualização de Transporte; 
• Atualização de Ticket; 
• Atualização de Alerta; 
• Resposta Automática. 

A mensagem em questão não deve passar de 1024 caracteres e só deve conter letras, dígitos, caracteres especiais, emojis e formatação do WhatsApp (negrito, itálico etc). Deve ser evitado o uso de mais de quatro espaços consecutivos e novas linhas. 

Se o conteúdo do esqueleto da sua mensagem fugir da categoria selecionada, há grandes chances de que a criação do template seja reprovada. Há mais informação sobre o assunto na documentação oficial. 

Para cadastrar um novo template, vá em Produtos > WhatsApp > Templates > Novo Template. Preencha as informações necessárias: 

Escolha o tipo de mensagem: 

Escreva o que deseja na mensagem: 

Após isso, é necessário aguardar a aprovação do WhatsApp para poder utilizar o template. Enquanto isso, você pode começar a construir o chatbot. 

Quando for aprovado, você poderá adquirir o template id que será utilizado durante a integração do ZENVIA Bots. 

Desenvolvendo o chatbot WhatsApp

O chatbot WhatsApp funcionará da seguinte maneira: o usuário supostamente teria solicitado contato através do nosso site.  Seu número de telefone e nome ficariam salvos em uma base de dados. Seria feita uma extração desses dados em um arquivo .csv.  

Em seguida, o chatbot enviaria uma mensagem inicial de confirmação para todos os contatos salvos neste arquivo. Caso o usuário responda positivamente, o chatbot pergunta qual categoria da qual ele deseja ver as ofertas. Ao escolher uma, o chatbot retorna a lista de itens em promoção. 

Para “alimentar” o chatbot, será usada a fakestoreapi. Nela há uma lista de produtos e categorias e iremos tratá-los como produtos em promoção. 

Serão utilizadas as seguintes rotas da fake API: 

GET /products/category/:categoryName: Busca produtos de uma determinada categoria. 

GET /products/categories: Busca todas as categorias de produtos. 

Agora é a hora de pôr a mão na massa. 

Faremos o seguinte: criar um fluxo customizável e utilizar o ZENVIA Builder para modificá-lo, permitindo o disparo de mensagens baseadas em um template para números presentes em um arquivo .csv. 

1. Crie um fluxo no ZENVIA Bots através do caminho Produtos > Zenvia Bots > Novo Fluxo > Criar Novo > CRIAR AGORA 

2. Todo o fluxo e seu funcionamento ficam salvos em um JSON que pode ser alterado conforme a necessidade. Acesse o ZENVIA Builder clicando no botão roxo no canto direito da tela: 

Substitua o JSON pelo seguinte template, lembrando de alterar o campo templateId pelo ID do seu template de mensagem do WhatsApp: 

{ 
  "alias": "Chatbot - promoções black friday", 
  "description": "Chatbot que mostra aos usuários uma lista de produtos.", 
  "steps": [ 
    { 
      "id": "idEventoFinal", 
      "type": "endEvent", 
      "label": "label 3", 
      "properties": { 
        "endEvent": "true" 
      } 
    }, 
    { 
      "id": "step0", 
      "type": "sendWhatsAppActivity", 
      "label": "Enviando mensagem", 
      "properties": { 
        "from": "#{session['whatsappFrom']}" 
      }, 
      "contents": [ 
        { 
          "type": "application/vnd.zenvia.v2.template+json", 
          "payload": { 
            "json": { 
              "templateId": "1f082f54-85c2-465b-8c31-a72edfa3f32f", 
              "fields": { 
                "costumer_name": "#{costumer_name}" 
              } 
            } 
          } 
        } 
      ] 
    }, 
    { 
      "id": "idEventoInicial", 
      "type": "apiCallEvent", 
      "label": "Evento inicial", 
      "properties": { 
        "startEvent": "true", 
        "appId": "whatsapp_notification", 
        "appType": "notification", 
        "from": "#{session['whatsappFrom']}" 
      }, 
      "variables": { 
        "whatsappFrom": "empty" 
      } 
    }, 
    { 
      "id": "step02", 
      "type": "whatsappEvent", 
      "label": "Recebe resposta do usuário", 
      "properties": { 
        "timeUnit": "minute", 
        "expirationInMinutes": "" 
      }, 
      "variables": { 
        "resposta": "payload" 
      } 
    }, 
    { 
      "id": "step03", 
      "type": "branch", 
      "label": "Sim ou não" 
    }, 
    { 
      "id": "step04", 
      "type": "sendWhatsAppActivity", 
      "contents": [ 
        { 
          "type": "text/plain", 
          "payload": { 
            "text": "[Entrar conteúdo da mensagem de acordo com a seguinte condição: sim]" 
          } 
        } 
      ] 
    }, 
    { 
      "id": "step05", 
      "type": "sendWhatsAppActivity", 
      "contents": [ 
        { 
          "type": "text/plain", 
          "payload": { 
            "text": "Ok! Me desculpe pela inconveniência" 
          } 
        } 
      ] 
    }, 
    { 
      "id": "step06", 
      "type": "sendWhatsAppActivity", 
      "contents": [ 
        { 
          "type": "text/plain", 
          "payload": { 
            "text": "Não entendi o que você quis dizer, responda com *sim* ou *não*" 
          } 
        } 
      ] 
    } 
  ], 
  "connections": [ 
    { 
      "from": "idEventoInicial", 
      "to": "step0" 
    }, 
    { 
      "from": "step0", 
      "to": "step02" 
    }, 
    { 
      "from": "step02", 
      "to": "step03" 
    }, 
    { 
      "from": "step03", 
      "to": "step04", 
      "label": "sim", 
      "conditions": [ 
        { 
          "type": "keywordCondition", 
          "values": [ 
            "sim", 
            "claro", 
            "positivo", 
            "s" 
          ] 
        } 
      ] 
    }, 
    { 
      "from": "step03", 
      "to": "step05", 
      "label": "não", 
      "conditions": [ 
        { 
          "type": "keywordCondition", 
          "values": [ 
            "não", 
            "nao", 
            "negativo", 
            "n" 
          ] 
        } 
      ] 
    }, 
    { 
      "from": "step05", 
      "to": "idEventoFinal" 
    }, 
    { 
      "from": "step03", 
      "to": "step06", 
      "label": "Inválido", 
      "isDefault": true 
    }, 
    { 
      "from": "step06", 
      "to": "step02" 
    }, 
    { 
      "from": "step04", 
      "to": "idEventoFinal" 
    } 
  ], 
  "defaultConversationalChannel": "WHATSAPP" 
} 

Clique em Salvar. O resultado ficará assim: 

3. No fluxo de resposta positiva, altere o step de mensagem: 

Armazene a resposta do usuário: 

4. Crie um ponto de decisão a partir da resposta: 

Criando a aplicação que gerará a mensagem 

Agora, vamos criar uma aplicação Node.js que irá realizar a requisição à fake store API e gerará uma string com a mensagem pronta para ser exibida pelo chatbot. 

1. Instale o Node.js no seu computador (dê preferência à versão LTS); 

 1.1. Opcional – Instale o yarn. O Node.js possui um gerenciador de pacotes padrão chamado npm (Node Package Manager), porém existe um gerenciador diferente chamado yarn. No restante deste artigo, haverão as duas opções de instalação para ambos gerenciadores de pacote, como no passo a seguir. 

2. Inicie o projeto criando o package.json com o seguinte comando no terminal: 

npm init -y 
 
yarn init -y 

3. Instale o  ts-node, ts-node-dev  e o  typescript como dependências de desenvolvimento:

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

3.1.Instale o arquivo de configuração do typescript: 

npx typescript --init 

 4. Abra o arquivo package.json e insira o script dev para iniciar o servidor: 

{ 
  "name": "zenvia-whatsapp-chatbot-blackfriday", 
  "version": "1.0.0", 
  "main": "index.js", 
  "license": "MIT", 
  "scripts": { 
    "dev": "ts-node-dev --transpile-only --ignore-watch node_modules src/server.ts" 
  }, 
  "devDependencies": { 
    "ts-node": "^10.2.1", 
    "ts-node-dev": "^1.1.8", 
    "typescript": "^4.3.5" 
  }, 
} 

4.1. Sempre que você quiser executar a aplicação, basta iniciar o script dev no terminal: 

npm run dev 
 
yarn dev 

5. Com o ambiente configurado, instale as dependências que serão utilizadas durante o desenvolvimento da aplicação:

npm i axios express && npm i -D @types/express 
 
yarn add axios express && yarn add -D @types/express 

6. Crie o arquivo src/server.ts com as configurações do servidor:

import express, { json } from 'express' 
import router from './router' 
 
const PORT = 4000 // Definindo a porta como 4000 
 
const app = express() // Inicializando o express 
 
app.use(json()) // Indicando ao express que será utilizado o body-parser json 
app.use(router) // Indicando ao express para que utilize as rotas do arquivo router.ts 
 
// Inicializa o servidor na porta definida na variável PORT 
app.listen(PORT, () => console.log(`Server running at port ${PORT}`)) 

7. Crie o arquivo de configuração do axios, biblioteca responsável por efetuar requisições http. Crie o arquivo src/config/fakeStoreApi.ts:

import axios from 'axios' 
 
const fakeStoreApi = axios.create({ 
  baseURL: 'https://fakestoreapi.com', // Base url da fake store API 
 
}) 
 
export default fakeStoreApi 

8. Para realizar a requisição à fake store API e gerar uma mensagem em string para ser exibida pelo chatbot, crie o use case GetProductsByCategory. Crie o diretório src/useCases/ GetProductsByCategory. Nele, crie os arquivos: 

GetProductsByCategoryUseCase.ts 

import fakeStoreApi from '../../config/fakeStoreApi' 
 
export class GetProductsByCategoryUseCase { 
  async execute(category: string) { 
    // Faz uma requisição à fake store API e armazena o retorno na variável "data" 
    const { data } = await fakeStoreApi.get(`/products/category/${category}`) 
 
    // Gera a mensagem final com o retorno em json da API 
    const finalText = 
      'Os produtos em promoção desta categoria são:' + 
      data 
        .map((product: any) => `\n - R$${product.price.toFixed(2)}: ${product.title}`) 
        .join() 
 
    // Retorna a mensagem gerada caso tenha retornado algum produto na chamada 
    return data.length === 0 ? 'Não há produtos em promoção desta categoria.' : finalText 
  } 
} 

GetProductsByCategoryController.ts

import { Request, Response } from 'express' 
import { getProductsByCategoryUseCase } from '.' 
 
export class GetProductsByCategoryController { 
  async handle(request: Request, response: Response) { 
    try { 
      // Gera a mensagem através da classe GetProductsByCategoryUseCase 
      const finalMessage = await getProductsByCategoryUseCase.execute(request.params.category) 
 
      // Retorna a mensagem em um json 
      return response.status(200).json({ finalMessage }) 
    } catch (error) { 
      // @ts-ignore 
      return response.status(500).json(error) 
    } 
  } 
} 
 

index.ts 

import { GetProductsByCategoryController } from './GetProductsByCategoryController' 
import { GetProductsByCategoryUseCase } from './GetProductsByCategoryUseCase' 
 
export const getProductsByCategoryController = new GetProductsByCategoryController() 
export const getProductsByCategoryUseCase = new GetProductsByCategoryUseCase() 

9. Crie o arquivo de roteamento src/router.ts. Nele, você terá as rotas que o fluxo irá utilizar: 

import { Router } from 'express' 
import { getProductsByCategoryController } from './useCases/GetProductsByCategory' 
 
const router = Router() // Inicializa o roteador do express 
 
// Rota fazer a integração do ZENVIA Flow com o WhatsApp 
/* 
  Sempre que há uma mensagem no chat do WhatsApp, a ZENVIA envia uma notificação a um webhook. 
  Esta rota será utilizada para receber esta requisição e devolver um status de sucesso. 
  Não será feito nada com as informações vindas na requisição  pois o fluxo será autosuficiente. 
  Apenas precisa desta aplicação para gerar a mensagem que será exibida. 
*/ 
router.post('/webhook', (request, response) => response.status(200).end()) 
// Rota chamada para buscar os produtos na fake store API e gerar a mensagem em string 
router.get('/products/category/:category', getProductsByCategoryController.handle) 
 
export default router 

Permitindo que a ZENVIA chame a aplicação local 

Precisamos tornar o webhook visível para que a ZENVIA possa enviar requisições. Para isto será utilizado o ngrok. Faça login no site, baixe a versão para Windows, extraia o zip, execute a aplicação (um terminal será aberto), autentique-se digitando ngrok authtoken SEU_TOKEN (seu token está na primeira tela do seu dashboard) e exponha a porta da aplicação (4000) digitando ngrok http 4000. Copie o URL da seção Forwarding gerado pelo ngrok: 

Lembre-se deste URL, pois ele será usado quando a integração do fluxo com a aplicação for realizada. 

Vale ressaltar que sempre que o ngrok é fechado, é gerado um novo link, devendo ser atualizado no portal ZENVIA. 

Voltando ao chatbot WhatsApp

1. Para cada categoria, faça uma requisição a nossa aplicação passando a categoria de acordo com a fake store API: 

Lembra da URL gerada no ngrok? Ela será utilizado aqui nas chamadas a nossa aplicação. 

2.  Edite o step da mensagem colocando a mensagem retornada pela aplicação: 

3. Edite uma das mensagens para exibir o retorno da aplicação: 

Já que será preciso exibir o retorno em todas as categorias, pode remover os demais steps de mensagem após criar as chamadas e ligar a este mesmo step. 

É possível conectar os steps clicando na borda e arrastando até o próximo step: 

O resultado final é algo parecido com: 

É possível adicionar um ponto de decisão para que o usuário possa encerrar o fluxo ou ver novamente as promoções de uma categoria: 

Pronto. Seu fluxo está concluído. Basta utilizá-lo para efetuar o disparo a partir de um .csv. 

O fluxo ficou desta forma no final: 

Disparando mensagens para contatos de um arquivo 

Agora que o fluxo está pronto, é preciso disparar a primeira mensagem. Isso será feito a partir de um arquivo .csv. Você pode criá-lo seguindo este modelo: 

Acesse Produtos > Zenvia Bots > Chatbot – promoções black friday (ou o nome que você deu para o fluxo) > Disparar fluxo: 

Selecione o número que enviará a mensagem: 

Nomeie o disparo, marque a caixa de que o arquivo já contém cabeçalho, anexe o arquivo .csv e faça o disparo: 

Pronto, sua mensagem será disparada para todos os contatos presentes no arquivo e eles poderão responder e obter respostas através do chatbot. 

Exemplo do resultado final: 

Agora, que tal criar seu próprio chatbot WhatsApp? Para saber mais, confira: 

• Como enviar e receber mensagens de WhatsApp utilizando a API da Zenvia
• Como criar um Bot no WhatsApp? Veja o passo a passo completo!
• Como criar um chatbot humanizado via WhatsApp com a API da Zenvia e a IA Watson da IBM
• Chatbot na Black Friday: como o bot pode ajudar nas vendas

Qualquer dúvida, entre em contato com a ZENVIA. Bons projetos para sua Black Friday!

*Nicholas Weber é Integration Analyst na ZENVIA | LinkedIn