A Beginner's Guide to Popup Triggers

In this guide, you'll discover:

  • What a popup trigger is
  • 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.

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 area 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 document.

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!

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

By default, Popup Maker actually creates a hidden click trigger with a CSS class selector of .popmake-123 and an attribute selector of [href="#popmake-123"]. So, if you don't add a popup trigger, you can still use the CSS class selector .popmake-NNN , where NNN is your popup's ID number to launch your popup.

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, 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 Button Block to your post or page. While the Button Block is selected, scroll down the settings sidebar and expand the Advanced settings section. Copy your popup's CSS class and paste it into the Addition CSS class(es) input field.

When you're finished adding your popup's CSS class to your button, save and publish your changes. Bring up the public-facing version of your post or page. Find the button that has your Click Open trigger's CSS class and click it. If everything's set up correctly, your popup will display!

Watch the short video below for a quick demo.

Extra CSS Selectors

What if you can't add a CSS class to your post or page? You can use the Extra CSS Selectors setting to target existing CSS classes for Click Open triggers. Let's explain 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.

Note: The syntax for adding an extra CSS selector is different from adding a CSS class to your code. 

When you add a CSS class or ID to your code, you must not add the dot (.) or the hash (#). 

Good: class="my-cool-class" id="my-cool-id"

Bad: class=".my-not-cool-class" id="#my-not-cool-id"

But, if you add a class or ID to the Extra CSS Selectors trigger setting, you must use the (.) and hash (#).

Good:  .my-cool-class, #my-cool-id

Bad: my-not-cool-class, my-not-cool-id 

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!

See the full list of supported WordPress form plugins.

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.

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.