Create PopUp with JetPopup from Crocoblock and Elementor

Hi guys,

In this video we will see how we can create a Popup with Elementor and Crocoblock's premium JetPopup plugin for your website.

In this other article I explain How to create a Popup with Elementor Pro.

Jetpopup is a payment plugin that you can buy for $22 separately:

or if you access the Crocoblock membership you have all for $130.

I love the philosophy of Crocoblock because instead of making a huge and heavy plugin, it divides the functionalities into small plugins and each of them makes a separate plugin. It seems very correct to me.

Once the plugin is installed, a new element will appear in the WordPress menu called JetPopup.

In my case I have the JetPopup, JetEngine and JetElementos For Elementor plugins installed.

If we go to JetPopup -> PresetLibrary we find a huge library of predefined Popups:

As we see in the previous image, we can find the popup that best suits our needs thanks to the filters it has.

In addition, in each popup it tells us what plugins it would need for its operation. In the one in the image it would be the Jet Elements plugin.

Install a Popup Template

There is no mystery, we click on install in the template that we like.

Once installed, it takes us to an Elementor page with the template added

Now we can add, modify and remove elements just as we would on any page with Elementor.

Pop-up Settings

The Popup's own options, such as entry or exit effects and at what times to show the popup, we have them in settings, located at the bottom left:

And when we click we find all these options:

Animation: It is the effect that the popup will have when entering

open-event: When we want the Popup to appear

We can make the Popup appear after x seconds of loading the page, after a time of inactivity, when scrolling the page a %, when leaving the page, a certain date, certain time and when clicking on an element of the web.

Display Conditions This is where we indicate where on the web we want it to appear:

We can tell you which pages we want to include it on or which pages we want to exclude it from.

Once our popup is published, it will appear on our website 😉

Make the Popup jump when clicking on a link

One option I particularly like is making a popup pop up when a link or button is clicked.

I especially like that we can make a Popup jump a link within a page that does not need to be made with Popup. I like this very much.

Add identifier to button

The first thing we have to do is add an ID or a class to the button that we want to be the popup trigger:

Now that we have the identifier of the button, we return to the Popup that we are creating.

If you remember, above, we saw that among the events that we can choose to trigger the popup is Custom Selector Click

If everything went well, now the popup will jump when someone clicks on the button that we have configured.

Send Leads to our Email Marketing tool with Webhooks

JetPopup has direct integration with Mailchimp. The integration is done through the API Key quickly and easily.

Within the Crocoblock menu —> JetPlugins Settings —> Integrations we can connect it:

But how would we do it with another tool that was not Mailchimp?

We would thanks to Webhooks.

I love Webhooks because they allow us to connect tools even if there is no direct integration with them.

In my example I will integrate it with charge, but it would be done much the same with any tool that accepts webhooks.

JetEngine allows us to create forms and also allows us to add webhooks so it's just what we need 😉

Once JetEngine is installed we can find Forms:

We create a form with the fields we need, in my case

In the part of Field Settings we add the fields that we need in our form.

The important part, where the magic happens, is in Post-submit Actions/Notifications Settings, that is, what happens once the form is filled out.

We have to click on Add Notification and add a notification of the type Call to Webhook

Where do we get the Webhook URL from?

We have to get this information from the tool that we want to connect, in our case we want to send the prospects to Encharge.

Within Encharge, when we create a Flow and add a form. We find the URL of the Webhook that we have to add in JetEngine:

Once the form is configured, we only have to add it to our JetPopup popup:

We saved our popup and now every time someone adds their data they will go directly to Encharge thanks to Webhooks.

Don't tell me it's not wonderful? 😉

See you in the next tutorial