Crie PopUp com JetPopup de Crocoblock e Elementor

Oi, pessoal,

Neste vídeo veremos como podemos crie um pop-up com o plug-in JetPopup premium do Elementor e Crocoblock para o seu site.

Neste outro artigo eu explico Como criar um pop-up com o Elementor Pro.

Jetpopup é um plugin de pagamento que você pode compre por $22 separadamente:

ou se você acessar a associação Crocoblock, você tem tudo por US $ 130.

Eu amo a filosofia do Crocoblock porque ao invés de fazer um plugin enorme e pesado, ele divide as funcionalidades em plugins pequenos e cada um deles faz um plugin separado. Parece-me muito correcto.

Depois que o plugin estiver instalado, um novo elemento aparecerá no menu do WordPress chamado JetPopup.

No meu caso tenho os plugins JetPopup, JetEngine e JetElementos For Elementor instalados.

Se quisermos JetPopup -> Biblioteca predefinida encontramos uma enorme biblioteca de pop-ups predefinidos:

Como vemos na imagem anterior, podemos encontrar o popup que melhor se adapta às nossas necessidades graças aos filtros que possui.

Além disso, em cada popup ele nos informa quais plugins seriam necessários para seu funcionamento. No da imagem seria o plugin Jet Elements.

Instalar um modelo pop-up

Não há mistério, clicamos em instalar no modelo que gostamos.

Uma vez instalado, leva-nos a uma página Elementor com o modelo adicionado

Agora podemos adicionar, modificar e remover elementos como faríamos em qualquer página com o Elementor.

Configurações de pop-up

As opções próprias do Popup, como efeitos de entrada ou saída e em quais horários mostrar o popup, temos nas configurações, localizadas no canto inferior esquerdo:

E quando clicamos encontramos todas essas opções:

Animação: É o efeito que o popup terá ao entrar

Evento aberto: Quando queremos que o Popup apareça

Podemos fazer o Popup aparecer após x segundos do carregamento da página, após um tempo de inatividade, ao rolar a página um %, ao sair da página, uma determinada data, determinada hora e ao clicar em um elemento da web.

Condições de exibição É aqui que indicamos onde na web queremos que ele apareça:

Podemos dizer em quais páginas queremos incluí-lo ou de quais páginas queremos excluí-lo.

Assim que nosso pop-up for publicado, ele aparecerá em nosso site 😉

Faça o salto pop-up ao clicar em um link

Uma opção que eu particularmente gosto é fazer um pop-up pop-up quando um link ou botão é clicado.

Eu gosto especialmente que podemos fazer um Popup saltar um link dentro de uma página que não precisa ser feito com Popup. Gosto muito disto.

Adicionar identificador ao botão

A primeira coisa que precisamos fazer é adicionar um ID ou uma classe ao botão que queremos que seja o gatilho pop-up:

Agora que temos o identificador do botão, voltamos ao Popup que estamos criando.

Se você se lembra, acima, vimos que entre os eventos que podemos escolher para acionar o popup está Clique do seletor personalizado

Se tudo correu bem, agora o pop-up saltará quando alguém clicar no botão que configuramos.

Envie Leads para nossa ferramenta de Email Marketing com Webhooks

JetPopup tem integração direta com Mailchimp. A integração é feita através da API Key de forma rápida e fácil.

Dentro do menu Crocoblock —> Configurações do JetPlugins —> Integrações, podemos conectá-lo:

Mas como faríamos isso com outra ferramenta que não fosse o Mailchimp?

Gostaríamos de agradecer Webhooks.

Adoro Webhooks porque eles nos permitem conectar ferramentas mesmo que não haja integração direta com elas.

No meu exemplo vou integrá-lo com Carregar, mas seria feito da mesma forma com qualquer ferramenta que aceite webhooks.

JetEngine nos permite criar formulários e também nos permite adicionar Webhooks então é só o que precisamos 😉

Depois que o JetEngine estiver instalado, podemos encontrar Forms:

Criamos um formulário com os campos que precisamos, no meu caso

Na parte de Configurações de campos adicionamos os campos que precisamos em nosso formulário.

A parte importante, onde a mágica acontece, está em Configurações de ações/notificações pós-envio, ou seja, o que acontece após o preenchimento do formulário.

Temos que clicar Adicionar notificação e adicione uma notificação do tipo Ligue para o Webhook

De onde obtemos o URL do Webhook?

Temos que obter essas informações da ferramenta que queremos conectar, no nosso caso queremos enviar os prospects para o Encharge.

No Encharge, quando criamos um Fluxo e adicione um formulário. Encontramos a URL do Webhook que devemos adicionar no JetEngine:

Uma vez configurado o formulário, basta adicioná-lo ao nosso popup JetPopup:

Salvamos nosso pop-up e agora toda vez que alguém adiciona seus dados, eles vão diretamente para o Encharge graças aos Webhooks.

Não me diga que não é maravilhoso? 😉

Vejo você no próximo tutorial