If you’re spending even a reasonable amount of time on the Internet, you’ve probably noticed the same thing we’ve noticed.
Popups are all over the place and…Most of them are terrible.
At Wisepops, we’re on a mission to promote beautiful and smart popups. In today’s article, I’ll share some examples of the best popups and popup forms we’ve seen on WordPress-powered websites. We’ll also explain why they stand out from this busy crowd.
8 WordPress Popup Examples
I know, popups have a bad rep. And for a good reason.
A lot of WordPress users just grab the first Popup plugin they find on WordPress plugins directory and create a popup in 10 minutes.
In this article, we’ll show you that WordPress popups can be both clever and appealing. Let’s start with one of the most subtle popup formats.
The slide-in popup
Slide-in popups, as their name suggests, slide in from the bottom of the user’s screen. Usually, they appear when you’re scrolling down a page, most of the time on an article.
Here’s one taken from Asana’s blog.
What’s so remarkable about it?
- It takes a reasonable amount of space and fits perfectly in the page. As a visitor, I can choose to subscribe, but I can also continue reading my article without having to close the popup.
- Its design is simple, yet noticeable, mostly because of the colorful top border.
- Its copy is simple and straight to the point.
The time-delayed lightbox popup
I found this example on Chargebee’s WordPress blog. The design is not so original (not to say boring), but I liked the timing of the popup:
- It appeared right when I was about to finish reading the article
- The option to close the popup – “No, thanks” – is large and easy to click (remember the popups that take 4 clicks before you can actually close them?)
- Its copy is simple and convincing
The exit popup
When displaying a popup, timing plays a key role (we’ll talk more about this in the second part of this article). A few weeks back, we ran an analysis over a massive sample of popups that our clients created. We discovered that exit popups outperform other kinds of popups by 5% on average.
Let’s take a quick example to understand what it means for a website.
Let’s say you run a WordPress website attracting 700,000 visitors a year. You’re currently displaying a popup as soon as your users are landing on your website. This popup has a 4% conversion rate. Just by switching from a landing popup to an exit popup, you could win about 1,400 additional email subscribers/year. Not bad!
Here’s one exit popup example taken from 99designs’ blog.
Since it’s displayed at the last minute, 99designs’ team made it large and included a nice visual that immediately catches your attention. Smart!
As a reader, it doesn’t interrupt me, I was about to leave anyway…
You don’t have to stick to popups. Look at this popup form from Digiday. They use a bar that slides in when you scroll down their articles. It’s still subtle, but as it’s larger, it’s more visible than traditional slide-in popups.
The subtle popup
Speaking of subtlety, here’s a Coschedule popup. I found it while reading one of the articles on their blog (yep, they use WordPress as well). The article featured a call-to-action to download a free “Sales Enablement Strategy Kit” at the top of the article.
The problem with calls-to-action is that once you scroll down, you can’t see them anymore.
So instead of covering their articles with calls-to-action, they designed this sticky popup that appears on scroll and stays at the top of the screen. Smart!
The two-step popup
Until now, we’ve reviewed what I would call “standard popups.” It’s time to level up with this example from Copy Hackers that they display on exit.
What’s so special about it?
First, the overlay matches the category of the blog I was browsing. I browsed a different category later and guess what? I got a different popup. Nice segmentation technique!
Second, it’s what we call a two-step popup. The first screen features a CTA that engages the user. Once the user clicks the call-to-action, she’s asked to enter her email.
It relies on the micro-commitments theory. To put it simply, it says that you can increase your chances to convert a visitor into a lead by asking questions gradually.
Here, they start with an easy question before asking you to share your email address.
The mobile popup
Mobile popups are worth an entire article (in fact, we wrote one already).
In short, it’s not OK to display the same popup on desktops and mobiles, even if it’s responsive.
All in all, if you’re not sure what a good mobile popup looks like, here’s one from PixelMe:
They display a call-to-action on every page of their website (“Not ready to sign up?”). This call-to-action reveals a popup when visitors tap it.
This popup is both easy to trigger and dismiss. And it is in line with SEO recommendations… Genius!
The survey popup
To be honest, I didn’t expect this one. I’ve seen a loooot of popups in the past 2 years. But nothing like this one. I was browsing Chanty’s blog when I stumbled upon this popup displayed in the lower-right corner.
I took the first question, only to realize that it was a multi-step popup survey.
The last screen featured an invitation to join their Facebook group.
I was curious, so I reached out to Chanty’s head of marketing Olga Mykhoparkina. She explained how they came up with this popup: “We were looking for a way to collect feedback from our potential customers and came up with this popup on the blog. It helped us get a lot of insights on potential customer pains, the way they are using their team chat at work, which tool they currently use for communication and so on.”
We love this example because it’s subtle, smartly targeted and the UX of the survey is superb.
4 Tips to Help You Design Your First Popup
Before you jump into creating your campaign, make sure to check these best practices.
Avoid bombarding your visitors
Make sure your visitors don’t see your popup too frequently.
As a rule of thumb, we recommend displaying a campaign once a week maximum, and no more than 3 times.
Take the precaution to exclude existing subscribers. There’s nothing worse than to be presented with an email popup when you’re already on the email list.
Tests run by our users show that the more targeted a popup is, the better the results are.
Segment your popup by WordPress category, WordPress tag or by keyword to display the best possible message to your visitors.
Polish your design
Most popups that you’ll find on WordPress sites are ugly. Period.
Take the time to add a picture, select the colors of your different elements and don’t forget to add visible closing options. Your visitors will thank you.
Rome wasn’t built in a day. The best way to craft a successful popup strategy is to run A/B tests to assess your different hypotheses. Does your popup perform better when displayed when your visitors scroll down 5% or when they show exit-intent signs? Does it help to add a visual to the modal? Does a bigger popup perform better than a smaller one? How do the different popups affect your engagement metrics (time spent on site, bounce rate)?
We’re used to seeing the same kind of popups on WordPress blogs and websites.
Yes, ugly lightbox popup with a dark blue call-to-action, that’s you I’m pointing at.
I hope this article has convinced you that it doesn’t have to be this way.
A lot of marketers are innovating and trying new segmentation tactics, advanced designs, original formats, etc., with a direct impact on the conversion rate of their popups.
It makes both visitors and marketers happier. It’s a win-win situation. It’s time you join our gang!
PS: If you’re using WordPress, make sure to test our popup software. We offer a 14-day free trial and don’t even ask for your credit card.