Triggering Popups with Clicks in JupiterX

Interactive elements such as popups can dramatically enhance user engagement on your website. By linking popups to a button or link click, you create a responsive and interactive experience that encourages users to take action. In JupiterX, triggering a popup via a click is a straightforward process. This article guides you through each step needed to set up a popup that appears when a link or button is clicked.

Step 1: Crafting Your Popup 

Begin by constructing a popup using JupiterX and Elementor:

1. Navigate to JupiterX > Popups in your WordPress dashboard and create a new popup or edit an existing one.
2. Customize the design and content of your popup to your liking within the Elementor editor.

Step 2: Configuring the Popup

Once your popup design is completed:

1. Access the Popup Settings by clicking on the gear icon situated at the bottom-center of the Elementor interface.
2. Switch over to the Advanced Tab.
3. Look for the Open By Selector option. Here, you'll input a ID or CSS Class(e.g., #subscribe-popup-trigger ).
4. Don’t forget to set the Display Conditions. It is recommended to select Include > Entire Site so the trigger you're creating can work from anywhere on your site.

Step 3: Linking the Popup to a Button or Link

Now that your popup is ready, the next step involves connecting it with a clickable element:

• Using the JupiterX Button Widget:
  • Edit or create a new page where you want the popup-triggering button to appear.
  • From the Elementor widgets panel, drag and drop the JupiterX Button Widget onto your page layout.
  • Select the button widget to open its settings, and navigate to the Advanced tab.

  • In the CSS ID or CSS Class field, enter the ID or class you specified in the popup settings (excluding the #  for IDs or .  for classes).

    Using a Text Link:

  • Alternatively, you can create a text link within your page content or editor by using HTML anchor tags. For example: <a id="subscribe-popup-trigger">Subscribe Now</a> .
  • Add your link text and apply the same ID you've used in the popup settings as the anchor's id  attribute.

Step 4: Testing the Trigger

After setting everything up:

• Make sure your popup is published and visible on the entire site following the display conditions.
• Save the changes you've made to your page, and then preview it.
• Test the functionality by clicking the button or link you've assigned the trigger to. The popup should load seamlessly upon the click.

Popups are an effective way to guide users in performing a specific action, from subscribing to newsletters to announcing limited-time offers. By following these steps, you’ll successfully set up a popup linked to a clickable button or link in JupiterX—no need for complex code or additional plugins.

By taking advantage of JupiterX's comprehensive features and Elementor's powerful editor, you add an extra level of sophistication to your website, providing your users with a frictionless experience that feels both intuitive and engaging.