Jonas from MailerLite

Jonas17 min readTips and resourcesFebruary 3, 2020

Pardon the interruption: How to do pop-ups right

Pardon the interruption: How to do pop-ups right

Believe it or not, pop-ups are making a comeback. When used properly, pop-ups can become your secret weapon for growing your subscriber list and promoting your business.

Today, website pop-ups can drastically improve your business. More importantly, pop-ups don’t have to disrupt the experience of your visitors. 

After analyzing 2 billion pop-ups, the folks at Sumo found out that when pop-ups are used at the right times, they can generate conversion rates of over 40%. So, how do you do pop-ups “right”?

This article will explain how to create pop-ups that grow your list and promote your business without being annoying, and we’ll show you a bunch of examples to inspire your next website pop-up idea.


Pop-ups are small windows generated using Javascript. To show a pop-up on your site, you have to add a short line of Javascript code on your website and the pop-up is then displayed to your website's visitors when your conditions are met.

With MailerLite, you don’t need to know Javascript or any other type of coding. You can quickly build website pop-ups with our drag & drop editor. More on that in a little bit.


1. Pop-ups help you announce important news

Pop-ups are a great way to make an announcement to all your visitors, such as a policy update or a change in the business that everyone needs to be aware of.  

Remember when everyone was talking about GDPR and businesses had to inform visitors of their new policies for compliance? Pop-ups were a perfect medium to deliver the message.

gdpr privacy policy pop-up example

When you announce something on social media or your blog, you can’t reach every website visitor. However, pop-ups on your site guarantee that every visitor sees your important news.

2. Pop-ups are a powerful way to grow your email list with a signup form

If you want to grow your business online, you'll need a lot of subscribers on your email list. The reality is that most of your website visitors aren't reading every single word of your content. They skim and sometimes they're so distracted that they miss your signup forms.

Because pop-ups “pop up” they're hard to miss, even for the most distracted visitors.

Want to know how to build your subscriber list with quality subscribers?
How to build my subscriber list

3. Pop-ups allow you to test different offers

Nothing will improve your website's performance faster than continuous testing. Because everything from how your offers are worded, designed and even presented can affect your audience's reception of it.

Pop-ups allow you to quickly test your offers throughout your website and remove the underperforming pop-ups immediately. Just check your pop-up conversion rate and make adjustments based on that.  

You can frequently test new pop-up designs and copy to see what performs best.

4. Pop-ups to share promotions on your website and landing pages

When you change your mindset about pop-ups from a user-experience interruption to value proposition, you can start using promotional pop-ups to actually enhance your customer experience.

Help your website and landing page visitors get the most out of their visit by sharing relevant and useful information with them. Promotion pop-ups are a separate feature in MailerLite designed to deliver important messages and to redirect your visitors to wherever you want them to go.

Some examples of promotional pop-ups include:

  • Offering promo codes while the user is shopping
  • Collecting customer feedback with survey pop-ups
  • Promoting webinars or new products
  • Increasing app downloads on your site
  • Sending visitors to a new blog post 

To dive deeper into promotional pop-ups, head over to this article, it covers all the details you need.

promotional popups examples in black background - MailerLite

Now that you understand how pop-ups can help you, here are the different types of pop-ups you can use.

Time-based pop-ups example

Time-based pop-ups appear during a specified time interval. For example, pop-ups can show 60 seconds after a visitor arrives on your website. It's the most popular kind of pop-up and can be set to display on a specific landing page or across your entire site.

Here's an example of a simple time-based pop-up on Tony Robbins his blog.

Time-based pop-up example

Welcome mat pop-ups example

Welcome mat pop-ups cover the entire screen, ensuring that your offer fully captures a visitor's attention. But you have to be careful when using these as they're very interruptive and can hurt your user experience. Use them for special occasions and test to see how your audience reacts.

Here's an example of a welcome mat pop-up used on the Problogger blog.

welcome mat pop-up example

Scroll-triggered pop-ups example

Scroll-triggered pop-ups are displayed when a user reaches a certain depth on your page. They're mostly used on blog posts because they don't appear until a reader has read most of your content.

For example, a scroll-triggered pop-up might show up after a visitor has scrolled through 70% of your page. Since the people that see a scroll-triggered pop-up have already gotten a taste of the value you provide, they're more likely to interact with it.

Here's a great example of a scroll-triggered pop-up used on Helpscout.

Helpscout scroll-triggered pop-up example

Hello bar pop-ups example

Hello bar pop-ups appear at the top or bottom of your webpage. They're the least interruptive of all the pop-ups and work well for both site-wide announcements and newsletter subscription forms.

