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 booking 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.
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.
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.
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 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!
Great! Now you know how to attach popups to JetEngine listings using JetPopup functionality.