No artigo a seguir você encontrará:

1. Criando e preparando o fluxo Zenvia
2. Criando a aplicação Node.js
3. Criando o banco de dados
4. Voltando à aplicação
5. Os 4 passos para uma boa qualificação de leads

Estabelecer um bom processo de qualificação de leads apresenta uma série de vantagens para as empresas hoje, o que inclui apoio ao time de vendas para focar nas melhores oportunidades, aumento da precisão do funil de vendas e redução de custos, além de aumentar o poder competitivo da organização. 

Vamos construir um fluxo desse processo por meio do Zenvia Flow. O chatbot irá receber informações do usuário para qualificar esse lead usando um preset disponibilizado pela própria Zenvia. 

As informações que o bot obterá são nome, e-mail, empresa e a razão pela qual a pessoa está entrando em contato. A partir daí, o Zenvia Flow enviará as informações coletadas para a aplicação – no caso a API criada no tutorial a seguir – e esta armazenará tudo em um banco de dados 

Você pode acessar a aplicação final construída neste tutorial 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 Flow > Novo Fluxo

1- Selecione o template Qualificação de Leads com integração API:

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

3- Clique em Testar, em Escolha a aparência do fluxo, selecione Criar Novo.

4- Personalize a aparência do seu fluxo de acordo com sua necessidade e salve o estilo.

5- Após esta criação, você poderá escolhê-la e concluir a integração:

6- Remova a última mensagem programada destinada a nós que estamos desenvolvendo fluxo:

7- Configure as informações que serão enviadas para a aplicação que iremos construir. Acesse o card Integração, expanda a aba de Parâmetros de Consulta e coloque as informações coletadas anteriormente durante o fluxo. Essas informações ficam salvas em variáveis do fluxo e podem ser acessadas da seguinte forma: #{variavel}.

O nosso fluxo está quase pronto. Agora precisamos criar a aplicação, que irá receber essas informações. Depois disso, precisamos voltar aqui no fluxo parar colocarmos o endereço da aplicação.

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- Crie um arquivo src/server.ts para testarmos a aplicação:

console.log('Hello World!')

5- Abra o arquivo package.json e insira o script para iniciar o servidor assim como na área grifada em cinza:

{
  "name": "zenvia-lead",
  "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-d": "^1.1.1",
    "typescript": "^4.1.3"
  }
}

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

npm run dev
yarn dev

Criando o banco de dados

1- Vamos começar criando o nosso banco de dados, que armazenará as informações dos leads. Para fins didáticos, vamos utilizar o banco de dados SQLite, pois ele não necessita de instalação e o banco fica salvo em apenas um arquivo. Para manusear o banco de dados vamos utilizar o Prisma, ORM (Object Relational Mapper) para Node.js e Typescript, que é muito útil e prático, permitindo que alteremos o banco de dados mudando apenas uma linha de código. Instale as dependências do prisma: prisma e @prisma/client e inicialize o prisma:

npm install prisma @prisma/client && npx prisma init
yarn add prisma @prisma/client && npx prisma init

A inicialização do prisma irá gerar um arquivo prisma/schema.prisma e é nele que iremos esquematizar nosso banco de dados.

2- Arquitete o banco de dados no arquivo prisma/schema.prisma:

datasource db {
 provider = "sqlite"
 url   = "file:./dev.db"
}
generator client {
 provider = "prisma-client-js"
}
model Lead {
 id       Int      @id @default(autoincrement())
 nome     String
 email    String
 empresa  String
 mensagem String
}  

3- Execute a criação do banco de dados:

npx prisma migrate dev --name init --preview-feature

Assim, o arquivo do seu banco de dados será criado prisma/dev.db.

Voltando à aplicação

1- Vá no arquivo src/server.ts criado anteriormente e faça a configuração incial do servidor express:

import express, { json } from 'express'
// Inicializa o express e define uma porta
const app = express()
const PORT = 3000
// Indica para o express usar o JSON parsing do body-parser
app.use(json())
// Inicia o express na porta definida anteriormente
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`))

2- Neste mesmo arquivo, crie a rota que ficará responsável por receber a requisição POST, que será enviada pelo fluxo Zenvia (logo mais voltaremos nele para endereçar nossa aplicação) e salve no banco de dados:

import express, { json } from 'express'
import express, { Request, Response, json } from 'express'
import { saveLead } from './functions/saveLead'
// Inicializa o express e define uma porta
const app = express()
const PORT = 3000
// Indica para o express usar o JSON parsing do body-parser
app.use(json())
app.post('/lead', async (request: Request, response: Response) => {
 // Armazena os parâmetros passados pelo Zenvia Flow em variáveis
 const { nome, empresa, mensagem, email } = request.query
 // Verifica se as variáveis não são strings
 if (
  typeof nome !== 'string' ||
  typeof empresa !== 'string' ||
  typeof email !== 'string' ||
  typeof mensagem !== 'string'
 ) {
  response.status(400).end() // Responde quem solicitou nosso webhook com status 400
 } else {
  // Caso forem strings
  try {
   // Chama a função que armazena o Lead no banco de dados
   const createdLead = await saveLead({
    nome,
    empresa,
    email,
    mensagem,
   })
   response.status(201).json(createdLead) // Responde quem solicitou nosso webhook com status 200
  } catch (error) {
   response.status(500).end() // Responde quem solicitou nosso webhook com status 500 de erro
  }
 }
})
// Inicia o express na porta definida anteriormente
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`))    

