---
title: A Beginner’s Guide to Popup Triggers
description: "In this beginner's guide to popup triggers, you'll learn: - What is a popup trigger [#](#what-is-a-popup-trigger) - Why need a popup trigger [#](#why-would-you-need-a-popup-trigger) - How to add a popup trigger [#](#how-to-add-a-popup-trigger) - Examples of how to use 3 common popup…"
url: "https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/"
updated: "2026-10-20"
category: Using Popup Maker / Getting Started
---

# A Beginner’s Guide to Popup Triggers

In this beginner's guide to popup triggers, you'll learn:

- What is a popup trigger [#](#what-is-a-popup-trigger)
- Why need a popup trigger [#](#why-would-you-need-a-popup-trigger)
- How to add a popup trigger [#](#how-to-add-a-popup-trigger)
- Examples of how to use 3 common popup triggers [#](#usage-examples)
- Tips on using popup triggers [#](#tips)
- How to do basic troubleshooting [#](#troubleshooting-popup-triggers)

### Chat with Claude

Need a hand? You can chat with Claude about this guide. We already set up the instructions for you. Just click and go.

 ✨[Ask Claude about this topic](#).

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](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#popup-trigger) 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!

The following is a list of triggers with example use cases:

- **A click**: You can use a **Click Open**trigger to open a popup when you click on a CTA (call to action).
- **A length of time**: You can set up a **Time Delay / Auto Open**trigger that automatically launches your popup 1 second (or more) after a post or page comes up.
- **A form submission**: If you use [a WordPress form that integrates with Popup Maker](https://wppopupmaker.com/docs/form-integration/popup-maker-integration-with-wordpress-form-builder-plugins/) in your popup, you can create a **Form Submission** trigger to launch a popup (e.g., thank you or confirmation message) when you submit your form.
- **A cursor moving off a web page**: You can set up an **Exit Intent**trigger to display a popup right before you navigate off your page (available as a [premium extension](https://wppopupmaker.com/extensions/)).
- **A page scroll**:** **You can add a **Scroll** trigger to display a popup when you scroll down a *percentage* of a post or page (available as a [premium extension](https://wppopupmaker.com/extensions/) ).

See a list of all **premium** triggers on our [popup triggers page](https://wppopupmaker.com/docs/getting-started/triggers/#premium-popup-triggers). 

## Why Do 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.

![file JOMv2MEZD7](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60ebc8719e87cb3d0124c3dc/file-JOMv2MEZD7.png)

Click **Add New Trigger**.

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

![file BOooQoHH0p](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f4f78e6ffe270af2a9001f/file-BOooQoHH0p.png)

For step-by-step instructions, visit our [Add a Popup Trigger](https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/) help guide.

### Need to Edit or Delete a trigger?

To edit a trigger, click the *pencil* ![pm pencil icon](https://wppopupmaker.com/wp-content/uploads/pm-pencil-icon.png) icon in the **Actions** column for the trigger you want to edit.

To delete a trigger, click the *delete* ![pm x delete icon](https://wppopupmaker.com/wp-content/uploads/pm-x-delete-icon.png) icon in the **Actions** column of the trigger you want to delete.

![Popup trigger Actions column for editing or deleting a trigger](https://wppopupmaker.com/wp-content/uploads/pm-trigger-actions-col.png)

## 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'll need to do the following:

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.

![file AvgCTp4NEb](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f12d1a766e8844fc3471b2/file-AvgCTp4NEb.jpg)

After 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

Clicking a link or a button is another way to show your popups.

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](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#css-selectors). For example, you can [assign your default popup's CSS class](#default-trigger-case) to a link or a button, or you can [assign your link's CSS class](#extra-css-selectors) to your popup. Once that's done, any click on that link (button, image, text, and more) will make your popup display!

#### Using the Block Editor

If you're using the block editor, Popup Maker adds a convenient [dropdown in the settings panel](#block-editor-popup-controls) to choose a **Click Open** popup.

This section covers both ways you can use CSS selectors (such as classes) to launch your **Click Open** popup:

1. Popup Maker's default popup CSS class
2. Extra CSS Selectors setting

#### Default Popup CSS Class

Note: Popup Maker creates a default CSS class for every popup. For your convenience, you can always add the `popmake-NNN` (where NNN is your [popup's ID number](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/)) to turn your HTML elements (e.g., text, links, buttons, and images) into Click Open triggers.

We'll show you how coming up next 😉

#### 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](https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/=) 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](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/) 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`.

![file I5wpZBEp59](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60ee84c600fd0d7c253ffcb5/file-I5wpZBEp59.jpg)

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.

![file 6e6dZZfFiv](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60eeccab61c60c534bd6f7d7/file-6e6dZZfFiv.png)

#### Gutenberg block editor

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.

##### Block editor **Popup Controls**

**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.

![file tVeghUzmwB](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/620e4805d86136157d9a560d/file-tVeghUzmwB.jpg)

##### Block editor **Advanced** settings

**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.

![file ckOC65yVg7](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60ee8b5c05ff892e6bc30e8a/file-ckOC65yVg7.png)

##### Gutenberg Click Open demo video

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

[Popup Maker click open demo.](https://www.youtube.com/embed/BEnK9_sBMy8?feature=oembed&enablejsapi=1&origin=https://wppopupmaker.com&modestbranding=1&showinfo=0&rel=0)

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 do the following:

1. Save and publish your changes. 
2. Bring up the public-facing (front end) 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](#divi) and [Elementor](#elementor).

#### Divi

Let's see how to make a [Divi](https://www.elegantthemes.com/gallery/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](#default-css-class) (e.g., `popmake-15`) and paste it into the **CSS Class** input field.

![file WMsukJPqPF](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/6346528505ba014734a39c74/file-WMsukJPqPF.png)

Save your  **Button Settings** and save your post or page.

##### Divi Click Open demo

Here's a demo of our **Divi** button example.

![file M0PeihyKrf](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/6346089a62a58869ee5f0bb6/file-M0PeihyKrf.gif)

#### Elementor

Here's how to make an [Elementor](https://elementor.com/) 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.

![file lN8iIhajY0](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/6346520a62a58869ee5f0c12/file-lN8iIhajY0.png)

**Step 2**: Edit your popup. Go to the **Popup Settings** > **Triggers** tab. Click on the pencil icon ![file w5cpfGpuFJ](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/633ae0363f38fe1e468631b8/file-w5cpfGpuFJ.png) on your **Click Open** trigger. In the [Extra CSS Selectors](#extra-css-selectors) field, enter `#` followed by the custom button ID from step 1. So in our example, we would type `#launch-popup-15`.

![file 8G0YeoHrYE](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/6346580fcf38bc37aecf8bcd/file-8G0YeoHrYE.png)

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

![Popup Maker Publish button](https://wppopupmaker.com/wp-content/uploads/popup-maker-publish-493w.jpg)

##### Elementor Click Open demo

Here's how our Elementor example looks.

![file YgJKyrAqrF](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/6346568762a58869ee5f0c16/file-YgJKyrAqrF.gif)

#### Extra CSS Selectors

What if you can't add a CSS class to your post or page (like in our [Elementor example](#elementor) 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](https://wppopupmaker.com/docs/triggering-popups/getting-css-selectors/) 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.

![file zszlWrnSO2](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f12a4e64a230081ba15e06/file-zszlWrnSO2.jpg)

What's going on above is that 3 different image classes were added as extra CSS selectors (using the dot notation). So, any time you have an image with any of the following classes (no preceding dot in the HTML code):

- et_pb_image
- elementor-image
- fusion-imageframe

When you click that image, it will launch your popup!

The **Extra CSS Selectors**setting is a powerful and more advanced feature. So, head over to our comprehensive [Extra CSS Selectors guide](https://wppopupmaker.com/docs/triggering-popups/click-trigger-settings-cheat-sheet/#extra-css-selectors) when you're ready to learn more.

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

When you add a CSS class or ID to your HTML, you **must leave out** 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"`

---

Now, when 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

Do you want to launch a cool thank you popup after someone submits a form? You can with Popup Maker's **Form Submission** trigger! As long as your [form plugin has a Popup Maker integration](https://wppopupmaker.com/docs/form-integration/popup-maker-integration-with-wordpress-form-builder-plugins/#form-plugins-supported), the form that launches your popup can be on a post, page, and even another popup.

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](https://wppopupmaker.com/docs/form-integration/popup-maker-integration-with-wordpress-form-builder-plugins/#form-plugins-supported).

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.

![file hfXsm8GIVW](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f4d19e766e8844fc347a00/file-hfXsm8GIVW.png)

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

![file PvA5V2cA2q](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f0bac96ffe270af2a8f5ed/file-PvA5V2cA2q.jpg)

**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.

![file hnLrVh1Piq](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f4d5b4766e8844fc347a05/file-hnLrVh1Piq.png)

Click the **Form** dropdown.

![file RhtRRL6D2g](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f12fa76ffe270af2a8f781/file-RhtRRL6D2g.jpg)

Select the form that you added in your first popup.

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/60f0bab1b37d837a3d0da4f2/file-Qd50AfOxgj.png)

**Publish** or **Update** your popup. 

##### Form Submission demo video

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

[Popup Maker Form Trigger Demo](https://www.youtube.com/embed/GPqrSJluo8g?feature=oembed&enablejsapi=1&origin=https://wppopupmaker.com&modestbranding=1&showinfo=0&rel=0)

## 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](https://wppopupmaker.com/docs/popup-display-front-end-behavior/your-popup-is-not-displaying-on-your-homepage/#targeting).
- **CSS conflict**: Sometimes, another (existing) [CSS](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#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](https://wppopupmaker.com/docs/popup-display-front-end-behavior/your-popup-is-not-displaying-on-your-homepage/#conflict) that will fix the conflict.
- **Cache**: Be sure to either [turn off all your caching or continuously clear all of your caches](https://wppopupmaker.com/docs/problem-solving/troubleshooting-your-first-popup/#did-you-clear-out-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](https://wppopupmaker.com/docs/problem-solving/troubleshooting-your-first-popup/) for more help.

### Advanced Troubleshooting

Visit our main [troubleshooting page](https://wppopupmaker.com/docs/category/problem-solving/) 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](https://wppopupmaker.com/support/) to submit a ticket, join our Facebook group, or check out all of our resources.