Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetPopup: How to build a dynamic popup to work with JetEngine listings

useful information

Let this tutorial teach you the way of building a dynamic popup to work with JetEngine listings.

The JetPopup plugin enables to pull out the data from JetEngine listings within a popup. This tutorial will teach you the way to display dynamic data inside the popup.

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

Building a popup

Step 1 – Create a form with the help of JetEngine functionality.

Step 2 – Proceed to JetPopup > Add New Popup block in the WP Dashboard. Give your newborn popup a name and open it with Elementor.

Step 3 – Now look for the Form widget in the Elementor widgets panel. Drag and drop it into your new popup.

form widget

Step 4 – 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.

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

Step 5 – What you have to do now is to 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 with Ajax option to Yes in order for the content of the popup to load using AJAX method.

jetpopup general settings in elementor

Step 6 – Also, enable the Force Loading option so that the content of the popup loads every time it is opened.

Step 7 – As soon as everything is done properly, publish this popup by clicking the Publish button.

Attaching the popup

Before we begin the next step, you have to create a listing with JetEngine plugin.

Step 1 – Go to the Service’s listing template. Add JetElements Button widget with the “Book” label, which allows your customers to book the service right away.

button widget

Step 2 – Open the Button Settings and go to the Advanced tab. Here you can find the JetPopup accordion block with the JetEngine Listing popup option inside. Enable it in order for the required listing to be displayed within this popup.

Step 3 – Next, define the trigger type as Click On Widget and your popup will open once the button is clicked.

Step 4 – All in all, click the Publish button to save the 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 listing appear!

listing in the popup on the frontend

Great! Now you know how to attach popups to JetEngine listings using JetPopup functionality.