Whether you love or hate website pop-ups, there’s one thing you can’t deny: They are the most effective way to get your offer in front of as many website visitors as possible. And the more people that see your offer, the more people you’ll be able to convert into leads or customers.
To help you make the most of this exposure opportunity, this article will explain pop-up best practices and illustrate each point with eye-catching pop-up examples. Use the information to inspire your own designs, grow your email list and watch your business soar.
Website pop-ups are windows of content that appear over a webpage as a user is browsing. They increase the visibility of the content in the pop-up, making them an effective way to promote offers or convert visitors into email subscribers.
You can easily add pop-ups to your website with MailerLite by creating one with our form builder and then either pasting the generated code into your website header or connecting via our WordPress or e-commerce plugins.
You can use website pop-ups to grow your email list, promote pages and products, quickly test offers, and share important news with visitors. Read on to see how each of these use cases can benefit your business.
Pop-ups are an effective way to convert website and blog visitors into email subscribers. Because pop-ups appear over the content the visitor is reading, they are hard to miss—and more people seeing your offer means more people are likely to convert.
To grow your email list with website pop-ups, just create one with copy that explains the benefits of joining your list and add an email signup form.
This pop-up form example from MailerCheck encourages signups by clearly explaining that subscribers will receive a monthly newsletter with email marketing and deliverability tips and tricks.
Do you want more tips for attracting more email subscribers? Then read this article to learn how to grow a high-quality email list
Pop-ups are also an effective way to increase the exposure of promotions on your website and landing pages. Promotion pop-ups allow you to show your latest offers or products to anyone who visits your site. This can lead to more sales, downloads, and conversions.
Here are some ways you could use promotion pop-ups:
Offer first-purchase discount codes while the user is shopping
Collect customer feedback with survey pop-ups
Promote webinars or new products
Increase app downloads on your site
Send visitors to a new blog post
To dive deeper into promotional pop-ups, take a look at our article on using promotion pop-ups to enhance your customer experience, it covers all the details you need to know.
Or get started right away by choosing one of our customizable promotion pop-up templates from the gallery below and adding it to your website.
Nothing will improve your website's performance faster than continuous testing. The way your offers are worded, designed, and even presented can affect how your audience receives them.
Pop-ups allow you to quickly test how your audience reacts to your special offers by showing them to all your website visitors. Roll the best-converting promotions out across your website and remove the ones that underperform.
The easiest way to test multiple offers is to A/B test your pop-ups. Just create two versions of a form, each with a different offer, and then MailerLite will show the forms to people as they visit your website. You can then track which converts at the highest rate and roll it out to all your website users.
Click here to learn more about how to set up form A/B testing with MailerLite.
Pop-ups are a great way to alert website visitors to business announcements. Use them alongside social media posts, emails and blogs to maximize the number of people who see your important news.
Use pop-ups to announce new features, product updates, your latest collection, changes to opening hours, or any other information website visitors need to know.
Our forever free plan includes access to the features you need to create pop-ups, publish them on your website, and deliver follow-up campaigns and automations via email. Hit the button below to start today!
You should now understand how pop-ups can help you and your business. Here is a look at the different types of pop-ups you can use as well as an example of each one.
Time-based pop-ups appear after a user has been on your website for a specified number of seconds.
These are the most popular kind of pop-ups—you can display them on a specific landing page or across your entire site.
Here's an example of a simple time-based pop-up on the Tony Robbins blog.
Welcome mat pop-ups cover the entire browser window, ensuring your offer fully captures a visitor's attention.
If not used properly, these pop-ups can be very intrusive and can hurt your user experience. Use them for special occasions and keep an eye on your analytics to see how your audience reacts.
Here's an example of a welcome mat pop-up on the 99Designs blog. It’s impossible to miss but has a clear close button so people can easily get back to the content.
Scroll-triggered pop-ups are displayed when a user reaches a certain depth on your page. For example, a scroll-triggered pop-up might show up after a visitor has scrolled through 70% of a long blog post.
Since the people who see a scroll-triggered pop-up have already tasted the value you provide, they're more likely to interact with your offer.
Here's a great example of a scroll-triggered pop-up on the Help Scout blog.
Hello bar pop-ups appear at the top or bottom of your webpage. They're the least interruptive of all the pop-ups because they don’t cover the content the visitor is reading. These pop-ups work well for both site-wide announcements and email subscription forms.
Here's how Elegant Themes uses its hello bar pop-up to drive attention to its offer.
Exit-intent pop-ups appear when a visitor is about to exit your page. They work by detecting when a visitor's 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.
A click event pop-up is a text pop-up that appears when a website visitor clicks a certain link, such as a Call-to-Action (CTA). Visitors who click the CTA have already decided to take action, so there’s a good chance they will convert when they read your pop-up text.
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. What’s more, they’re totally free! All users, including free plan users, can create unlimited pop-up forms to help grow their email lists. Find out more and sign up for an account here.
So far we've talked about how email newsletter pop-ups work and how they can help your business. Next, we’ll share a few best practices and more email pop-up examples to help you create effective pop-ups.
Your pop-up should clearly explain the benefit of your offer so people know why they should sign up.
When promoting an email newsletter, your benefits could be as simple as the information the visitor will learn when they sign up and how it will help them.
Below is an example built with MailerLite from integration platform Workato. It highlights that people who subscribe to the biweekly newsletter will learn all they need to build better integrations and automation.
You can give people an extra incentive to sign up for your list by promoting a lead magnet they receive when they join.
Photoshop Mosaic does this by promising to send anyone who subscribes to the list a set of free high-resolution abstract textures for Photoshop.
Check out this link to learn how to automatically deliver a lead magnet with MailerLite.
As with love and business, timing is everything with pop-ups. Showing your pop-up at the right moment is key to increasing your conversion rate.
Interrupting a reader as soon as they land on your website is unlikely to lead to a positive user experience. That's like getting hounded by a store clerk as soon as you enter a store.
Instead, give visitors time to familiarize themselves with your content before showing the pop-up. You’ll build trust and people will be more likely to convert when they see your offer.
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.
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. You’ll see average time on page is one of the main metrics.
Time on page gives you a baseline on where to start, but you should test different times to get the best results. Try showing your pop-up later or earlier to see what works best.
Also remember that people spend different amounts of time on different types of pages, so you should adjust your pop-up timings accordingly. People may stay on a 5,000-word blog post for over ten minutes but bounce off a short landing page after just a few seconds.
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.
Here's another example of a scroll-triggered pop-up, this time used on the Groove blog.
Align the design of your pop-ups with your website and brand. Do this by matching your pop-ups' primary color, typography and wording with that of your website.
Here's an example of a pop-up from SmartBlogger that's in sync with the rest of their brand. The colors, fonts and even writing style is instantly recognizable for anyone who is familiar with the SmartBlogger brand.
Pop-ups are more likely to convert when the offer closely relates to the content on the page. To get more sign-ups, consider the challenges people who visit your website and pages are likely to have and then create related offers.
Here’s an example. At MailerLite, we promote our downloadable email deliverability crash course with a timed pop-up on our blog post about the best email list cleaning services.
But in our monthly newsletter ideas articles, we promote our email content calendar with a hello bar.
Your pop-up should have a clear call-to-action (CTA) that encourages website visitors to take a particular action. Your 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
The below pop-up from Satisfy Running does all 3 of the above points well: It highlights the exact benefits of taking action, uses contrasting colors, and encourages action with verbs.
Make it obvious how people can close your pop-up so that people who don’t want to sign up can get back to enjoying your content. Your close button shouldn't be as prominent as your CTA, but it can't be something a visitor would miss either.
Avoid using negative or passive-aggressive sentences as an option for closing a pop-up unless it really suits your brand voice. In most cases, making visitors click on phrases like "I don’t want more email subscribers” or "I don't want to change my life" to close the pop-up will annoy them and damage your brand.
Look at this pop-up example from Tim Ferris. Notice how he writes the dismiss option without insults or snarky commentary.
People are more likely to sign up for your email list when the process is simple. Reduce friction by only asking for an email address when people sign up. Minimizing the information you ask for will increase the number of people who join your list and you can always use email surveys to collect more subscriber information once they have signed up.
The below pop-up from 100 Days of No Code is a good example of a newsletter pop-up that only asks for the subscriber’s email address. The brand doesn’t need any other information to start converting sign-ups into customers.
Your pop-ups need to be responsive so they look good on all screen sizes, from mobile to tablet and desktop. All buttons and forms should also be accessible no matter what type of screen the visitor is using.
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.
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.
If you advertise products or new blog posts with pop-ups, avoid showing the same pop-up to a visitor who already took action. Most pop-up editors have these settings.
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 by offering to send a coupon to everyone who signs up.
Healthy Essentials Australia opts for a survey promotion pop-up form asking for feedback from website visitors who are leaving their site. This 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 consisting of 40+ 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.
When pop-ups provide value to your visitors without hurting their browsing experience, you’ve achieved pop-up nirvana.
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.