3- Crie o arquivo functions/saveLead.ts que terá a interação com o prisma e irá administrar o banco de dados:

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
interface ISaveLeadInput {
 nome: string
 email: string
 empresa: string
 mensagem: string
}
export const saveLead = async (data: ISaveLeadInput) => {
 return await prisma.lead.create({ data })
}     

4- No arquivo src/server.ts, crie a rota que ficará responsável por receber a requisição GET, responsável por retornar a lista de todos os Leads de acordo com o que já tem cadastrado no banco de dados, permitindo que o usuário faça o que precisar com estes dados posteriormente:

// ...
app.post('/lead', async (request: Request, response: Response) => {
 // ...
})
app.get('/leads', async (request: Request, response: Response) => {
 try {
  const allLeads = await getLeads() // Chama a função que busca os Leads no banco de dados
  response.status(200).json(allLeads) // Responde quem solicitou nosso webhook com status 200
 } catch (error) {
  response.status(500).end() // Responde quem solicitou nosso webhook com status 500 de erro
 }
})
// Inicia o express na porta definida anteriormente
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`))       

Nossa aplicação está pronta. Você lembra do endereço citado anteriomente que teríamos que colocar no 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, e para isso, vamos utilizar o ngrok. Se você for subir sua aplicação em algum serviço de hospedagem, o procedimento a seguir não serve para você.

5- Para criar o link que o fluxo vai enviar a requisição que criamos lá no início deste tutorial, vamos utilizar o ngrok, também para expor nossa porta 3000 (porta em que a aplicação está rodando) e ainda criar um link público para que possam ser enviadas requisições http diretamente para a nossa aplicação local. Se a sua aplicação estivesse hospedada em algum site, não teríamos a necessidade da 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 (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 (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 /lead que é o recurso que disponibilizamos na nossa API (algo semelhante a isso: http://396e5b25cf84.ngrok.io/lead):

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á.

6- Volte para o app da Zenvia e insira o URL que criamos:

Pronto! Agora temos um sistema funcional que começa com um chatbot que colhe informações sobre o usuário e envia as informações deste lead para uma API, que armazena essas informações em um banco de dados, permitindo que sejam consultadas. A partir daí você pode você pode entrar em contato com esses leads para torná-los clientes.

Para integrar o chatbot em seu site, você pode simplesmente embedá-lo através de uma tag script disponibilizada pela própria plataforma da Zenvia, daí basta salvar o fluxo e publicá-lo:

Como você pode ver através do tutorial, chatbots unidos ao Zenvia Flow são grandes aliados na criação de fluxos de qualificação de leads. Dessa forma, as organizações que tiverem intenção de ganhar destaque no mercado e melhorar seu relacionamento com cliente devem considerar tais recursos. É um investimento sutil para um retorno generoso tanto para sua captação de dados quanto para sua percepção de marca.   

Os 4 passos para uma boa qualificação de leads

Qualificar leads exige alguns pontos de atenção, para que este seja o mais eficiente possível: 

1. Estabeleça um processo 

Antes de mais nada, é preciso compreender quais os principais pontos de contato das pessoas com sua empresa, como elas a conheceram e quais seus concorrentes. Estas são questões básicas que devem ser respondidas para que assim sejam mapeados os motivos que levam ao consumo de seus produtos e serviços. 

2. Defina critérios de qualificação de leads 

A falta de clientes em potencial é uma grande preocupação para as empresas. Porém, outro problema que pode custar caro é investir em um perfil errado de cliente, ou seja, tempo e dinheiro desperdiçados. Apresentar critérios de qualificação de leads irá evitar esse tipo de problema, e o ideal é que tal identificação seja feita logo no começo do atendimento. 

3. Crie conteúdos 

A partir do planejamento de conteúdo é possível tirar dúvidas e ainda apoiar as decisões de compra do cliente. Isso pode ser feito com a criação de conteúdo, desde os mais básicos, explicando seu serviço ou produto, aos mais avançados, mostrando a opinião e satisfação de outros consumidores. 

4. Use a tecnologia 

Um exemplo de como a tecnologia pode facilitar a qualificação de leads é a utilização de chatbots. Eles podem ser usados para tirar dúvidas de futuros clientes ou ainda sugerir produtos e serviços, tendo como base suas respostas ao longo da interação. Uma das maiores vantagens de automatizar o processo de qualificação de leads com chatbots está no custo, disponibilidade e escala de atendimento.