Integração Wordpress + CRM PipeRun: INTEGRADOR JSON VIA WORDPRESS COM CONTACT FORM 7 E ELEMENTOR
13 min
Criado por Kalebe Vieira 🎗️ em 11/06/2021 17:12
Atualizado por Kalebe Vieira 🎗️ em 26/07/2021 11:45

Como enviar leads para o CRM PipeRun utilizando a integração de JSON através de um formulário Wordpress?

JSON (JavaScript Object Notation) é um formato de troca de dados simples entre sistemas, processo também conhecido como parkings.

WordPress é um sistema livre e aberto de gestão de conteúdo para internet, baseado em PHP com banco de dados MySQL, executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas e blogs online.


1- O QUE É NECESSÁRIO PARA REALIZAR ESTA INTEGRAÇÃO?
Para realizar esta integração será necessário uma conta ativa no CRM PipeRun, o endpoint com a hash da etapa do funil que definirá a etapa em que a oportunidade será cadastrada, uma página baseada em WordPress e também plugins Wordpress, como Elementor (para edição de páginas) e Contact Form 7 (para criar formulários).

Inicialmente, é preciso encontrar a hash da Etapa. Para isso, será necessário logar em uma conta no CRM PipeRun e ir em “Configurações > Funis e Etapas de Funis” ou acessar o link: https://app.pipe.run/v2/settings/pipelines.

Endpoint: https://app.pipe.run/webservice/integradorJson?hash=SUBSTITUA-AQUI
Tipo de requisição: POST
Tipo de conteúdo (Content-Type): application/json

Após selecionar a Etapa desejada, clique em Editar (Ícone de Lápis)

etapafunil.jpg

e copie o Campo com o nome da Hash.

hashdaetapa.jpg

Com a Hash copiada, substitua-a no final do Endpoint e salve para utilizarmos posteriormente no script.

2 - APLICANDO O CONTACT FORM 7
Após fazer login no Wordpress, o primeiro passo é aplicar o plugin Contact Form 7, que será o responsável por criar e estruturar o formulário que utilizaremos para enviarmos as informações para o CRM PipeRun.

Para acessar o Formulário, basta clicar no menu de “Contato” na barra lateral e selecionar “Formulário de Contato”.

Na listagem de Formulários de Contato, deverá ser selecionado o formulário desejado, ou caso ele ainda não tenha sido criado, clique em “adicionar novo” formulário.

formularioContato.jpg

Após selecionar o Formulário, crie os campos da seguinte maneira, conforme o exemplo abaixo:

ATENÇÃO: Nos campos do formulário, será necessário informar um ID para cada item, pois utilizaremos de maneira individual posteriormente.

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

3 - APLICANDO O ELEMENTOR

Após instalar o plugin, navegue pela barra lateral e clique na opção de “Páginas”, e em seguida na subopção de “Todas as Páginas”.

Na listagem de páginas, deve selecionar a página desejada, ou clicar em “Adicionar nova”.

paginawordpress.jpg

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

Com a edição de página via Elementor, devemos selecionar, na listagem de configurações, o widget com nome de “Shortcode”, e arrastá-lo para o local desejado da página.

No campo de shortcode, informe o shortcode do Contact Form 7 (visto na imagem 6), e clique em “Aplicar”, conforme a imagem abaixo:

No momento em que for inserido o shortcode, as informações do formulário serão importadas para a página, conforme a imagem abaixo:

O próximo passo será clicar no botão “+”, abaixo do seu formulário.

botaomaiselementor.jpg

O painel do Elementor mostrará as opções. Selecione o widget com nome de “HTML” e arraste até o local desejado na página.

4 - INSERINDO O SCRIPT DO CRM PIPERUN EM SEU FORMULÁRIO

No painel HTML, inclua o script para enviar as informações para a Integração JSON.

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

No início do corpo HTML, deve ser inserido a tag “<script>” e no final do corpo “</script>”.

Entre as tags citadas acima, construa as variáveis para receber as informações do formulário.

  • 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”.

 Crie a função “enviarDados()”, que deverá conter as seguintes informações:

  • let endpointHash” contém a URL de Integração JSON com a hash da Etapa.
  • let name, company, email, assunto e mensagem” são variáveis que estão recebendo os valores dos respectivos campos preenchidos, de acordo com o ID de cada elemento do formulário (visualizar imagem 5).

 

