A Beginner's Guide to Popup Triggers

In this guide, you'll learn:

• What is a popup trigger #
• Why you would need a popup trigger #
• How to add a popup trigger #
• Examples of how to use 3 common popup triggers #
• Tips on using popup triggers #
• How to do basic troubleshooting #

Let's start with the definition of a popup trigger.

What is a Popup Trigger? #

A popup trigger is an event that makes your popup appear. Check out the full definition in our glossary for more details.

In other words, a popup trigger is what makes your popup, well, pop up on a post or page!

Examples of triggers are:

• A click: You can create a Click Open trigger and assign it to a link or a button, so it opens your popup when it's clicked.
• A length of time: You can set up a Time Delay / Auto Open trigger to launch your popup 1 second (or more) after your homepage is viewed.
• A form submission: You can create a Form Submission trigger for a popular WordPress form to open your popup when your form is submitted.
• A cursor moving off a web page: You can make an Exit Intent trigger to show your popup when someone tries to navigate off your page with a premium extension.
• A page scroll: With a premium extension, you can add a Scroll trigger to display a popup when someone scrolls down a percentage of the page or when a page element comes into view.

See a list of all premium triggers on our popup triggers page. 

Why Would You Need a Popup Trigger? #

Since a popup trigger is what makes your popups appear, they are downright crucial for your popup to work.

In other words, If you want your visitors to see your popups, you'll need triggers for your popups to display!

How to Add a Popup Trigger #

When you create or edit a popup, you can add a popup trigger by going to the Popup Settings > Triggers tab under the popup editor.

Click the Add New Trigger button.

Select the kind of trigger you want from the dropdown and click  Add.

For step-by-step instructions, visit our Add a Popup Trigger help guide.

Usage Examples #

Let's go over 3 popular ways to use a popup, starting with the easiest.

1. Time Delay / Auto Open #

A popup that opens automatically after a time delay is probably the most common and simplest popup to have. After you create your popup, you would:

1. Add the Time Delay / Auto Open to the popup.
2. Set the delay time (e.g., 500ms for 0.5 seconds, 1000ms for 1 second, 1500ms for 1.5 seconds, 2000ms for 2 seconds).
3. Click Add.
4. Save and enable your popup.

In the  Time Delay Settings example below, the delay is set for 1000 milliseconds (1 second). Use the slider, input box, or -/+ buttons to adjust the delay.

After you you're done, your popup magically appears after 1 second when you visit any page or post on your site for the first time! 

You'll also notice that there's a cookie set in our example. We recommend using a cookie for your  Time Delay / Auto Open popups, so they only appear once instead of every time a new page is pulled up.

2. Click Open #

Another way to get popups to appear is by clicking a link or a button using a mouse, trackpad, or touchscreen. 

But how do we tell a link or a button to launch a specific popup? Popup Maker does this by using the browser's built-in support for CSS. For example, you can assign your popup's CSS class to a link or a button. Once that's done, any click on that link or button will make your popup display!

Default Trigger Case #

Let's walk through the default trigger case using a button-click example.

Popup Maker automatically creates a hidden click trigger with a CSS class selector of .popmake-123 and an attribute selector of [href="#popmake-123"]. If you don't add a popup trigger, you can still add the default CSS class popmake-NNN , where NNN is your popup's ID number to any text, link, image, or button to launch your popup. You can also make any link launch a popup by using #popmake-NNN for the URL!

In the screen capture below, you can see that the popup's ID is 15 (hover over the name), and its default CSS class is popmake-15.

Now that you have the CSS class for your popup, you can add that class to your button. Let's see how to do that in the classic editor and the Gutenberg (block) editor.

Classic editor #

Using the classic editor's Text tab, you can add your popup's CSS class to your HTML button element. Look for class="popmake-15" in the screen capture below for an example.

Gutenberg #

With the Gutenberg editor, you can add a Paragraph Block with a link or Button Block to your post or page. While the Paragraph or Button Block is selected, there are 2 ways you can connect your popup trigger:

Option 1: Under the Popup Controls settings, select the popup you want to open when someone clicks your link or button. Using the Popup Controls automatically adds your click trigger's default CSS class to a block.

Option 2: Scroll down the settings sidebar and expand the Advanced settings section. Copy your popup's CSS class and paste it into the Additional CSS class(es) input field.

Watch the short video below for a quick demo of our Gutenberg example.

When you're finished using the  Popup Controls settings or the popup's CSS class to connect your Click Open trigger, it's time to:

1. Save and publish your changes. 
2. Bring up the public-facing version of your post or page. 
3. Find the link or button that has your Click Open trigger's CSS class and click it. If everything's set up correctly, your popup will display!

What if you're using another page builder? Check out our instructions for Divi and Elementor.

Divi #

Let's see how to make a Divi button trigger a popup.

