Webhooks de Formulários do Elementor para N8N e Make

Como enviar os dados de seus formulários do Elementor PRO para as listas do GemMail usando N8N ou Make com a API do GemMail

Atenção: Esse material é para usuários avançados

Hoje em dia todo mundo quer ganhar tempo e uma das maneiras mais práticas que existem é fazer algum tipo de automação que facilite o trabalho de escravo, que geralmente somos obrigados a fazer, para ganhar nosso rico dinheirinho. E ferramentas como Zapier, Make e N8N acabam sendo uma mão na roda para ajudar nesse trabalho quando a idéia é não usar nenhum código.

Exato, essas são aplicações que facilitam o trabalho de quem não possui muita familiaridade com códigos ou simplesmente é um “preguicinha” como eu sou.

Pra falar a verdade o GemMail já permite nativamente que você faça o embed dos formulários de cada Lista criada usando o código de HTML de Form ou o iframe (que é o cúmulo da preguiça, mas funciona bem). Ou seja, se você já criou sua lista, pode jogar o HTML dor form em seu site e já vai funcionar sem dores de cabeça. 

Agora, se você deseja customizar ainda mais seus formulários e seu fluxo de dados usando as ferramentas citadas acima, vale a pena acompanhar esse tutorial.

 

Iniciando a brincadeira

Você tem um site em WordPress que usa Elementor Pro, Contact Form 7 ou qualquer outro plugin de Formulário que permita a utilização de WebHooks?

Se a resposta foi sim, quer dizer que vai dar certo.
Aqui ao lado eu criei um “formulário lindão” no Elementor e agora vou te mostrar como conectar ele no Make. Na sequência faremos o Make enviar os dados para a sua Lista correta do GemMail usando a API, só que antes de partir pro Make, vamos criar uma Lista no GemMail. 

Meu formulário lindão

Parte I - Pegando os dados da Lista e API do GemMail

Passo 1 - Se você não criou a sua lista, esse é o momento.

Sinto muito, não vou te ensinar como criar uma lista.
Siga esse tutorial: Como criar uma lista de contatos 

Tudo bem, vai. Vou te dar uma chance. Você vai ter que acessar a sua Lista de Contatos para pegar o ID e verificar quais campos usará para fazer a integração. 

Faça o Login no GemMail e Vá em Listas > Listas > Criar nova.
Se quiser encurtar o caminho, clique aqui quando estiver logado: Listas do GemMail

Agora siga o tutorial pra saber o que é cada campo que tem que preencher.

Depois de criar a lista volte para essa tela onde existe uma tabela com todas as suas listas e selecione a mesma clicando sobre o nome da lista que acabou de criar.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Parte II - Usando o Make com o GemMail

Passo 1 - crie um novo scenario

Uma vez que tenha feito o login no Make, acesse o menu como indicado na imagem abaixo e em seguinda clique no botão “+ Create a new scenario”

Passo 2 - crie um node do Tipo Custom WebHook

Agora que está no cenário, clique nesse botão “+” gigante e se quiser ir mais rápido digite “web…” que o Make já vai trazer as opções de nodes de Webhooks.

Selecione o “Custom Webhook

Passo 3 - Configure o WebHook

Na sequencia você vai ver que o seu cenário retornará o ícone do “custom webhook”

3.1 – Agora você deve clicar no botão “create a webhook” nesse pequeno popup que abriu. 

3.2 – Para você não se perder no cenário, pode criar um nome customizado para o seu gatilho de webhook.

3.1 – Agora você deve clicar no botão “create a webhook” nesse pequeno popup que abriu.

 

3.2 – Para você não se perder no cenário, pode criar um nome customizado para o seu gatilho de webhook em “Webhook name” e salve o que fez clicando nesse botão roxo escrito “Save”. Assim ficará fácil identificar o seu webhook depois. 

3.3 – Depois que você salvou o nome do seu webhook. Clique sobre ele para pegar a URL que contém o endpoint que será usado no seu Form do Elementor Pro. Você só precisa clicar em “Copy Address to clipboard” e depois clicar em ok para voltar à tela inicial do “Scenario”.

Selecionando o endpoint no Make

3.4 – Deixe o seu webhook pronto para receber os dados. Você já tem o seu endpoint do Make na mão, agora vamos testar esse endpoint. Clique em “Run Once”. Isso vai deixar o endpoint ativado para captar os dados que você enviar.

Run Once - Make

3.5 – Enquanto o Make estiver aguardando os dados, sua tela ficará desse jeito.
Agora é hora de pegar o endpoint que você copiou no passo anterior e jogar lá no elementor. Bora pro passo 4.

Passo 4 - Configurando o Formulário do Elementor para enviar os dados

4.1 – Agora volte para a sua página do WordPress e no Builder do Elementor insira o seu formulário com os campos que desejar. A dica aqui é usar os mesmos campos que você usou para criar a sua lista no GemMail, mas caso ainda não tenha criado a lista sem problemas, depois faremos isso. 
Por hora abra a página em que criou o seu formulário e acesse as configurações do formulário e aí clique em “Ações após o envio”

4.2 – Assim que o box abrir, selecione a opção “webhook”.

4.3 – O valor “Webhook” aparecerá no campo “Adicionar ação”, ao mesmo tempo o Box Webhook aparecerá no editor.

4.4 – Clique no box webhook e insira a URL com o endpoint que você copiou do make.
Não se esqueça de deixar o seletor “Dados avançados” ativo. 

4.5 – Agora pode testar o envio. Publique a sua página e abra a página publicada e envie os dados com o seu fortmulário. Pode usar o rascunho do Elementor mesmo que não tem problema. Funcionará do mesmo jeito. Assim que enviar e receber a confirmação de dados enviados com sucesso, abra o seu Make novamente. Se a palavra webhook estiver em verde, significa que já recebeu os seus dados. Então, clique no ícone de lupa e abra o Popup. Seus dados enviados estarão no Bundle 1. Clique no ícone de + 

4.5 – Ao clicar em Bundle 1 será possível visualizar todos os dados enviados pelo seu formulário ao webhook do Make. Todos esses valores indicados com as setas vieram no envio do formulário e são eles que usaremos para gravar os dados na lista do GemMail.

Dados em Bundle 1

Passo 5 - Ligando o Make com a API do GemMail

Compartilhe

Facebook
Twitter
LinkedIn

ATenção! Estamos atualizando nossos serviços de atendimento e servidores gemmail smart

ENtre 11 e 15 de Outubro de 2024 O suporte e configuracões de servidores de envios referentes a novas compras dos planos smart funcionarão de forma limitada! durante esse período, as configurações de novos servidores e dúvidas enviadas pelos canais de chat ou whatsapp poderão sofrer atrasos de até 48h.

Todos os demais serviços estarão funcionando plenamente. Atuais usuários do GemMail e compras de planos DIY não sofrerão nenhuma interrupção nos serviços.
Caso haja qualquer dúvida ou problema, deixe sua mensagem no chat ou whatsapp juntamente com o seu email de cadastro e responderemos o mais breve possível.
Agradecemos a compreensão!