A função de configuração, 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.

 

  • let rules” fornece informações das regras que a oportunidade deverá receber, no exemplo acima:
    1. update” - atualizar a Oportunidade? true - sim, false - não.
    2. status” - qual status da Oportunidade? “open” - aberta / “closed” - fechada / “canceled” - cancelada / “lost” - perdida.
    3. equal_pipeline” está no mesmo funil? true - sim, false - não
    4. filter_status_update” - Filtrar pelo Status da Oportunidade para aplicar a atualização - “open” - aberta

 

  • let deal” fornece informações da Oportunidade, tais como:
    1. id” - referencia da Oportunidade para evitar duplicidade
    2. title” - Título da Oportunidade.
    3. company” - Nome da Empresa que pertence a Oportunidade.
    4. person” - Nome do Contato (Pessoa) que pertence a Oportunidade
    5. email” - E-mail de contato que será vinculado ao contato da Oportunidade.
    6.  “notes” - Observações/Anotações que serão enviadas para a Oportunidade.

 

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.

  • fetch” artifício para enviarmos as informações captadas por meio de “promessas”, onde deverá conter o Endpoint criado, e também a “config” contendo o método (POST, PUT, GET,...) e também o “body” que irá conter as informações na estrutura JSON, no caso a nossa variável “dataToSend”.
  • .then (response => response.json()” declarando que a informação de resposta deverá ser no formato JSON.
  • .then(data => { console.log(data)})” o 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).

 

Após finalizado nosso "Script" basta apenas clicar em “Salvar / Atualizar” na parte inferior do painel de edição.

 

Integração Wordpress + CRM PipeRun: INTEGRADOR JSON VIA WORDPRESS COM CONTACT FORM 7 E ELEMENTOR

INTRODUÇÃO:

Como enviar leads para o CRM PipeRun utilizando a integração de JSON através de um formulário Wordpress? 


JSON (JavaScript Object Notation) é um formato de troca de dados simples entre sistemas, processo também conhecido como parsing. 


WordPress é um sistema livre e aberto de gestão de conteúdo para internet, baseado em PHP com banco de dados MySQL, executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas e blogs online.

1- O  QUE É NECESSÁRIO PARA REALIZAR ESTA INTEGRAÇÃO?

Para realizar esta integração será necessário uma conta ativa no CRM PipeRun, o endpoint com a hash da etapa do funil que definirá a etapa em que a oportunidade será cadastrada, uma página baseada em WordPress e também plugins Wordpress, como Elementor (para edição de páginas) e Contact Form 7 (para criar formulários). 


Inicialmente, é preciso encontrar a hash da Etapa. Para isso, será necessário logar em uma conta no CRM PipeRun e ir em “Configurações > Funis e Etapas de Funis” ou acessar o link: https://app.pipe.run/v2/settings/pipelines.

Endpoint: https://app.pipe.run/webservice/integradorJson?hash=SUBSTITUA-AQUI

Tipo de requisição: POST

Tipo de conteúdo (Content-Type): application/json


Após selecionar a Etapa desejada, clique em Editar (Ícone de Lápis)

 


e copie o Campo com o nome da Hash.



Com a Hash copiada, substitua-a no final do Endpoint e salve para utilizarmos posteriormente no script.


2 - APLICANDO O CONTACT FORM 7

Após fazer login no Wordpress, o primeiro passo é aplicar o plugin Contact Form 7, que será o responsável por criar e estruturar o formulário que utilizaremos para enviarmos as informações para o CRM PipeRun. 


Para acessar o Formulário, basta clicar no menu de “Contato” na barra lateral e selecionar “Formulário de Contato”.


Na listagem de Formulários de Contato, deverá ser selecionado o formulário desejado, ou caso ele ainda não tenha sido criado, clique em “adicionar novo” formulário. 


Após selecionar o Formulário, crie os campos da seguinte maneira, conforme o exemplo abaixo:


Atenção: nos campos do formulário, será necessário informar um ID para cada item, pois utilizaremos de maneira individual posteriormente. 


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



3 - APLICANDO O ELEMENTOR


Após instalar o plugin, navegue pela barra lateral e clique na opção de “Páginas”, e em seguida na subopção de “Todas as Páginas”.


Na listagem de páginas, deve selecionar a página desejada, ou clicar em “Adicionar nova”.



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


Com a edição de página via Elementor, devemos selecionar, na listagem de configurações, o widget com nome de “Shortcode”, e arrastá-lo para o local desejado da página. 



No campo de shortcode, informe o shortcode do Contact Form 7 (visto na imagem 6), e clique em “Aplicar”, conforme a imagem abaixo:

 


No momento em que for inserido o shortcode, as informações do formulário serão importadas para a página, conforme a imagem abaixo: 



O próximo passo será clicar no botão “+”, abaixo do seu formulário.


O painel do Elementor mostrará as opções. Selecione o widget com nome de “HTML” e arraste até o local desejado na página.


4 - INSERINDO O SCRIPT DO CRM PIPERUN EM SEU FORMULÁRIO


No painel HTML, inclua o script para enviar as informações para a Integração JSON.



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

 

O que você achou deste artigo?
Últimos artigos visitados