Here's how Elegant Themes use their hello bar pop-up to drive attention to their offer.

Hello bar pop-up example

Exit-intent pop-ups example

Exit-intent pop-ups only appear when a visitor is about to exit your page. They work by detecting when a visitor's mouse cursor reaches the top of the page, which indicates that they're about to leave. Pretty cool. The exit intent pop-up appears to remind the person of your offer.

The team at Coschedule uses exit intent pop-ups to reach out to visitors one last time before they leave.

Exit intent pop-up example

Anyone can create these pop-ups

You can create all of these advanced pop-ups with the MailerLite pop-up editor and sync them to your email list.

Here's a pop-up video tutorial showing just how easy it is to create pop-ups with MailerLite.


So far we've talked about how newsletter pop-ups work and how they can help your business. But without the right guidelines, they can quickly become an annoyance for your visitors and can even lead to a penalty from Google.

To make sure your pop-ups are as effective as possible without interrupting your visitors' experience, we're going to share a few best practices and examples for creating effective pop-ups.

1. Email pop-ups should highlight a benefit

Before we go into how your pop-up should look, you have to understand that your pop-up is only as good as the value it's offering. If you're not offering something that your visitors genuinely care about, then nothing else matters.

For example, if you want a visitor’s email address, it's not enough to ask for it. What are you offering them? What’s the incentive? Successful pop-ups provide value by offering something special. It can be a coupon code or a lead magnet such as a free guide related to your industry.

Pop-ups that work clearly explain why taking an action is going to improve a person’s life.

To do this, you have to quickly explain your value proposition. Why should someone take action and what’s their reward?

Look at this pop-up example from Derek Halpern of Social Triggers. The pop-up provides high value to an audience specifically trying to grow their blog.  

social triggers pop-up example in white background

2. Email pop-ups should show up at the right time

As with love, business and pop-ups—timing is everything. Finding the right time to show your pop-up is key. 

Most visitors are seeing your website for the first time. You want to make a positive first impression.

The worst thing to do is block their experience with a giant pop-up immediately after they land on your website. That's like getting hounded by a store clerk as soon as you enter a store.

To improve the effectiveness of your pop-ups, give your visitors a bit more time to familiarize themselves with your content and build trust.

Take a look at your Google Analytics data to understand the best time to show your pop-ups. Find out your average time on page and activate your pop-up after 30% of that time has passed.

How to calculate the best pop-up timing

Find your average time on site and multiply it by 0.3. For example, if your average time on site is 3 minutes, set your pop-up to appear after the first minute (roughly 30% into their visit).

If you have Google Analytics enabled on your website, finding the average time on page is straightforward. Just click Behavior and then choose the Overview option.

google analytics pop-up analysis

Time on site gives you a baseline on where to start, but you have to test different times to get the best results. Try showing your pop-up later or earlier to see what works best.

Create your first pop-up in minutes!

Our free plan includes access to the features you need like pop-ups, automation and landing pages.

Sign up for free

Tools to help optimize the timing of scroll-triggered pop-ups

Take advantage of scroll-triggered pop-ups that only appear when a user reaches a certain depth on your page. You can then accurately tell that someone is ready to see your pop-up.

Tools like Hotjar, Crazyegg or Clicktale help you to track how your visitors behave on your site. Find the areas where people are most engaged, and set the scroll trigger.

Here's another example of a scroll-triggered pop-up, this time used on the Groove blog.

groove scroll-triggered pop-up example

3. Pop-ups should match your brand

When your pop-ups do show up, your visitors shouldn't feel as though you've taken them to another website. Or even worse, that the pop-up is an ad from another company.

There needs to be an alignment between how your pop-ups look and your overall brand. Your pop-ups should match your website’s primary color, typography and wording.

Here's an example of a pop-up from SmartBlogger that's in sync with the rest of their brand.

email pop up example with cta and ebook image

Not only are they using the website’s primary color for their pop-up, but even the way they structure the sentences is in line with their style.

4. Make pop-ups as relevant as possible

Relevance is king when you want to convert a visitor into a subscriber. Your users came to your website because they have something in mind that they need. Think about what you offer and how you can help them.

What would be more successful? The same pop-up that shows up on every page or different pop-ups specific to the content on each web page?

For example, if you managed a cooking blog and someone visited your blog about Christmas recipes. What pop-up would have more success? A pop-up offering easy breakfast recipes or one offering Christmas dessert recipes?

Clearly, the pop-up on Christmas desserts would win because it's relevant to the landing page the visitor is on.

Hubspot shows us a great example of making pop-ups as relevant as possible.

