{"id":66431,"date":"2022-11-23T10:51:14","date_gmt":"2022-11-23T13:51:14","guid":{"rendered":"https:\/\/powertic.com\/?p=66431"},"modified":"2022-11-23T10:53:36","modified_gmt":"2022-11-23T13:53:36","slug":"como-conectar-elementor-e-mautic-usando-n8n","status":"publish","type":"post","link":"https:\/\/powertic.com\/pt-br\/como-conectar-elementor-e-mautic-usando-n8n\/","title":{"rendered":"Como conectar Elementor e Mautic usando n8n"},"content":{"rendered":"

A aquisi\u00e7\u00e3o de leads \u00e9 um dos primeiros passos em uma estrat\u00e9gia de automa\u00e7\u00e3o de marketing<\/a>, e no mais das vezes isso significa ter um formul\u00e1rio em uma landing page. Para quem usa WordPress, o Elementor \u00e9 um plugin que facilita a cria\u00e7\u00e3o de p\u00e1ginas de maneira f\u00e1cil e com design atraente.<\/p>\n\n\n\n

Com interface clica-e-arrasta (drag-and-drop<\/em>), \u00e9 poss\u00edvel criar um formul\u00e1rio de cadastro no Elementor em minutos. Mas como conectar o formul\u00e1rio do Elementor com o Mautic? Com o n8n (nodemation), essa integra\u00e7\u00e3o \u00e9 t\u00e3o f\u00e1cil e r\u00e1pida<\/strong> quanto a cria\u00e7\u00e3o da landing page<\/a>. Continue lendo que temos um tutorial no final deste post.<\/p>\n\n\n\n

O que \u00e9 o n8n e como ele integra Elementor e Mautic<\/h2>\n\n\n\n

Antes de come\u00e7ar, uma dica: se voc\u00ea est\u00e1 chegando agora no n8n, recomendamos ler esse post sobre essa ferramenta<\/a> open source de integra\u00e7\u00e3o. Em resumo, o n8n \u00e9 um middleware, um software que fica entre dois outros sistemas e ajuda a integr\u00e1-los.<\/strong><\/p>\n\n\n\n

Para esse tutorial, o mais importante \u00e9 lembrar que o n8n funciona a partir de acionadores (triggers), isto \u00e9: algo acontece que faz um fluxo (workflow) iniciar. Na integra\u00e7\u00e3o que ensinamos aqui, esse \u201calgo\u201d \u00e9 o formul\u00e1rio ser preenchido e enviado.<\/p>\n\n\n\n

O passo-a-passo que ensinamos a seguir para conectar o <\/strong>Elementor<\/strong><\/a> ao <\/strong>Mautic<\/strong><\/a> usando n8n tamb\u00e9m funciona para outros plugins e sistemas<\/strong>, n\u00e3o s\u00f3 para o Elementor. A l\u00f3gica \u00e9 sempre a mesma: o gatilho (trigger) vai ser acionado quando algu\u00e9m preencher o seu formul\u00e1rio e o n8n vai receber essas informa\u00e7\u00f5es e repass\u00e1-las ao Mautic.<\/p>\n\n\n\n

Passo-a-passo para integrar formul\u00e1rio do Elementor com Mautic<\/h2>\n\n\n\n

Se voc\u00ea usa formul\u00e1rios do Elementor, \u00e9 muito simples enviar os dados de novos contatos direto para seu Mautic \u2013 e tamb\u00e9m enriquecer seus leads<\/a> com essas conex\u00e3o. A seguir, vamos mostrar o passo-a-passo desse processo. Claro, voc\u00ea precisa ter um Mautic e um n8n funcionando, al\u00e9m de um site com Elementor.<\/p>\n\n\n\n

1. Crie um novo workflow no n8n<\/h3>\n\n\n\n

No n8n, crie um novo workflow<\/strong>. Basta clicar no \u00edcone de Workflows e selecionar a op\u00e7\u00e3o \u201cNew blank workflow\u201d (novo workflow em branco).<\/p>\n\n\n\n

\"Para<\/a><\/figure>\n\n\n\n

2. Insira um n\u00f3 de webhook no workflow<\/h3>\n\n\n\n

Clique no bot\u00e3o com sinal de mais (+) no canto superior direito. Busque por \u201cWebhook\u201d no menu que aparece. Selecione o n\u00f3 de Webhook<\/strong> e arrasta para dentro do workflow.<\/p>\n\n\n\n

\"Para<\/a><\/figure>\n\n\n\n

3. Copie o link do webhook<\/h3>\n\n\n\n

Normalmente, quando voc\u00ea arrasta o n\u00f3 para o workflow, as configura\u00e7\u00f5es j\u00e1 abrem automaticamente. Se isso n\u00e3o acontecer, ou se voc\u00ea fechou a janela por algum motivo, basta clicar duas vezes sobre o n\u00f3 de Webhook para abrir de novo.<\/p>\n\n\n\n

Na janela de configura\u00e7\u00f5es, voc\u00ea pode alterar uma s\u00e9rie de informa\u00e7\u00f5es, dependendo de como seu site funciona. O n8n \u00e9 uma ferramenta low code<\/a>, ent\u00e3o antes de mais nada: n\u00e3o se assuste com a quantidade de op\u00e7\u00f5es! Elas existem para que voc\u00ea realmente consiga se conectar a v\u00e1rios sistemas, e cada um pode ter uma exig\u00eancia diferente.<\/p>\n\n\n\n

A maioria dos servi\u00e7os envia webhooks usando o m\u00e9todo POST<\/strong>. Observe que, logo antes do link, aparece a palavra GET. Para alterar, basta selecionar a op\u00e7\u00e3o POST no menu logo abaixo. Copie o link do webhook.<\/p>\n\n\n

\n
\"Para<\/a><\/figure>\n<\/div>\n\n\n

Link de teste vs. link em produ\u00e7\u00e3o (no ar)<\/h4>\n\n\n\n

Observe que o n\u00f3 de Webhook oferece duas op\u00e7\u00f5es de link: uma de teste (test URL) e uma para a vers\u00e3o final no ar, ou seja, em produ\u00e7\u00e3o (production URL). A diferen\u00e7a entre elas \u00e9 s\u00f3 isso mesmo: a de testa voc\u00ea usa enquanto est\u00e1 construindo a integra\u00e7\u00e3o. Quando estiver tudo pronto, basta ir l\u00e1 e trocar pela URL em produ\u00e7\u00e3o.<\/p>\n\n\n\n

4. Crie a landing page e o formul\u00e1rio no Elementor<\/h3>\n\n\n\n

Aqui, a criatividade \u00e9 livre. Os campos que voc\u00ea vai usar no formul\u00e1rio tamb\u00e9m ficam 100% a seu crit\u00e9rio.<\/p>\n\n\n\n

Em uma p\u00e1gina de aquisi\u00e7\u00e3o de leads, o m\u00ednimo que voc\u00ea precisa \u00e9 do email \u2013 ou do telefone, se estiver criando uma automa\u00e7\u00e3o para SMS<\/a> ou WhatsApp<\/a>. Voc\u00ea tamb\u00e9m pode pedir nome, cidade, etc, dependendo da sua estrat\u00e9gia de marketing<\/a>.<\/p>\n\n\n\n

5. Como conectar o Elementor ao n8n<\/h3>\n\n\n
\n
\"Para<\/a><\/figure>\n<\/div>\n\n\n

No Elementor, selecione o widget de Formul\u00e1rio<\/strong> e procure a op\u00e7\u00e3o \u201cA\u00e7\u00f5es ap\u00f3s o envio<\/strong>\u201d (Actions After submit). Uma das linhas ser\u00e1, exatamente, Webhook.<\/p>\n\n\n\n

Ao clicar sobre ela, \u00e9 criada uma nova guia de op\u00e7\u00f5es com o nome de \u201cWebhook\u201d. Clicando sobre ela ou na setinha \u00e0 direita, voc\u00ea ver\u00e1 que o \u00fanico campo a ser preenchido \u00e9, justamente, o da URL (link) do Webhook.<\/p>\n\n\n\n

Nesse campo, cole a URL<\/strong> de teste que voc\u00ea copiou do n8n. Pronto! Atualize sua landing page para testar o webhook em a\u00e7\u00e3o.<\/p>\n\n\n\n

Outras a\u00e7\u00f5es do formul\u00e1rio Elementor ap\u00f3s enviar<\/h4>\n\n\n\n

Voc\u00ea pode selecionar mais de uma \u201ca\u00e7\u00e3o ap\u00f3s o envio\u201d<\/strong> para quando a pessoa preencher o formul\u00e1rio. Por exemplo, al\u00e9m do Webhook de conex\u00e3o com o Mautic, voc\u00ea pode redirecionar a pessoa para o download de um Ebook<\/a> (dentro do seu site mesmo) ou para um v\u00eddeo no YouTube (com um link externo).<\/p>\n\n\n\n

6. Como ler os dados no formul\u00e1rio no n8n<\/h3>\n\n\n\n

No n8n, abra novamente as configura\u00e7\u00f5es do n\u00f3 de Webhook e clique no bot\u00e3o laranja \u201cListen for Test Event\u201d. Depois, abra a landing page que voc\u00ea acabou de criar, preencha o formul\u00e1rio e envie.<\/p>\n\n\n\n

O tempo que demora para o n8n receber as informa\u00e7\u00f5es da sua landing page depende dos servidores que voc\u00ea usa. Quanto mais workers, mais processos paralelos \u00e9 poss\u00edvel rodar, ou seja, mais r\u00e1pida a integr\u00e7\u00e3o  \u2013 de qualquer modo, n\u00e3o deve levar mais do que poucos segundos.<\/p>\n\n\n\n

No n8n, voc\u00ea vai ver que quando as informa\u00e7\u00f5es chegam, um \u00edcone de \u201ccheck\u201d verde aparece sobre o n\u00f3. Abrindo, voc\u00ea consegue ver as informa\u00e7\u00f5es que foram recebidas (JSON ou tabela\/table).\u00a0<\/p>\n\n\n\n

\"Visualiza\u00e7\u00e3o<\/a>
Visualiza\u00e7\u00e3o de dados no n8n em formato JSON<\/em><\/figcaption><\/figure>\n\n\n\n

JSON vs. Tabela<\/h4>\n\n\n
\n
\"No<\/a><\/figure>\n<\/div>\n\n\n

O n8n oferece duas op\u00e7\u00f5es de visualiza\u00e7\u00e3o dos dados recebidos via webhook: JSON e tabela.<\/strong> Se voc\u00ea n\u00e3o \u00e9 uma pessoa desenvolvedora ou n\u00e3o sabe o que \u00e9 um JSON, n\u00e3o se preocupe: basta clicar na chave do canto superior direito para visualizar os dados em formato de tabela (Table).<\/p>\n\n\n

\n
\"Visualiza\u00e7\u00e3o<\/a>
Visualiza\u00e7\u00e3o de dados no n8n em formato tabela<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

Na tabela, cada campo do seu formul\u00e1rio vai aparecer como uma coluna. O dado preenchido \u00e9 o valor dentro dessa coluna.<\/span><\/p>\n\n\n\n

Na tabela, cada campo do seu formul\u00e1rio vai aparecer como uma coluna. O dado preenchido \u00e9 o valor dentro dessa coluna.<\/p>\n\n\n\n

7. Como conectar o n8n ao Mautic<\/h3>\n\n\n\n

Agora, s\u00f3 falta pegar as informa\u00e7\u00f5es da tabela e inserir no Mautic. Comece clicando de novo no bot\u00e3o de \u201cmais\u201d (+) e buscando pelo n\u00f3 de Mautic<\/strong>.<\/p>\n\n\n\n

\"Para<\/a><\/figure>\n\n\n\n

Se voc\u00ea j\u00e1 inseriu suas credenciais<\/strong>, basta selecionar no menu, no campo de autentica\u00e7\u00e3o. Se ainda n\u00e3o fez isso, selecione a op\u00e7\u00e3o de \u201cNew credentials\u201d (novas credenciais) e cadastre os dados de login e senha.<\/p>\n\n\n\n

Selecione a op\u00e7\u00e3o Contacts (contatos) e Create (criar) nos campos seguintes. N\u00e3o se assuste: apesar do nome ser \u201ccriar\u201d, se um contato j\u00e1 estiver no seu Mautic o sistema s\u00f3 vai atualizar as informa\u00e7\u00f5es pra voc\u00ea. Voc\u00ea tamb\u00e9m pode selecionar empresas ou segmentos, por exemplo.<\/p>\n\n\n\n

\"Integra\u00e7\u00e3o<\/a><\/figure>\n\n\n\n

Agora, \u00e9 s\u00f3 preencher os campos do seu Mautic<\/strong> com as informa\u00e7\u00f5es do seu formul\u00e1rio. No modo de visualiza\u00e7\u00e3o de tabela, clique e arraste a coluna correspondente para o campo que voc\u00ea deseja atualizar.<\/p>\n\n\n\n

\"Para<\/a><\/figure>\n\n\n\n

Os campos padr\u00e3o do Mautic j\u00e1 aparecem logo de cara para voc\u00ea preencher. Se voc\u00ea utilizar campos personalizados, basta usar a op\u00e7\u00e3o \u201cAdd Field\u201d (adicionar campo) do menu \u201cAdditional Fields\u201d (campos adicionais)<\/strong>. Ao abrir o menu, todos os seus campos personalizados j\u00e1 aparecem ali e voc\u00ea s\u00f3 precisa selecionar o que interessa.<\/p>\n\n\n\n

Pronto! Agora que voc\u00ea j\u00e1 fez o teste e viu que est\u00e1 tudo certo, \u00e9 s\u00f3 voltar no Elementor e trocar a URL de teste pela URL de produ\u00e7\u00e3o do webhook. Publique sua p\u00e1gina e bons leads chegar\u00e3o no seu Mautic.<\/p>\n\n\n\n

Conectando outros formul\u00e1rios ao Mautic com n8n<\/h2>\n\n\n\n

Como falamos no come\u00e7o do post, a mesma l\u00f3gica que usamos nesse fluxo do Elementor pode ser usada para qualquer outro plugin ou formul\u00e1rio que voc\u00ea usa em seu site. S\u00f3 que talvez d\u00ea um pouco mais de trabalho, porque voc\u00ea vai precisar procurar onde inserir o link do webhook.<\/p>\n\n\n\n

Dependendo do sistema, voc\u00ea pode precisar, por exemplo, mudar o c\u00f3digo de resposta. Mas n\u00e3o \u00e9 dif\u00edcil: \u00e9 s\u00f3 ver qual o c\u00f3digo que o programa ou plugin pede e inserir no campo correspondente do n\u00f3 de Webhook do n8n. <\/p>\n\n\n\n

Voc\u00ea tamb\u00e9m pode fazer uma s\u00e9rie de verifica\u00e7\u00f5es, tanto no n8n quanto no servidor do seu site. Outra op\u00e7\u00e3o \u00e9 conectar o sistema em quest\u00e3o ao n8n usando a API.<\/p>\n\n\n\n

Nesse v\u00eddeo, o CTO da Powertic Luiz Eduardo explica o que \u00e9 o n8n, ensina como fazer isso e ainda d\u00e1 outras dicas valiosas.<\/p>\n\n\n\n

\n