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:
- “update” - atualizar a Oportunidade? true - sim, false - não.
- “status” - qual status da Oportunidade? “open” - aberta / “closed” - fechada / “canceled” - cancelada / “lost” - perdida.
- “equal_pipeline” está no mesmo funil? true - sim, false - não
- “filter_status_update” - Filtrar pelo Status da Oportunidade para aplicar a atualização - “open” - aberta
- “let deal” fornece informações da Oportunidade, tais como:
- “id” - referencia da Oportunidade para evitar duplicidade
- “title” - Título da Oportunidade.
- “company” - Nome da Empresa que pertence a Oportunidade.
- “person” - Nome do Contato (Pessoa) que pertence a Oportunidade
- “email” - E-mail de contato que será vinculado ao contato da Oportunidade.
- “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.