How To Add Popup Explanations In Blog

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

Today, website pop-ups can drastically improve your business. More importantly, an eye-catching pop-up doesn't have to disrupt the experience of your visitors.

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. Plus we'll show you a bunch of email pop-up examples to inspire your next website pop-up idea!

What are website pop-ups?

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.

4 reasons why pop-ups are important to your online business

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.

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 using email marketing, 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 on your website. No matter how polished your content marketing is. They skim and sometimes they're so distracted that they miss your email signup forms.

Because pop-up forms "pop up" they're hard to miss, even for the most distracted visitors!

Learn how to attract more subscribers

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.

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

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

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 a 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. Whether you're running an e-commerce business, selling ebooks or planning a webinar, promotional pop-ups can be an excellent way to communicate with your customers.
Some examples of promotional pop-ups include:

Offering first-purchase discount 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, take a look at our article on promotion pop-ups to enhance your customer experience, it covers all the details you need.

Different pop-up examples and how they work

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.

Welcome mat pop-ups example

Welcome mat pop-ups cover the full 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.

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.

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 email subscription forms.

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

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 and can even help reduce cart abandonment.

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

Click event pop-ups example

A "click event" pop-up is a text pop-up that appears when a website visitor clicks a certain link. You can attach that pop-up to a convincing CTA. Visitors who click the CTA have already decided to take action, so they're more likely to convert to subscribers when they read your pop-up text.

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.

9 best pop-up examples and practices for creating it

So far we've talked about how email 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 email pop-up 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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

Email pop-up examples made in MailerLite

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

In the above email pop-up example, Perfect Glasses uses their pop-up form to entice website visitors into joining their mailing list with the added bonus of receiving coupons straight to their inbox. Perfect Glasses managed to explain the purpose of the newsletter pop-up and offer a coupon in a single sentence.

Above, Healthy Essentials Australia opts for a survey promotion pop-up form asking for feedback from website visitors who are leaving their site. It gives the company valuable insight into why they're missing out on sales, while simultaneously collecting subscribers that can be later nurtured into making a purchase.

Above is an email pop-up example in which Powerpointify offers new subscribers a free download (freebie) consisting of 40+ free powerpoint slides when they sign up to receive newsletters using their email sign-up form. As a result, Powerpointify will know that subscribers of this pop-up form are responsive to slide inspiration and free content.

In this email pop-up example, RhinoFit uses a promotion pop-up form on their pricing page inviting visitors to schedule a demo. This in turn gives them the opportunity to convert sales they may not have otherwise.

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 email pop-up 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.