How to Open Popup with Elementor Button?

Hello,

The software we use to sell gift cards for our show provides the following HTML code to initiate the purchase process:

<div class="load-turitop" data-service="P7" data-lang="es" data-embed="button" data-gift="checked">Comprar bono regalo</div>

Click to expand...

It works thanks to the plugin I have installed from the gift card software. The relevant URL is: https://scandaldinnershow.com/regala-scandal/.

The first button is generated by the HTML code, and the second button is the one I would like to use to open the popup with the iframe.

Do you know if it is possible to open this popup using an Elementor button? I am currently using the free version of the Elementor plugin.

Thanks!

DonPirate said:

Hello,

The software we use to sell gift cards for our show provides the following HTML code to initiate the purchase process:



It works thanks to the plugin I have installed from the gift card software. The relevant URL is: https://scandaldinnershow.com/regala-scandal/.

The first button is generated by the HTML code, and the second button is the one I would like to use to open the popup with the iframe.

Do you know if it is possible to open this popup using an Elementor button? I am currently using the free version of the Elementor plugin.

Thanks!

Click to expand...

To open a popup with an Elementor button, follow these steps:

1. Create the Popup​

• Go to your WordPress dashboard.
• Navigate to Templates > Popups in the Elementor menu.
• Click on Add New and choose Popup.
• Design your popup using the Elementor editor (add text, images, buttons, etc.).
• After finishing the design, click on Publish and set display conditions (you can leave them as "Never" for now since the popup will be triggered by the button).

2. Get the Popup ID​

• Once you publish the popup, click on Settings (the gear icon in the lower left corner).
• Under the Advanced tab, find the Popup ID (e.g., #elementor-popup-123).

3. Create the Button​

• Edit the page with Elementor where you want the button.
• Add a Button widget to your page.
• Under the Link field, use this format: #popup-id (replace popup-id with the actual ID you got in Step 2).

4. Add Custom JavaScript for Triggering​

• In Elementor, select the Button widget.
• Under the Linkfield, enter this code instead of a normal URL:
  javascript
  Copy
  <span>elementorProFrontend.<span>modules</span>.<span>popup</span>.<span>showPopup</span>({ <span>id</span>: <span>YOUR_POPUP_ID</span> });<br></span>
• Replace YOUR_POPUP_ID with the actual Popup ID you found earlier.

5. Publish the Page​

• Save and publish the page.
• When you click the button on the live page, it should trigger the popup.