Como posso enviar leads como Oportunidades para o CRM PipeRun através de um formulário Wordpress?

Neste artigo, ensinaremos o passo a passo de como configurar uma integração com o Wordpress, utilizando os plugins Contact Form 7 e Elementor para envio de leads coletados através de um formulário como novas Oportunidades no CRM PipeRun.

Dica: para mais informações sobre as regras e possibilidades do Integrador JSON do PipeRun, acesse esse artigo.

Atenção! Esta integração exige conhecimentos técnicos para ser configurada.

REQUISITOS

Para realizar a integração, é necessário:

  1. Possuir uma conta ativa no CRM PipeRun;

  2. Ter acesso à Hash da Etapa do Funil para definir a Etapa de Funil em que a Oportunidade será cadastrada; 

  3. Uma página baseada em WordPress;

  4. Acesso aos plugins Elementor (para edição de páginas) e Contact Form 7 (para criar formulários) no WordPress.

TÓPICOS DO ARTIGO

  1. Instalando os plugins Contact Form 7 e Elementor

  2. Criando o formulário no Contact Form 7

  3. Estruturando o envio dos dados no Elementor

  4. Inserindo o script dos dados no Elementor

  5. Entendendo o script

  6. Definindo as regras de criação/atualização de Oportunidades

INSTALANDO OS PLUGINS CONTACT FORM 7 E ELEMENTOR


O primeiro passo para realizar a configuração da integração com o PipeRun consiste em instalar os plugins necessários.

1. Após fazer login na conta do WordPress, clique em "Plugins", localizado no menu lateral esquerdo.


2. Agora, procure por "Contact Form 7" e "Elementor" na caixa de busca e instale ambos os plugins.

Atenção! Para utilizar os plugins remotamente, será necessário ter acesso ao plano "Negócios" na conta Wordpress. Caso utilize os plugins localmente, você poderá fazer o download gratuito do Contact Form 7 e Elementor.

 

CRIANDO O FORMULÁRIO NO CONTACT FORM 7


Após ter instalado o plugin Contact Form 7, é hora de criar e estruturar o formulário que será utilizado para coletar os dados dos leads que serão enviados para o CRM PipeRun.

1. Para acessar o Formulário, basta acessar o menu de "Contato" (1) na barra lateral e clicar em "Formulários de Contato" (2).


2. Na listagem de Formulários de Contato, clique em "Adicionar novo" (1) para criar um novo formulário, ou então clique em um formulário já existente disponibilizado na listagem (2).


3. Após acessar a tela de configuração do formulário, estruture (em HTML) os campos que irão compor o formulário, seguindo o padrão abaixo:


Atenção! Será necessário informar um "id" para cada campo utilizado no formulário, para que seja possível acessar os dados coletados e enviá-los individualmente para o CRM PipeRun.

Caso necessário, outros campos para coletar dados dos leads também poderão ser criados. Para conferir quais outros dados poderão ser recebidos no PipeRun, confira este artigo. 

<label> Seu Nome [text* your-name id:idName] </label>
<label> Sua Empresa[text* your-company id:idCompany] </label>
<label> Seu E-mail [text* your-email id:idEmail] </label>
<label> Assunto [text* your-subject id:idAssunto] </label>
<label> Sua mensagem [textarea your-message id:idMsg] </label>

[submit "Enviar"]

4. Como último passo no Contact Form 7, copie o shortcode do formulário para utilizá-lo em sua página, via Elementor.


ESTRUTURANDO O ENVIO DOS DADOS VIA ELEMENTOR



1.  Após ter instalado o plugin Elementor, navegue pela barra lateral, acesse a opção "Páginas" (1) e, em seguida, clique em "Todas as Páginas" (2).


2. Na listagem de páginas, clique em "Adicionar nova" (1) caso a página ainda não exista, ou então clique na página existente disponibilizada na listagem (2).


3. Na edição da página, será necessário clicar no botão "Editar com Elementor", na parte superior, conforme a imagem abaixo:


4. Com a edição de página via Elementor, devemos selecionar o widget com nome de "Shortcode", posicionado no menu esquerdo, e arrastá-lo para a direita, para dentro da página.


5. No campo "Digite seu shortcode", cole o shortcode do Contact Form 7, que foi copiado no item 4 do tópico anterior e clique em "Aplicar".

No momento em que for inserido o shortcode, o formulário será importado para a página, conforme a imagem abaixo:


7. Agora, clique no botão “+”, localizado ao final do seu formulário, para inserir o script de envio de dados para a conta do CRM PipeRun.


