5 Ways To Use Popup Maker That You Probably Don’t Know About

Do you want to do more with your popups than just the run-of-the-mill open and close popups?

Did you know that you can use Popup Maker to create rotating banners, display another popup, and much more?  Well then, read on to learn how to make 5 fun and engaging yet practical popups.

1) Open a Popup From a Popup

Difficulty: Easy. No custom code or extensions are needed.

You can use Popup Maker to make popups that pop up other popups. (Try saying that 10 times fast.) You can think of these kinds of popups as back-to-back popups⏤meaning that one launches right after another.

“What the heck for?” you ask. Displaying one popup from another is handy when you need a:

• Sequence: You want to show 2 different pieces of content, one right after the other. It’s sort of like having a “Next” or “Learn More” button.
• Confirmation: When someone closes a popup, you want another popup that says, “Hey, are you sure about that?”

Here’s a visual.

Give it a try!

If you’re ready to try this out on your site, follow our step-by-step guide so you too can have a popup opening another popup today! No custom coding and no premium extensions are required.

2) Turn a Popup Into a Static Block on Your Page

Difficulty: Easy. There’s only 1 additional CSS rule you need to add, and no extensions are required.

With the right settings and 1 line of custom CSS, you can make a popup behave like a static content block on your page.

Settings

To get started, use these popup settings as an example.

1. Time Delay / Auto Open trigger with 0 time delay
2. No animation
3. Disabled overlay
4. Relative (not fixed) bottom right position
5. 10px bottom margin
6. 10px right margin
7. No cookies set

Custom CSS 1-Liner

/* Change 123 to your popup ID. */
#pum-123 {
    position: relative;
}

Learn where to find your popup ID.

First time adding custom CSS? Check out our Getting Started with Custom CSS guide.

3) Add a Rotating Banner at the Top of Your Site

Difficulty: Easy to moderate. You don’t need custom code. But, you’ll need an extension, and you’ll have to pay attention to your cookie and targeting settings.

The main idea is to have at least 2 popups (Number 1 and Number 2) that show up in order as a top banner. Let’s say popup Number 1 appears when you first visit the site. After Number 1 displays, Number 2 pops up on the next reload or new page.

Before you start

You’ll need the Popup Maker Advanced Targeting Conditions (ATC) extension. We’re going to use the Cookie Exists condition from ATC.

Once you have the ATC extension, here’s what to do.

Create 2 top banner popups

• Triggers: Use a Time Delay / Auto Open trigger and set a cookie for both. Take a note of the first popup’s cookie name (e.g., pum-123).
• Display: Select Top Bar under Display > Display Presets for both popups. See the screen capture below.
• Targeting: For the second popup only, create a Cookie Exists condition and enter the first popup’s cookie (e.g., pum-123). See the screen capture below.

What if you want to add another one?

If you want to add more:

• Clone your last popup (e.g., Number 2).
• Rename the cloned popup (e.g., Number 3).
• Change your Cookie Exists targeting rule to the previous popup’s cookie name. So, if popup Number 2 in our example sets a cookie named pum-456, we should add pum-456 to our Cookie Exists condition. See the screen capture below.

Here’s a demo of our 3 rotating banner popups.

What about split tests or randomly displaying the popups?

Difficulty: Moderate to advanced. You’ll need to add custom code.

Now, you know how to “rotate” a couple of banner popups. Wouldn’t it be cooler if you could run a split (A/B) test or make a bunch of popups display randomly?

Not only would you be the envy of every marketing geek, but you could actually boost your conversions!

What’s a split test anyway?

Hang on on sec. What’s a split test? Let’s say you’re writing an article about 5 ways to use popups. You come up with 2 titles, but you can decide which one’s better. Here’s where a split test comes in.

Using split test software, you can randomly show your 2 titles to your visitors (maybe as a sneak peek in your newsletter or as a banner popup). After about 1 week, you check to see which title gets the most clicks. The one with the most clicks wins! So, you publish your article using the winning title.

