Jonas from MailerLite

Jonas15 min readTips & ResourcesOctober 18, 2018

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. A new approach has transformed pop-ups into a secret weapon for growing your subscriber list.

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

Popular blogger Jane Friedman notably doubled her email list in less than six months after she implemented pop-ups on her page. There is no doubt that pop-ups can be that effective when done right.

This article will explain how to create pop-ups that grow your list 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-and-drop editor. More on that in a little bit.


1. Pop-ups enable you to announce important news and promotions on your website

Pop-ups are a great way to make an announcement to all your visitors, such as a discount or a special event. Remember when everyone was talking about GDPR and businesses had to inform visitors of their updated policies? 

Well, pop-ups were a perfect medium to deliver the message. 

gdpr pop-up example

When you announce something on social media or on 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 sign-up 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 sign-up forms.

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

Take a look at how much of an effect pop-ups had on Jane Friedman’s email list. She doubled subscribers in six months after implementing pop-ups. 

pop-ups increase subscriber graph

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. 

With pop-ups, you can frequently test new designs and copy to see what performs best.

For example, you can test which type of offer – between an ebook or an email course – convinced more visitors to subscribe to your list. It would be easy to test both offers for a few days and move forward with the offer that delivered the most subscribers.

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

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 page or across your entire site.

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

Time-based pop-up example

Welcome mat pop-ups

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 these for special occasions or test them 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

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 the Buffer blog.

Scroll-triggered pop-up example

Hello bar pop-ups

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

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 with MailerLite.


So far we've talked about how 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 for creating pop-ups that people don’t hate.

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.

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

pop-up ebook example

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 you can 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 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 even earlier to see what works best.


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

You can also take advantage of scroll-triggered pop-ups since they 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.

You can use tools like Hotjar, Crazyegg or Clicktale 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.

scroll-triggered pop-up example 2

3. Pop-up 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 even wording.

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

pop-up design example

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

  • Your CTA should also indicate the benefit of taking action.

Here's a prominent, clear and compelling CTA from OKdork.

pop-up example with cta

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 Ferris. Notice how he writes the dismiss option with no insults or snarky commentary. 

tim ferris 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 or might also include a name field.

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

tim ferris pop-up example 2

8. Create responsive website 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 make with MailerLite.

mobile pop-up examples

9. Pop-ups should respect a visitor's right to choose

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 least once a day.

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.


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. Click on the link to learn more about GDPR-compliant forms.


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.