8. Selecione o widget com nome de "HTML" e arraste para a direita, para dentro da página. 

INSERINDO O SCRIPT DO FORMULÁRIO


1. Vamos à última parte da configuração da integração. Em "Código HTML", cole o script disponibilizado abaixo para enviar as informações para o Integrador JSON.

O script irá coletar as informações do formulário e dispará-las para o Integrador JSON, que por fim, realizará o cadastro dos dados em sua conta do CRM PipeRun.

Atenção! Não esqueça de substitir [SUA-HASH-AQUI] pela hash da Etapa do Funil que receberá as Oportunidades, ao final da URL declarada na variável endpointHash, localizada na quinta linha. 

Para saber como localizar a hash das Etapas de Funis cadastrados na conta do PipeRun, clique aqui.


Dica: para mais informações sobre as regras e possibilidades do Integrador JSON do PipeRun, acesse esse artigo.

ENTENDENDO O SCRIPT


Para enviar os dados, será necessário criar as variáveis que irão receber as informações preenchidas do formulário, disponibilizadas nas tags do HTML.

var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('wpcf7mailsent', enviarDados);


function enviarDados() {
  let endpointHash = "https://app.pipe.run/webservice/integradorJson?hash=HASH_AQUI";


  let name = document.getElementById("idName").value;
  let company = document.getElementById("idCompany").value;
  let email = document.getElementById("idEmail").value;
  let assunto = document.getElementById("idAssunto").value;
  let mensagem = document.getElementById("idMsg").value;
       
  function configPost(method,body) {
    return {
      "method": method,
      "headers": { "Content-Type": "application/json"},
      "body": JSON.stringify(body)
    };
  }


  let rules = {
    "update": true,
    "status": "open",
    "equal_pipeline": true,
    "filter_status_update": "open"
  };


  let lead = [{
    "id": email,
    "title": assunto + " - " + name,
    "company": company,
    "name": name,
    "email": email,
    "notes": [
      "Mensagem: " + mensagem
    ]
  }];


  let dataToSend = {
    "rules": rules,
    "leads": lead
  };
        
  fetch(endpointHash, configPost("POST", dataToSend))
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
}

  • var wpcf7Elm será responsável por receber todas as informações contidas no formulário que pertencem a classe .wpcf7;

  • wpcf7Elm.addEventListener será responsável por captar os valores preenchidos no formulário, que será disparado para o CRM PipeRun ao clicar em “Enviar”.


A função enviarDados(), deverá conter as seguintes informações:

  • let endpointHash: contém a URL do Integrador JSON do PipeRun com a hash da Etapa do Funil que receberá as Oportunidades. Não esqueça de adicionar a hash, pois caso contrário, a integração não funcionará;

let name, let company, let email, let assunto e let mensagem são as variáveis declaradas que receberão os valores dos respectivos campos preenchidos, de acordo com o ID de cada elemento do formulário.

function enviarDados() {


  let endpointHash = "https://app.pipe.run/webservice/integradorJson?hash=[SUA-HASH-AQUI]";


  let name = document.getElementById("idName").value;
  let company = document.getElementById("idCompany").value;
  let email = document.getElementById("idEmail").value;
  let assunto = document.getElementById("idAssunto").value;
  let mensagem = document.getElementById("idMsg").value;


}

A função de configuração do integrador, por onde serão enviados o method, headers e também o body do tipo JSON.stringify(body) para sinalizar que as informações enviadas são do tipo JSON.

function configPost(method,body) {
      return {
        "method": method,
      "headers": { "Content-Type": "application/json"},
            "body": JSON.stringify(body)
    };
  }

DEFININDO AS REGRAS DE CRIAÇÃO/ATUALIZAÇÃO DE OPORTUNIDADES:


Por fim, será necessário definir as regras para criação ou atualização das Oportunidades via integrador JSON. Leia atentamente as informações disponibilizadas abaixo:

  • let rules: é a variável que armazenará o conjunto de dados sobre as regras que serão aplicadas nas Oportunidades cadastradas, bem como o conjunto de dados dados referentes ao lead:

    • "update": para atualizar a Oportunidade, caso o lead já exista no PipeRun, digite o valor true. Caso contrário, digite o valor false. O critério de validação de Oportunidade será explicado posteriormente;

    • "status": informe qual será o status das Oportunidades que serão cadastradas ou atualizadas. Digite o valor “open” para cadastrar/atualizar a Oportunidade com o staus aberta,  “closed” com o status fechada, “canceled” como cancelada ou “lost” como perdida;

    • "equal_pipeline": no caso de atualização de Oportunidades já cadastradas, é possível definir se estas deverão estar, obrigatoriamente, no mesmo Funil para serem passíveis de atualização. Caso contrário, não serão atualizadas. Para manter a obrigatoriedade de Funil, digite o valor true. Caso contrário, digite false;

    • "filter_status_update": para filtrar pelas Oportunidades já existentes  que poderão receber a atualização de acordo com seu status, digite “open” para filtrar somente pelas Oportunidades com status aberta,  “closed” para status fechada, “canceled” para status cancelada ou “lost” para status perdida;

    • let deal: é a variável que armazenará o conjunto de dados dos leads coletados através do preenchimento do formulário, para serem cadastrados (ou atualizados) como Oportunidades no PipeRun, tais como:

      • "id": validador para verificar se já existe outra Oportunidade cadastrada na conta para o mesmo lead. Neste caso, utilize o valor email, coletado no formulário através do campo "Seu e-mail". Desta forma, caso já exista uma Oportunidade previamente cadastrada na conta, cuja Pessoa vinculada contenha o mesmo e-mail do e-mail coletado no formulário, esta Oportunidade será identificada e, conforme a configuração das regras, será atualizada ou não. 

      • "title": é referente ao título da Oportunidade que será cadastrada/atualizada. Utilize o valor assunto para manter como título da Oportunidade o texto preenchido pelo lead no campo "Assunto" do formulário;

      • "company": nome que será vinculado à Empresa da Oportunidade. Utilize o valor company para manter o nome da Empresa da Oportunidade com o texto preenchido pelo lead no formulário, no campo "Sua empresa";

      • "name": nome que será vinculado à Pessoa da Oportunidade. Utilize o valor name para manter o nome do lead, preenchido no campo "Seu nome" do formulário;

      • "email": e-mail que será vinculado à Pessoa da Oportunidade. Utilize o valor email para manter o e-mail do lead, preenchido no campo "Seu e-mail" do formulário;

      • "notes": observações/anotações que serão enviadas para a Oportunidade como uma nota. Preencha com "Mensagem: " + mensagem para manter a mensagem preenchida no campo "Sua mensagem" do formulário. 

var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('wpcf7mailsent', enviarDados);


function enviarDados() {
  let endpointHash = "https://app.pipe.run/webservice/integradorJson?hash=HASH_AQUI";


  let name = document.getElementById("idName").value;
  let company = document.getElementById("idCompany").value;
  let email = document.getElementById("idEmail").value;
  let assunto = document.getElementById("idAssunto").value;
  let mensagem = document.getElementById("idMsg").value;
       
  function configPost(method,body) {
    return {
      "method": method,
      "headers": { "Content-Type": "application/json"},
      "body": JSON.stringify(body)
    };
  }


  let rules = {
    "update": true,
    "status": "open",
    "equal_pipeline": true,
    "filter_status_update": "open"
  };


  let lead = [{
    "id": email,
    "title": assunto + " - " + name,
    "company": company,
    "name": name,
    "email": email,
    "notes": [
      "Mensagem: " + mensagem
    ]
  }];


  let dataToSend = {
    "rules": rules,
    "leads": lead
  };
        
  fetch(endpointHash, configPost("POST", dataToSend))
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
}


let dataToSend é uma variável criada para receber informações de “rules” e “leads” para enviar somente uma estrutura no momento que o botão "Enviar" for pressionado no formulário.

let dataToSend = {
            "rules": rules,
            "leads": lead
        };


Por fim:

fetch - artifício para enviarmos as informações captadas por meio de “promessas”, que deverá conter a hash do endpoint criado, e também a configuração contendo o método de requisição (POST, PUT, GET, etc.), além do body que irá conter as informações na estrutura JSON, através da variável dataToSend.

.then (response => response.json()) declara que a informação de resposta deverá ser no formato JSON.

.then(data => { console.log(data)}) refere-se ao conteúdo que será enviado, e retornado via console contendo as informações das requisições enviadas para o Integrador JSON (criação de Oportunidade, Pessoa e Empresa).

fetch(endpointHash, configPost("POST", dataToSend))
            .then(response => response.json())
            .then(data => {
                console.log(data);
            });

Após finalizar o script basta apenas clicar no botão "Salvar" ou "Atualizar", localizado na parte inferior do painel de edição.


Dica: caso necessário, outros campos para coletar dados dos leads também poderão ser criados e enviados para diversos campos do PipeRun, tanto nativos, quanto customizados. Para conferir outros exemplos de dados que poderão ser recebidos no PipeRun via Integrador JSON, confira este artigo.

Em caso de dúvidas, chame nossa equipe no chat. 😉