O WhatsApp está revolucionando a maneira de se fazer negócios, sendo amplamente utilizado pelas empresas e seus colaboradores. Tanto que 53% das pessoas não entram em contato com você, se você não tiver WhatsApp.

Uma ferramenta que pode ser integrada a ele e pode atuar como um CRM dentro do app é o Zenvia Conversion, utilizado hoje por mais de 600 empresas em processos de comunicação.

Antes de ver mais detalhes sobre o Zenvia Conversion, saiba o que você vai aprender aqui:

1. Criando e preparando o fluxo Zenvia
2. Criando a aplicação Node.js
3. Configurando o Zenvia Conversion
4. Criando a API REST

O Zenvia Conversion ajuda as organizações a simplificar a comunicação via WhatsApp com os seus clientes e sua tecnologia permite centralizar a comunicação desta ferramenta para equipes de vendas, automatizar parte da jornada do consumidor mediantes bots, e fazer broadcast de notificações de valor para o cliente final. 

A partir do Zenvia Conversion é possível: 

• Ter toda a equipe conectada ao WhatsApp;
• Criar uma ou várias linhas de WhatsApp para gerir as filiais, as equipes de vendas ou as diversas áreas de sua empresa; 
• Controlar todas as comunicações desde um só lugar; 
• Enviar notificações em escala a seus contatos; 
• Monitorar os resultados.

Dessa forma, o Zenvia Conversion age como um CRM do WhatsApp, permitindo o gerenciamento e acompanhamento da produtividade de cada membro da equipe.

A solução também disponibiliza um número exclusivo do WhatsApp Business para cada time da empresa, sendo permitido validar um número ilimitado de números do WhatsApp Business, por meio dos BSPs. 

Além disso, ele permite que você  tenha vários assessores trabalhando simultaneamente no WhatsApp de sua empresa, tenha dashboards e relatórios de controle a sua disposição, gere lembretes para seus clientes, faça upload de cotações e registre vendas.

Vamos agora construir uma aplicação funcional, juntando o Zenvia Bots e a Zenvia Conversion. Um atendimento inicial pode ser feito através de um web chat automatizado construído no Zenvia Bots, onde é possível coletar alguns dados iniciais como nome e número de celular do WhatsApp.

Com estes dados em mãos, podemos redirecionar o atendimento para o WhatsApp, onde é enviada uma mensagem inicial automática ao usuário e um atendente humano pode assumir a conversa com o cliente.

A aplicação desenvolvida neste tutorial está disponível no nosso repositório do GitHub.

Criando e preparando o fluxo Zenvia

Primeiro, é preciso ter uma conta criada na Zenvia, para isto basta entrar no site app.zenvia.com, clicar em “CRIAR UMA CONTA” no canto superior direito e preencher os campos.

Para criar o seu fluxo, vá para o Menu Principal > Produtos > Zenvia Bots > Novo Fluxo > Criar Novo > Criar agora.

1- Preencha as informações, selecione Web Chat e clique em Criar Novo:

2- Clique em Editar Aparência e Criar esta integração:

3- Coloque um nome para esta configuração, personalize conforme seus gostos e configure uma mensagem de boas vindas ao chat:

4- Agora que o fluxo está configurado é hora de decidir como ele funcionará. Comece capturando a primeira resposta do usuário na variável comments. Para isto, clique no ícone de editar no primeiro card e adicione uma variável:

5- Agora que configuramos o início do fluxo, vamos dar continuidade a ele. Crie um card para perguntar o nome do cliente, sempre que for criar um card, clique no + entre os nós onde você quer criá-lo:

6- Agora precisamos do número de celular do WhatsApp do cliente, vamos utilizar a função Valida Telefone para isso:

OBSERVAÇÃO: Quando quiser utilizar uma variável que foi criada anteriormente (como o username onde está guardado o nome do cliente) utilize a sintaxe #{variavel} assim como usado na print acima. Esta função especial de validação de telefone, armazena o retorno nas variáveis tel, tipoTelefone e telFormatado, podendo ser utilizadas nos próximos passos do fluxo.

7- Crie uma mensagem assim como no passo 5, porém não aguarde a resposta do usuário:

