black friday banner sheriff star

Copy discount code:

black friday banner horseshoe">

Help Center

How to Build a Dynamic Popup for JetEngine Listings

How to Build a Dynamic Popup for JetEngine Listings

Let’s discover how to build a dynamic pop-up to work with JetEngine listings.

Before you start check tutorial requirements:

The JetPopup plugin lets pull out the data from JetEngine listings within a pop-up. This tutorial will teach you how to display dynamic data inside the created pop-up.

One of the best cases to represent this great functionality is to attach a listing to a booking form inside the pop-up. This way, your website visitors will be able to book one of the services you provide, any events, or even make an appointment, etc.


The following use case can be implemented only with pop-ups created with the JetPopup plugin.

Building a Popup

Proceed to the WordPress Dashboard > JetPopup > All Popups block. Pick the existing pop-up and press the “Edit” button to make some changes to it, or build a new one by pressing the “Create New Popup” button.

Select the layout preset, and click on the “Create New Popup” button.

jetpopup directory

Now, look for the JetForm widget in the Elementor widgets panel. Drag and drop it into your new pop-up.

Work on the available settings, and don’t forget to pick the form you built earlier in the Choose Form field. Style up the form and move to the following steps.

form in the pop-up settings

Also, you’ll need to add some of the dynamic JetEngine widgets, e.g., Dynamic Image to display a thumbnail of the custom post; Dynamic Field to showcase the title of the post and some metadata.

Things to know

The dynamic widgets are still empty on this step, but the content will appear later.

dynamic fields in pop-up

Now click the gear icon in the very bottom-left corner of the Elementor panel, and the JetPopup Settings will be displayed. Open the Settings accordion block and toggle the Loading content with Ajax option to “Yes” for the content of the pop-up to load using the AJAX method.

Also, enable the Force Loading option so that the content of the pop-up loads every time it is opened.

As soon as everything is done correctly, publish this pop-up by clicking the “Publish” button.

jetpopup settings

Attaching the Popup

Before we begin the next step, make sure you have created a listing with the JetEngine plugin.

Add the JetElements Button widget with the “Book” label to the listing, allowing your customers to book the service right away.

button content settings in listing

Open the Button settings and go to the Advanced tab. Here you can find the JetPopup accordion block where you can specify the Attached Popup and activate the JetEngine Listing popup option. Enable it as we attach the pop-up to the Listing Grid.

Next, define the trigger type as Click On Widget, and your pop-up will open once the button is clicked.

All in all, click the “Publish” button to save the settings.

button jetpopup settings

It’s time to have a look at what we have just done. Open the page and click the “Book” button to see the form appear.

listing on the front end

Now the form is displayed along with the dynamic widgets added to the pop-up earlier.

pop-up with dynamic widgets and form

Ultimately, now you know how to attach pop-ups to JetEngine listings using JetPopup functionality.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.