hubspot pop-up example

Their post is on writing an outline for a blog post, and their pop-up stays relevant by offering readers blog post templates.

5. Pop-up CTA should be prominent and actionable

As with any digital marketing initiative that requires people to take action, you have to indicate what they should do next. Your call to action (CTA) has to be distinct from the rest of the pop-up content. It should capture attention immediately and readers should intuitively know what to do next.

You can accomplish this by:

  • Giving your CTA a contrasting color
  • Making your CTA action-oriented with the use of verbs
  • Indicating the benefit of taking action

To give even more incentive to act you can add a countdown timer to show a "limited time" offer.

Here's a prominent, clear and compelling pop-up CTA example from OKdork.

okdork pop-up example with green cta button

6. Pop-ups should be easy to dismiss

Remember what we said about not abusing pop-ups? You should always give your visitors an easy way to dismiss a pop-up. Your close buttons shouldn't be as prominent as your CTA, but it can't be something a visitor would miss either.

And please don't use negative or passive-aggressive sentences as an option for closing a pop-up. Phrases like "I don’t want more subscribers” or "I don't want to change my life" annoy visitors and damage your brand.

Look at this pop-up example from Tim Ferriss. Notice how he writes the dismiss option with no insults or snarky commentary. 

tim ferriss pop-up example

7. Only ask for needed information

The less information people have to give, the more likely they are to sign up. So if you want to collect email addresses with your pop-up, ask for as little information as possible. Your pop-up can contain only an email field (and perhaps also a name field).

Here's another great newsletter pop-up example asking for a minimal amount of info.

tim ferriss email pop up example for exclusive content

8. Create responsive newsletter pop-ups to work on all devices

We always mention the importance of mobile-friendly, because you'd be surprised at how many websites still have pop-ups that look terrible on mobile. It is critical to build responsive pop-ups that work across all devices.

Since mobile usage has surpassed desktop, a pop-up that isn't optimized for mobile will hurt your performance. You should always test your pop-ups on different screen sizes to ensure you give your visitors a consistent experience.

MailerLite’s pop-ups are always responsive, so you don’t need to do any extra work.

Here's an example of a mobile-optimized pop-up template you can create with MailerLite.

what does an email pop up look like in mobile phones - MaierLite

9. Pop-ups should be respectful

If someone closes a pop-up, it means they don't want to keep seeing it. Respect their decision by not showing those people any more pop-ups during their visit. It's annoying; plain and simple.

You can solve this by setting your pop-up frequency (how often a visitor sees a pop-up) to at most once a day (or week, or month).

If you advertise products or new blog posts with pop-ups, avoid showing the same pop-up to a visitor who already took an action. Most pop-up editors have these settings.


Want more ideas? Here are pop-ups made by people like you. These were created in MailerLite. Keep it simple and have some fun experimenting with your pop-ups.

Budget Meal Planner created this simple pop-up to encourage newsletter sign-ups.

simple sign up pop up example in yellow background - MailerLite

Bluchic promotes their 5-day course with this email pop-up example.

lead magnet pop-up example for a course - MailerLite

Natural Face Therapy offers a free copy of their routine in this email pop-up example.

freebie email pop up example - MailerLite

Trigger Free Nutrition offers a download in this email pop-up example.

download pop-up

Below you see author E. L. Wilder's book promotion email pop-up example.

email pop-up example for a book promo - MailerLite

Blogallery uses bullet points to highlight the value proposition in this email pop-up example.

email pop-up example with value bullet points - MailerLite

Final thoughts on pop-ups

Pop-ups, when appropriately used, can be a significant boost to building both your email list and your business. When pop-ups provide value to your visitors without hurting their browsing experience, you’ve achieved pop-up nirvana.

If you want to start growing your list and business using pop-ups, we make it dead simple with our pop-up editor.

Important notice: GDPR pop-ups

The main purpose of the examples used in this article is to show the pop-up type and messaging strategy. If you market to people in the EU, you would need to augment these examples with the appropriate opt-in consent language and permissions. Learn more about GDPR-compliant forms in this guide.

Editor's note: This post was originally published in October 2018 and has been updated with new examples and features.


And if you’ve had any experiences with pop-ups (good or bad!) that you'd like to share, we'd love to know more in the comment section below.

Jonas Fischer

I'm Jonas, Content Manager at MailerLite. I’m not the 4th Jonas Brother, but I do write content (which is similar to being a teen heartthrob). After writing for a bunch of companies over the years, I discovered my professional passion—helping add some humanity to B2B marketing. Email is the perfect place to start!