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)

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.

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.