- What Is a Popup Trigger?
- How Do I Make My Popup Show Automatically?
- How Can I Have a Popup Open With a Click?
- How Can I Have a Popup Display Only Once per Session Instead of Opening on Every Page Load?
- How Do I Avoid Duplicate Content/Why Are All Popups Loading on All Pages?
- Why Doesn't My Popup Open (How Can I Troubleshoot Popups)?
- How Can I Check for JavaScript Errors?
- How Can I Open a Popup from a WordPress Nav Menu?
- How Can I Display Multiple Popups at the Same Time?
- How Can I Get CSS Selectors?
- Why Is My Popup Not Scrolling Properly/Background Scrolling?
- How Can I Display Different Popup and Overlay Scroll Effects in Combination?
- Why Does My Site Shift, Jump, Move, or Skip When a Popup Displays?
- What WordPress Form Builder Plugins Does Popup Maker Integrate with?
- How Can I Close a Popup and Create a Cookie When I Submit a Form?
- How Can I Find the Popup ID?
- How Can I Stop Popups From Loading Google Fonts?
- Are There Useful and Compatible Plugins with AJAX Login Modals?
- How Do I Use Custom JavaScript With Popup Maker?
- How can I hide Popup Maker from non-admins?
- Sample Code Disclaimer
In this Frequently Asked Questions (FAQ) doc, we have the short answers for each question. To dive deeper into each answer, click the links you see in each short answer.
If any of the terminology is confusing, you can look up definitions in our Popup Maker Glossary of Terms.
What Is a Popup Trigger? #
A popup trigger is an event (e.g., a click, some time delay, or submitting a form) that makes your popup appear.
In the video below, the popup shows up using a click trigger. Clicking the download button triggers a popup to open.
Think of it like a “light switch” for your popup. When the right action happens, your popup comes into view!
These are 2 other popular popup triggers that come with the free Popup Maker version.
- Time Delay / Auto Open: is a popup trigger that automatically displays a popup after a time delay. For this trigger, time is the event that makes the popup appear.
- Form Submission: launches a popup after someone submits a form. You can use Popup Maker’s Form Submission trigger as long as your form plugin has a Popup Maker integration.
How Do I Make My Popup Show Automatically? #
You need to use a Time Delay / Auto Open trigger.
To create a popup that automatically opens, follow our step-by-step guide for creating your first popup (auto opening).
For more details about each Auto Open setting, read our Time Delay / Auto Open Settings Cheat Sheet.
How Can I Have a Popup Open With a Click? #
You can use the Click Open trigger to open a popup by clicking any element on your post or page.
After you set up the Click Open trigger for your popup, you need to connect the trigger to an element (e.g., text, link, button, image) on your page. The 2 easiest ways to do that are the following:
- Add the default Popup Maker classes to your element.
- Assign existing or custom selectors from your element to your Click Open trigger.
Follow our A Beginner’s Guide to Popup Triggers to learn how to connect your Click Open trigger to an element on a post or page.
If you’re wondering how to find existing CSS selectors (for option 2), see the FAQ How Can I Get CSS Selectors?
How Can I Have a Popup Display Only Once per Session Instead of Opening on Every Page Load? #
The short answer, use a cookie 🍪
A cookie (i.e., a browser cookie) is a standard tool for websites to remember things, such as launching popups. It’s sorta like saying, “Hey, website. I just signed up for your newsletter. Please don’t ask me to sign up again 😉.”
You can set up a cookie for your popup right when you add a trigger and by editing your popup trigger. Let’s cover the “editing” way because that’s the most general option.
- Edit your popup.
- Go to Popup Settings > Triggers.
- Click the pencil
icon in the Actions column for the trigger you want to add the cookie.
- Click inside the Cookie Name field and select Add New Cookie.
- Click Update.
- Select when you want the popup to create the cookie. The default is On Popup Close.
- Click Add.
- Change the Cookie Name and Cookie Time (how long to stop displaying the cookie to the same person) if you want.
- Click Update.
- Click Update for your popup to save all your changes.
For more cookie settings, visit our Cookie Settings guide.
How Do I Avoid Duplicate Content/Why Are All Popups Loading on All Pages? #
Add a targeting condition or rule so your popup doesn’t load on every post and page.
Edit your popup. Go to Popup Settings > Targeting. Choose a condition. Save your changes.
In the screen capture above, we added a targeting rule so our popup shows only on the homepage.
No targeting conditions by default #
When you create a new popup, it will have *no* targeting conditions by default.
Having no targeting conditions makes the popup available on all posts and pages. That means new popups get loaded (and can get triggered to display) on every post or page on your site by default.
Performance-minded #
We recommend using conditions to limit where a popup loads and appears. Loading your popups only where needed improves your site’s efficiency by not loading extra code and duplicate content.
Why Doesn’t My Popup Open (How Can I Troubleshoot Popups)? #
There are several reasons your popup doesn’t open. Check these common culprits:
- Is your popup actually published and turned on?
- Did you remember to add a trigger?
- Are there any targeting conditions blocking it?
- Could there be a pesky CSS conflict?
- Have you cleared your browser, WordPress, or server cache?
- Are there any JavaScript errors in your browser console?
- Might another plugin or your theme be causing a conflict?
- Is a cookie preventing the popup from showing?
- Is the popup disabled for mobile or tablet?
Read our Troubleshooting Your First Popup guide to tackle each of those issues.
How Can I Check for JavaScript Errors? #
Open your browser’s developer console and look for any error messages. If you see something like the example below, take a screenshot or copy the error and ask for help.
Sharing a screen capture or the exact error message will help your web developer (or our support team) figure out what’s going wrong.
You can also follow the plugin and theme conflict troubleshooting steps we cover in our Troubleshooting Your First Popup guide.
How Can I Open a Popup from a WordPress Nav Menu? #
You’ve got three cool ways to open a popup from a nav menu:
- Select the popup directly from a dropdown in the menu settings
- Add a custom link using the popup’s ID (like ‘#popmake-123’)
- Add a specific CSS class to your menu item
How Can I Display Multiple Popups at the Same Time? #
Popup Maker shows just one popup at a time by default. That’s because it’s usually the best experience for your visitors.
But sometimes you need more! That’s where the Stackable setting comes in. It lets you display two or more popups simultaneously on the same page.
Enable Stackable on each popup you want to display at the same time. You’ll also need to turn off overlays and any alternate close methods. Visit our Display Multiple Popups at the Same Time guide to learn the best practices.
How Can I Get CSS Selectors? #
You’ve got two ways to grab CSS selectors:
1. Popup Maker’s Built-in Selector Tool #
- Go to your page while logged into WordPress
- Hover over the Popup Maker admin bar
- Click Get Selector under Tools
- Click OK in the alert
- Click the element you want
- Copy the selector
- Paste it into your popup settings
2. Browser Developer Tools (like Chrome) #
- Right-click the element you want
- Click Inspect
- Right-click the highlighted HTML
- Select Copy > Copy selector
Just be careful. Browser tools can sometimes give you super long selectors that are tricky to use.
Get more details and even watch a video on how to use the Popup Maker tool in our Getting CSS Selectors guide.
Why Is My Popup Not Scrolling Properly/Background Scrolling? #
There are a couple of things to check right away.
- First, make sure the Popup Settings > Display > Position > Fixed Positioning setting is turned off.
- Check your popup positioning. For example, If your popup is taller than the browser window and you’ve set it to Middle Center, try changing it to Top Center instead.
For more details and solutions for this issue, read Why Is My Popup Not Scrolling Properly/Background Scrolling.
How Can I Display Different Popup and Overlay Scroll Effects in Combination? #
Popup Maker gives you a few display option settings that affect how your popups scroll in the browser. By adjusting these settings, you can customize how your popups behave when scrolling.
Check out Popup Maker’s guide to Display Different Popup and Overlay Scroll Effects in Combination.
Why Does My Site Shift, Jump, Move, or Skip When a Popup Displays? #
This happens because of the dreaded “double scrollbar effect.” While Popup Maker automatically prevents double scrollbars, many themes might still think there’s an extra one and shift your page to make room for it.
If your popup doesn’t need an overlay, turn the overlay off. That’s the easiest. You can also set the Body Padding Override to 0px.
If those 2 ways don’t work, you can try custom CSS to fix the issue.
What WordPress Form Builder Plugins Does Popup Maker Integrate with? #
Popup Maker natively integrates with the following popular form builders:
- Popup Maker’s Subscription Form shortcode
- Ninja Forms
- Gravity Forms
- Formidable Forms
- Contact Form 7
- WPForms
- Caldera Forms
- MailChimp for WordPress (MC4WP)
- WS Form
- Fluent Forms
These native or built-in integrations let you do the following:
- Automatically close form popups
- Launch thank you popups (or open other popups)
- Control how often visitors see your forms
You can do all this in the free version and without writing a single line of code!
Learn more in our latest announcement for Fluent and WS Form.
How Can I Close a Popup and Create a Cookie When I Submit a Form? #
With form plugins integrated with Popup Maker, there are special popup settings that let you automatically close a popup and create a cookie when someone submits a form.
To set your popup to close automatically after someone submits a form, follow these steps:
- Go to your popup’s settings, then to Close > Form Submission
- Check the Close on Form Submission checkbox
To make sure people who already filled out your form don’t see it again, you can create a cookie on form submission:
- Edit your popup
- Go to Popup Settings below the editor
- Click on Triggers
- Click Add New Cookie
- Select the form in your popup
- Connect this cookie to your popup trigger by clicking the pencil icon for your trigger
- Select your Form Submission cookie in the Cookie Name field
- Click Update to save everything
This prevents annoying repeat visitors who already completed your form.
How Can I Find the Popup ID? #
You can see your popup’s ID in 2 places: on the Popup Maker > All Popups page and on the Popup Editor’s page.
Follow our step-by-step instructions to see exactly where to find the popup ID.
How Can I Stop Popups From Loading Google Fonts? #
- From your WordPress admin dashboard, go to Popup Maker > Settings > Misc > Assets.
- Check Don’t Load Google Fonts.
- Click Save.
- Flush all of your caches.
To learn why you’d want to stop popups from loading Google Fonts, read our Don’t Load Google Fonts doc.
Are There Useful and Compatible Plugins with AJAX Login Modals? #
Yes, there are! Please see our Useful and Compatible Plugins with AJAX Login Modals doc for a complete list.
How Do I Use Custom JavaScript With Popup Maker? #
Choose How You Want to Add Your Custom Code #
First, choose how you want to add your code. WordPress does a great job of supporting custom JavaScript (JS). But you need to follow the “WordPress Way.”
We prefer using code snippet plugins to install and run custom JS. It makes following the “WordPress Way” a breeze. But there are other options for loading custom JS.
Read our Getting Started With Custom JavaScript guide to learn 3 ways to add custom JS to a WordPress site.
Lastly, writing custom code is an advanced skill that comes with risk. Please check out our code disclaimer before starting the process below.
Visit Popup Maker’s JS API Documentation #
Once you choose which way to add JS to your site, you can use Popup Maker’s JavaScript API to interact with your popup. That way, you’ll know what function(s) to use for your custom code. We’ve got a bunch, so make sure to check the doc before diving into writing code.
Use Our jQuery Template #
We have an example code template that gets you started. Our template comes complete with the WP hook and jQuery outline, but you need to make sure the code runs properly on your site.
You can also get a full breakdown of what the example code snippet does when you read our Getting Started With Custom JavaScript guide.
How can I hide Popup Maker from non-admins? #
There are 2 main options:
- You can search for a plugin that lets you edit your WordPress admin dashboard and menus.
- You can use custom code to call a built-in WordPress hook (PHP function) to remove Popup Maker from the admin side menu.
Using a Plugin #
The not-so-great news is that there aren’t too many plugins that do this. So we can’t recommend any. And if you find one, you might need to pay for the feature to hide or edit a menu.
Visit the official WordPress Plugin Directory to start your search.
Writing Code #
If you’re comfortable with using WordPress hooks (PHP functions), then this option is for you.
Below is sample code (from GitHub) that you can install in your child theme’s functions.php file or with a code snippet plugin.
Now you see it. Now you don’t. #
In the demo video clip below, we have 2 browser sessions. In 1 session, we’re logged as an Editor. On the other session, we’re logged in as an Administrator. Here are the steps we take to make sure the code snippet works.
- First, we can see Popup Maker on the side men while we’re logged in as an Editor.
- We switch over to our admin session and turn on the code snippet.
- When we switch back to the Editor session and reload the page, Popup Maker is gone.
The code sample uses the official WordPress remove_menu_page hook. Furthermore, the code only removes the menu item. The plugin is still there and accessible. If people know the URL to the plugin or feature you’re hiding, they can still access it.
Learn more about adding PHP to WordPress in our Getting Started With Custom PHP guide.
If you go the custom code route, here’s our full custom sample code disclaimer.
Sample Code Disclaimer #
Major caveat: Every time you use custom code, you take responsibility for testing and maintaining it. Here are some best practices you should follow:
Disable custom code when troubleshooting conflicts: Whenever you need to troubleshoot your site for a possible plugin or theme conflict, make sure you disable all custom code.
Back up your site: Make sure you have a recent full backup of your site.
Use a staging site: Test your code on a staging copy of your live site.
Tweak the example: Remember that any custom code example you decide to reuse is exactly that—an example! Meaning that you’ll need to tweak and make sure the code works in your environment and meets your needs.