You can run split tests for other things like color schemes, layouts, and images.

Popup Maker makes it easy to run custom code for your split tests. See the custom code for split tests and take it for a spin.

When you check out the split test code, you should notice that every visitor gets (assigned) a random popup from the list of popups you choose. When visitors return, they’ll only see the same popup from the split test they saw before. I.e., the popup is the “controlled” variable in your split test.

That’s so random

Let’s switch up a little. Now, you want your visitors to see a set of popups during their visit. But you don’t care what order they appear as long as each popup has a fair chance of displaying.

With a dash of code tweaking, we can change the split test logic to show random popups. That means a visitor can see different popups in one session, not just the same popup over and over. Here’s the custom code for random popups. Make sure you read the comments and compare this code with the split test code to understand what’s happening.

4) Use a Popup as a Floating Icon

Difficulty: Easy. No custom code or extensions are required.

We’ve all seen the ubiquitous floating icon at the bottom right of your browser window, right? These kinds of icons can be pretty handy. I mean, they’re out of the way yet always visible. So, they’re perfect for:

• Using visual reminder prompts (like you’ve got something in your cart or you need to finish filling out a form)
• Adding contact links (add any link to your icon)
• Getting help (maybe submit a ticket or go to the support page)
• Sharing something new (like a new post or a new product)

We’ll break down our floating icon into 2 steps:

1. Create the popup and make it behave like a floating icon.
2. Wrap our icon with a link tag so that when you click the icon, it opens a new page.

Create the popup and make it behave like a floating icon

• Create a popup with an Auto Open trigger.
• Insert your icon image into the popup’s content. Feel free to use this image as your icon if you don’t have one handy. Use the WordPress editor to align your image in the center and resize it to Medium (300×300 pixels) if needed.
• Under Display > Size, select Tiny – 30%.
• Under Display > Position, select Bottom Right, 0px for both the Bottom and Right distance, and check Fixed Positioning.
• Publish or Update the popup to save your changes.

Wrap our icon with a link tag that opens a new page

• Edit your popup.
• In the popup editor, click (to select) the icon image you added earlier.
• Click the link icon in the editor’s toolbar menu to insert a link.
• Type or paste in your link.
• Update the popup to save your changes.

5) Make a Popup Minimize and Expand

Difficulty: Easy to moderate. You need to know how to use the Extra CSS Selectors setting. But, there’s no custom code or extensions required.

Want to give your visitors an added wow factor?!

We can build on top of the floating icon you just made. With no coding required, you can minimize a popup into an icon and have your icon maximize into a popup again. Cool right?

Create the popup you want to minimize

• Create a new popup or use one you already have for the main popup.
• Make sure your main popup has an Auto Open trigger. That’s because we want it to appear first.
• To make the main popup “minimize” into your icon popup, add a Click Open trigger.
• Publish or Update your main popup.
• Make a note of your main popup’s CSS class. It’ll be something like popmake-123, where 123 is your main popup’s ID number.

Hook in your main popup with your icon popup

• Edit your icon popup from before and remove the Auto Open trigger.
• Create a Click Open trigger.
• In the icon popup’s Trigger > Click Open > Extra CSS Selectors setting, add #popmake-123 .pum-close.popmake-close. Be sure to replace the 123 with your main popup’s ID number. This is our “minimizing” trigger. I.e., Closing the main popup makes your icon popup display.
• For the grand finale, add your main popup’s CSS class name (e.g., popmake-662) as a class on your popup icon’s image tag or block. This is the “maximizing” trigger. Clicking on the icon closes the icon popup and opens the main popup.
• Update the popup to save your changes.

Wrapping it Up

As you can see, Popup Maker is more versatile than you probably thought.

The 5 examples we covered are a tiny taste of what our customers are doing with Popup Maker.

Reach out to us if you have any questions about the 5 examples or want to share a cool thing you created with Popup Maker. We’d love to hear from you.

Support Request