Captar Leads é um passo importante, mas nutri-los pode ser a chave para transformar uma pessoa interessada em cliente!

A seguir, você encontra um tutorial que te ensinará a coletar informações de contato através do Zenvia Bots e a construir uma aplicação que armazene essas informações, permitindo que apliquemos a Régua de Relacionamento para nutrir este lead a fim de que ele se torne um cliente fidelizado. 

Com isso, aqui 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- Nutrindo os leads via e-mail;

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 Bots > 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- Adicione a informação do telefone do usuário:

8- 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 nossa 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á 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-nurture-leads",
  "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.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, utilizaremos 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, usaremos o Prisma, ORM (Object Relational Mapper) para Node.js e o 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
 celular  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 como 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, e esta será enviada pelo fluxo Zenvia (logo mais vamos voltar 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, celular } = 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' ||
  typeof celular !== '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,
    celular,
   })
   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, que 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
 celular: string
}
export const saveLead = async (data: ISaveLeadInput) => {
 return await prisma.lead.create({ data })
}         

4- No arquivo src/server.ts, crie a rota responsável por receber a requisição GET, que irá retornar a lista de todos os Leads de acordo, já cadastrados no banco de dados, para permitir que você use estes dados quando precisar 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 primeira parte da 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 expô-la para receber as requisições do fluxo Zenvia. Para isso, vamo 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 as 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 (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 /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. Este colhe informações sobre o usuário e envia as informações deste lead para uma API que as armazena em um banco de dados, permitindo que sejam consultadas. A partir daí você pode entrar em contato com esses leads e 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, basta salvar o fluxo e publicá-lo:

Nutrindo os leads via e-mail

Vamos voltar a desenvolver nossa aplicação para que possamos nutrir os leads capturados pelo fluxo. Neste tutorial, vamos fazer algo simples onde a aplicação consiga enviar e-mails para todos os leads cadastrados que preencheram o campo mensagem, e um modelo de e-mail diferente para os que não preencheram este campo. Mas você pode ir muito além e categorizar os leads de acordo com determinadas palavras usadas em sua mensagem. A imaginação é o limite e para não extender muito este tutorial, vamos continuar com a simplicidade, mantendo fins didáticos.

1- Instale a dependência nodemailer para podermos enviar e-mails:

npm i nodemailer && npm i@types/nodemailer -D
yarn add nodemailer && yarn add @types/nodemailer -D

2- Configure o serviço smtp para enviarmos e-mail. Neste tutorial vamos utilizar o serviço gratuito, perfeito para testes, chamado mailtrap.io. Comece criando uma conta.

3- Após a criação da conta, será criada uma inbox automaticamente e vamos precisar das informações dela para usarmos na configuração do nosso nodemailer:

4- Instale o dotenv para usarmos variáveis de ambiente:

npm i dotenv
yarn add dotenv

4.1- Crie o arquivo .env e adicione as credenciais do MailTrap nela da seguinte maneira:

MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USER=
MAIL_PASS=

5- Crie o arquivo src/providers/MailTrapProvider.ts

import nodemailer from 'nodemailer'
import { config } from 'dotenv'
config() // Inicialização do dotenv
export const mailProvider = nodemailer.createTransport({
 host: `${process.env.MAIL_HOST}`,
 port: Number.parseInt(`${process.env.MAIL_PORT}`),
 auth: {
  user: `${process.env.MAIL_USER}`,
  pass: `${process.env.MAIL_PASS}`,
 },
})          

6- Crie a função sendMail que ficará responsável por chamar o provedor de e-mail MailTrap no arquivo src/functions/sendMail.ts

import { mailProvider } from '../providers/MailTrapProvider'
export interface IInvolved {
 address: string
 name: string
}
interface IMail {
 to: IInvolved
 from: IInvolved
 body: string
 subject: string
}
export const sendMail = async (mail: IMail) => {
 await mailProvider.sendMail({
  to: mail.to,
  from: mail.from,
  html: mail.body,
  subject: mail.subject,
 })
}            

7- Crie a função nurtureLeadsWithMessage, que irá enviar um e-mail para todos os leads que decidiram contar mais sobre do que se tratava o contato inicial pelo chat. Esta função irá chamar a função getLeads criada anteriormente e enviará os e-mails com a função sendMail para os leads cujo campo mensagem está preenchido. Crie no arquivo src/functions/nurtureLeadsWithMessage.ts:

import { sendMail, IInvolved } from './sendMail'
import { getLeads } from './getLeads'
export const nurtureLeadsWithMessage = async (from: IInvolved) => {
 const allLeads = await getLeads() // Chama a função que busca no banco de dados os leads cadastrados
 // Envia um e-mail programado para todos os leads que não especificaram o motivo do contato
 allLeads
  .filter((lead) => lead.mensagem !== '')
  .forEach(async (lead) => {
   await sendMail({
    from,
    to: {
     address: lead.email,
     name: lead.nome,
    },
    subject: `Recebemos seu contato ${lead.nome}.`,
    body: `Olá ${lead.nome}! Tudo bem? Somos da Prensa e recentemente recebemos sua solicitação de contato através do nosso chat, sobre ${lead.mensagem}. Sua situação está sendo analisada por um de nossos especialistas e logo mais ele entrará em contato com você`,
   })
  })
}             

8- Crie a função nurtureLeadsWithoutMessage,que irá enviar um e-mail para todos os leads que não contaram mais sobre do que se tratava o contato inicial pelo chat. Esta função segue a mesma lógica da anterior, porém envia para quem não está com o campo mensagem preenchido. Crie no arquivo src/functions/nurtureLeadsWithoutMessage.ts:

import { sendMail, IInvolved } from './sendMail'
import { getLeads } from './getLeads'
export const nurtureLeadsWithoutMessage = async (from: IInvolved) => {
 const allLeads = await getLeads() // Chama a função que busca no banco de dados os leads cadastrados
 // Envia um e-mail programado para todos os leads que não especificaram o motivo do contato
 allLeads
  .filter((lead) => lead.mensagem === '')
  .forEach(async (lead) => {
   await sendMail({
    from,
    to: {
     address: lead.email,
     name: lead.nome,
    },
    subject: `Queremos saber mais sobre seu interesse ${lead.nome}.`,
    body: `Olá ${lead.nome}! Tudo bem? Somos da Prensa e recentemente recebemos sua solicitação de contato através do nosso chat, porém você não especificou o motivo do contato. Gostaria de nos explicar melhor sua situação?`,
   })
  })
}               

9- Volte no arquivo src/server.ts e crie as rotas para essas duas novas funções:

import express, { Request, Response, json } from 'express'
import { saveLead } from './functions/saveLead'
import { getLeads } from './functions/getLeads'
import { nurtureLeadsWithoutMessage } from './functions/nurtureLeadsWithoutMessage'
import { nurtureLeadsWithMessage } from './functions/nurtureLeadsWithMessage'
// ...
app.get('/leads', async (request: Request, response: Response) => {
 // ...
})
app.post('/sendMailToLeadsWithoutMessage', async (request: Request, response: Response) => {
 try {
  const { from } = request.body // Armazena as informações vindas no corpo da requisição em variáveos
  await nurtureLeadsWithoutMessage(from) // Chama a função que envia os e-mails
  response.status(200).send() // Responde quem solicitou nosso webhook com status 200
 } catch (error) {
  response.status(500).end() // Responde quem solicitou nosso webhook com status 500 de erro
 }
})
app.post('/sendMailToLeadsWithMessage', async (request: Request, response: Response) => {
 try {
  const { from } = request.body // Armazena as informações vindas no corpo da requisição em variáveos
  await nurtureLeadsWithMessage(from) // Chama a função que envia os e-mails
  response.status(200).send() // 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}`))                

10- Agora, você pode testar o envio destes e-mails automáticos através das rotas sendMailToLeadsWithoutMessage e sendMailToLeadsWithMessage e acessando o MailTrap podemos ver os e-mails:

Agora, você tem um fluxo completo capaz de capturar informações dos leads e armazenar em um banco de dados, sendo que a partir daí este irá encaminhar e-mails automáticos. Neste tutorial, fizemos algo simples onde a aplicação apenas envia e-mails previamente escritos aos leads.

No entanto, você pode ir muito além e adicionar mais informações no momento da coleta, categorizando os leads de acordo com determinadas palavras usadas em sua mensagem. Posteriormente, com os leads e seus perfis definidos, será possível escrever e-mails personalizados para os potenciais clientes levando em consideração sua categoria.

Afinal, quando o assunto é Marketing Digital, gerar leads é um primeiro passo muito importante. No entanto, apenas isso não é suficiente para aumentar a margem de rendimento do seu negócio. Existem técnicas bastante conhecidas de aceleração de vendas online, sendo uma delas a régua de nutrição ou de relacionamento.

Esta régua é um fluxo de ações realizadas com o intuito de nutrir um lead, ou seja, um potencial cliente. Nutrir significa manter contato com um possível consumidor, independente deste estar ou não momentaneamente interessado ou preparado para adquirir um serviço ou produto atrelado ao seu negócio.

De acordo com uma pesquisa realizada pela MarketingSherpa, uma das principais causas para o desempenho ruim das equipes de vendas é a falta de nutrição dos leads. Sem este cuidado, 79% dos leads gerados não retornam como clientes para o seu negócio. No entanto, para nutrir um lead de forma adequada é necessário ter em mente os 4 pilares principais de sustentação dessa técnica de aceleração de vendas:

• Informações sobre o lead: A nutrição de leads é feita com base nas informações contidas em sua base de dados. Assim sendo, um lead colhido com apenas “nome” e “e-mail” é tido como um lead pobre. Agora, outro que contenha “nome”, “e-mail”, “idade” e “profissão”, é considerado um lead rico. Quando mais informações relevantes forem coletadas, mais rica será a sua base de dados. Uma nutrição mais eficiente, por exempo, torna possível a criação de campanhas personalizadas, aumentando suas chances de atingir o alvo. 
   
• Conteúdo e personalização: Entregar conteúdos e campanhas personalizadas, como dito anteriormente, depende da informação coletada sobre o seu lead.
   
• Tempo e intervalos: Aqui duas perguntas precisam ser respondidas: “Qual o intervalo de tempo adequado para contar um lead?” e “Quanto tempo deve durar?”. É preciso ter em mente que uma nutrição de leads precisa ser feita de forma sequencial, ou seja, deve ter um “início”, “meio” e “fim”.
   
• Conversão ou não em cliente.