Go to your Divi button settings and click the Advanced tab. Open (or expand) the CSS ID & Classes section.

Copy your popup's default CSS class (e.g., popmake-15) and paste it into the CSS Class input field.

Save your  Button Settings and save your post or page.

Here's a demo of our Divi button example.

Elementor #

Here's how to make an Elementor button launch a popup. We'll need 2 steps.

Step 1: Edit your button. Under the Content tab, add your custom button ID in the Button ID field. We'll add launch-popup-15 for our example. Save your post or page.

Step 2: Edit your popup. Go to the Popup Settings > Triggers tab. Click on the pencil icon  on your Click Open trigger. In the Extra CSS Selectors field, enter # followed by the custom button ID from step 1. So in our example, we would type #launch-popup-15.

Click Update to save that. Click Publish or Update to save your Popup Settings changes.

Here's how our Elementor example looks.

Extra CSS Selectors #

What if you can't add a CSS class to your post or page (like in our Elementor example above)? You can use the Extra CSS Selectors setting to target existing CSS classes for Click Open triggers. Here's how that works.

Say you want all the images on your site to launch a popup when they're clicked. No problem. You can figure out the CSS class for your site images and add that to your Extra CSS Selectors trigger settings.

What if you need to add more than 1 extra CSS selector? Go for it. Just separate each selector with a comma (,).

Have a look at the visual below.

What's going on above is that 3 different image classes were added as extra CSS selectors. So, any time you have an image with any of the following classes:

• .et_pb_image
• .elementor-image
• .fusion-imageframe

That image will display your popup when it's clicked!

The Extra CSS Selectors setting is a powerful and more advanced feature. So, head over to our comprehensive Extra CSS Selectors guide when you're ready to learn more.

3. Form Submission #

We see a lot of people using a popup to display an opt-in form and then showing a  second popup when the form is submitted. That second popup could be any message, like a welcome or confirmation message, you want to share with your new subscriber.

Let's look at how you can do that with Popup Maker in only 2 steps!

After you have your opt-in form ready to go, follow these steps.

Step 1: Create your form popup (first popup) #

Create your popup and use the Add Form button above the popup editor's toolbar to insert your opt-in using your favorite form plugin. If your form plugin doesn't provide an Add Form button, insert the shortcode for your form directly into the popup editor.

Navigate to Popup Settings > Close > Form Submission and click on Close on Form Submission.

Publish or Update your popup. 

Step 2: Create your confirmation popup (second popup) #

Create the second popup with the content you want to display to your new subscriber. When you add the trigger, select Form Submission for the trigger type.

Click the Form dropdown.

Select the form that you added in your first popup.

Publish or Update your popup. 

When that's all done, you should get something like what you see in the demo video below.

Tips on Using Popup Triggers #

1. More than 1 trigger: You can create 2 or more triggers for the same popup. Maybe you need your popup to display automatically on the homepage. Yet, you'd like that same popup to appear when someone clicks a CTA button. No problem.
2. Mix and match triggers: We've already seen that you can have different types of triggers for the same popup. But you can do more! 
   1. You can create 2 more of the same type of trigger for the same popup too. That way, you can keep your triggers separate or more organized, making it easier to keep track of them. 
   2. You can reuse the same trigger on 2 or more elements, like adding the same trigger on a link and on a button on your menu.
3. Set up a cookie now or later: You can set up a cookie for your popup right when you add a trigger. Or, maybe you want your popup always to display when you first made it. But later, you change your mind, and you need a cookie to stop it from displaying all the time. Easy. You can add or remove popup cookies at any time.
4. More than 1 cookie: On the rare event you don't want your popup to display because of another popup, you can add more (different) popup cookies or even third-party cookies for your popup to check.

Troubleshooting Popup Triggers #

These are some basic troubleshooting steps to take if you don't see your new popup appearing.

My popup doesn't appear when I want it to #

• Published and enabled: First, make sure your popup has the content you want and is published and enabled.
• Targeting conditions: Next, check your Targeting settings to make sure you haven't accidentally excluded your popup from showing. Here's our help guide for checking your Targeting conditions.
• CSS conflict: Sometimes, another (existing) CSS rule can block your popup. When that happens, it's called a CSS conflict. The simplest way to fix a CSS conflict is to add a CSS rule to force your popup to appear. Follow our step-by-step instructions to add the CSS rule that will fix the conflict.
• Cache: Be sure either turn off all your caching or continuously clear all of your caches while you're creating and updating your popups. That way, you should get the latest version of your web pages.

Check out our beginner-friendly troubleshooting guide for more help.

Advanced troubleshooting #

Visit our main troubleshooting page for more advanced help guides.

Getting help #

If you need help with your popup, we're only a click away. 

Head over to our support page to submit a ticket, join our Facebook group, or check out all of our resources.