8- Crie uma chamada para uma API Json (REST) enviando as informações coletadas neste atendimento inicial. Vamos construir esta API REST em Node.js nos passos seguintes.

OBSERVAÇÃO: Lembre-se desta tela, pois iremos voltar aqui para substituir o URL dela quando tivermos configurado um posteriormente.

Não se esqueça de Salvar o fluxo.

Criando a aplicação Node.js

1- Instale o Node.js no seu computador (de preferência a 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 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 para iniciar o servidor assim como na área grifada em cinza:

{
 "name": "zenvia-flow-sirena",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "scripts": {
  "dev": "ts-node-dev --transpile-only --ignore-watch node_modules --respawn src/server.ts"
 },
 "devDependencies": {
  "ts-node": "^9.1.1",
  "ts-node-dev": "^1.1.1",
  "typescript": "^4.2.2"
 }
}

4.1- Sempre que você quiser executar a aplicação basta executar no terminal:

npm run dev
yarn dev

Configurando o Zenvia Conversion

Primeiro, precisamos criar uma conta na plataforma Zenvia Conversion, pode começar acessando este link. Preencha as informações e pronto. Logo após a criação de conta, será necessário colocar o seu número vinculado a sua conta do WhatsApp e fazer a verificação. Depois, preencha as informações sobre a sua empresa (seria sua empresa que estaria oferencendo o atendimento ao seu cliente) , segue exemplo:

A configuração inicial pode demorar um pouco.

Quando estiver pronto, vá na aba Apps procure por API Access crie o APP e armazene a API Key, pois iremos precisar dela mais tarde.

Com a nossa aplicação Zenvia Conversion pronta, podemos começar a construir nossa API REST que fará a ponte entre o Zenvia Bots e o Zenvia Conversion.

Criando a API REST

1- Instale o express, axios, dotenv e o body-parser para criarmos nossa API:

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

2- Crie o arquivo src/server.ts:

import express from 'express'
import bodyParser from 'body-parser'
import routes from './routes'
// Inicializa o express e define uma porta
const app = express()
// Indica para o express usar o JSON parsing do body-parser
app.use(bodyParser.json())
// Indica para o express usar o as rotas do arquivo routes
app.use(routes)
// Indica para o express escutar a porta 4000
app.listen(4000, () => console.log(`Server running on port 4000`))

3- Crie o arquivo de rotas src/routes.ts:

import express from 'express'
import { sendMessageController } from './UseCases/SendMessage'
// Inicialização do Router do express
const routes = express.Router()
// Declaração da rota /send/message que usaremos na aplicação
routes.post('/send/message', sendMessageController.handle)
export default routes   

> Observação: iremos criar o sendMessageController nos passos a seguir.

4- Crie o arquivo de configuração do axios para efetuar as chamadas à API do Zenvia Conversion:

import axios from 'axios'
import { config } from 'dotenv'
config()
export const api = axios.create({
 baseURL: `${process.env.BASE_URL}`,
})        

5- Crie o arquivo de configuração do ambiente na pasta raiz do projeto chamado .env e insira a sua API KEY adquirida no momento da criação da API Access no Zenvia Conversion:

BASE_URL=https://api.getsirena.com/v1
API_TOKEN=

Observação: se você já estiver rodando a aplicação, será necessário interromper a execução e rodá-la de novo para que ela reconheça as variáveis de ambiente que acabamos de criar.

6- Para enviar uma mensagem a alguém, precisamos ter um lead criado. No Zenvia Conversion, um lead é uma informação que permite a um agente entrar em contato com um cliente potencial, normalmente composta por informação de contato e no que o cliente está interessado. Vamos criar o caso de uso CreateLead para gerenciar a criação deste lead. Crie o arquivo src/UseCases/CreateLead/CreateLeadUseCase.ts:

import { config } from 'dotenv'
import { api } from './../../config/api'
import { ISendMessageRequestDTO } from './../SendMessage/SendMessageDTO'
// Inicialização do dotenv
config()
export class CreateLeadUseCase {
 async execute(data: ISendMessageRequestDTO) {
  api.post(`/lead/retail?api-key=${process.env.API_TOKEN}`, {
   priority: 0,
   provider: 'Web Chat Zenvia Flow',
   providerLeadId: '0',
   utmSource: 'Web Chat Zenvia Flow',
   firstName: data.firstName,
   lastName: data.lastName,
   phones: [data.tel],
   comments: data.comments,
  })
 }
}  

O SendMessageDTO.ts será criado mais tarde.

6.1-Crie também o arquivo src/UseCases/CreateLead/index.ts:

import { CreateLeadUseCase } from './CreateLeadUseCase'
const createLeadUseCase = new CreateLeadUseCase()
export { createLeadUseCase }   

7- Ao criar um lead, é criado automaticamente um prospect que, na prática, é um contato. Para conseguirmos adquirir o ID deste prospect, vamos criar o caso de uso GetProspectId. Crie o arquivo src/UseCases/GetProspectId/GetProspectIdUseCase.ts:

import { api } from '../../config/api'
import { config } from 'dotenv'
// Inicialização do dotenv
config()
export class GetProspectIdUseCase {
 async execute(tel: string): Promise {
  // Consulta as Prospects
  const { data } = await api.get(`/prospects?api-key=${process.env.API_TOKEN}`)
  // Verifica se existe Prospects
  if (data) {
   // Procura a prospect com o número de celular informado
   const prospect = data.filter((prospect) => prospect.phones.includes(tel))[0]
   // Se existe
   if (prospect) {
    // Retorna o ID da Prospect
    return prospect.id
   } else {
    // Retorna erro
    throw new Error('Não há nenhuma prospecção com este número de celular.')
   }
  } else {
   // Retorna erro
   throw new Error('Não há nenhuma prospecção.')
  }
 }
}    

7.1-Crie também o arquivo src/UseCases/GetProspectId/index.ts:

import { GetProspectIdUseCase } from './GetProspectIdUseCase'
const getProspectIdUseCase = new GetProspectIdUseCase()
export { getProspectIdUseCase }      

8- Agora que podemos ter o prospectId em mãos, podemos criar o nosso caso de uso que envia a mensagem de fato. Comece criando o DTO (Data Transfer Object) no arquivo src/UseCases/SendMessage/SendMessageDTO.ts:

export interface ISendMessageRequestDTO {
 firstName: string
 lastName: string
 tel: string
 comments: string
}    

8.1- Crie o caso de uso SendMessageUseCase no arquivo src/UseCases/SendMessage/SendMessageUseCase.ts:

import { api } from '../../config/api'
import { config } from 'dotenv'
import { ISendMessageRequestDTO } from './SendMessageDTO'
import { getProspectIdUseCase } from '../GetProspectId'
import { createLeadUseCase } from '../CreateLead'
// Iniciização do dotenv
config()
export class SendMessageUseCase {
 async execute(data: ISendMessageRequestDTO) {
  // Cria o Lead
  await createLeadUseCase.execute(data)
  // Pega o ID do Prospect
  const prospectId = await getProspectIdUseCase.execute(data.tel)
  // Envia a mensagem
  api.post(
   `/prospect/${prospectId}/messaging/whatsapp/notification?api-key=${process.env.API_TOKEN}`,
   {
    key: 'bfd5a62e-d720-4d8b-b282-54225cde1cc5',
   }
  )
 }
}            

No Zenvia Conversion, para iniciar um chat com um usuário é necessário enviar uma mensagem através de um template, cada um deles tem uma key de identificação e ela vai inserida na chamada acima. Para saber a key do template da sua conta, basta realizar uma chamada GET ao URI https://api.getsirena.com/v1/messaging/channels?api-key=<SUA_KEY>

Dentre os templates disponíveis, escolha um e coloque a key no arquivo src/UseCases/SendMessage/SendMessageUseCase.ts, que contem a chamada de envio da mensagem.

8.2- Crie o controlador SendMessageController no arquivo src/UseCases/SendMessage/SendMessageController.ts:

import { Request, Response } from 'express'
import { sendMessageUseCase } from '.'
export class SendMessageController {
 async handle(request: Request, response: Response): Promise {
  // Armazena os parâmetros de consulta em variáveis
  const { username, tel, comments } = request.query
  // Validações dos parâmetros
  if (
   username === undefined ||
   typeof username !== 'string' ||
   tel === undefined ||
   typeof tel !== 'string' ||
   comments === undefined ||
   typeof comments !== 'string'
  ) {
   return response.status(400)
  }
  // Organização do nome
  const name = username.split(' ')
  const fullName = {
   firstName: name[0],
   lastName: name[name.length - 1],
  }
  // Tente
  try {
   // Enviar a mensagem
   await sendMessageUseCase.execute({
    firstName: fullName.firstName,
    lastName: fullName.lastName === fullName.firstName ? '' : fullName.lastName,
    tel: `+55${tel}`,
    comments,
   })
   // Retorna status 201 (Created)
   return response.status(201).send()
  } catch (err) {
   // Em caso de erro, retorne o erro
   return response.status(400).json({
    message: err.message || 'Unexpected error.',
   })
  }
 }
}          

8.3- Crie o arquivo src/UseCases/SendMessage/index.ts:

import { SendMessageUseCase } from './SendMessageUseCase'
import { SendMessageController } from './SendMessageController'
const sendMessageUseCase = new SendMessageUseCase()
const sendMessageController = new SendMessageController()
export { sendMessageUseCase, sendMessageController }   

Nossa aplicação está pronta, lembra do URL que colocamos lá no último item do nosso fluxo Zenvia? Agora vamos gerar o URL que iremos colocar lá. Como essa API está rodando na nossa máquina local, precisamos de uma forma de expor ela para receber as requisições do fluxo Zenvia, para isso, vamo utilizar o ngrok.

Para criar o link que o fluxo vai enviar a requisição que criamos lá no início deste tutorial, vamos utilizar o ngrok para expor nossa porta 4000 (porta em que a aplicação está rodando) e criar um link público para que possa ser enviadas requisições http diretamente para a nossa aplicação local. Se a sua aplicação estivesse hospedada em algum site, não seria a necessidade dessa criação de um link público, pois já haveria um.

Faça login no site, baixe a versão para Windows, extraia o zip, execute a aplicação (abrirá um terminal), autentique-se digitando ngrok authtoken SEU_TOKEN (seu token está na primeira tela do seu dashboard) e exponha a porta da aplicação (3000) digitando ngrok http 3000

Após expor a porta da sua aplicação copie o link que aparecerá no terminal, volte para o último nó do fluxo e cole o link copiado do terminal no site. Lembre-se de colocar o URN /send/message que é o recurso que disponibilizamos na nossa API (algo semelhante a isso: http://396e5b25cf84.ngrok.io/send/message ):

Lembre-se que ao fechar o ngrok e expor a porta novamente, será gerado um novo link, então você deve ir ao fluxo e atualizar o link que estiver lá.

Pronto! Agora pode testar a aplicação.

A partir do momento que a mensagem for enviada, o contato aparecerá no app do Zenvia Conversion e a partir daí, qualquer atendente que tiver acesso ao Zenvia Conversion poderá continuar com o atendimento. O contato aparecerá com a primeira mensagem que ele nos enviou no campo comentários e a origem que configuramos na chamada.

Durante a pandemia o WhatsApp se consolidou como um novo canal de vendas no Brasil, onde mais de 160 milhões de pessoas o utilizam. Vendo essa oportunidade diferentes empresas começaram a investir neste canal de comunicação para melhorar seu atendimento ao consumidor e oferecer uma experiência mais pessoal.

O estudo recente da empresa de pesquisa MindMiners  deixa o fato ainda mais evidente. Além de ser usado para conversar com amigos e familiares, o aplicativo já vem sendo usado na realização de compras. Os dados da pesquisa apontam que 33% dos usuários urilizam o WhatsApp para tirar dúvidas e buscar informações sobre produtos; 27% usam o mesmo para realizar compras e 24% afirmam também contratar serviços.

Seguindo essa tendência, quando inserimos nessa equação o uso do Zenvia Conversion e Zenvia Bots é possível facilitar e agilizar todo o atendimento via WhatsApp. Se no contato inicial o usuário interage no web chat , como é mostrado no tutorial, a partir do Zenvia Conversion, o consumidor é rapidamente redirecionado para um atendente no WhatsApp, já tendo seus dados iniciais coletados e armazenados no sistema.