Written by James Scherer
Get James Scherer to personally send you his new posts.

5 Examples of Website Popups that Work

They’re loud. They’re in your face. They’re aggressive and they can’t possibly, possibly, be right for your business.

Right?

I mean, surely.

Pop-ups are a controversial topic, I know. In the past couple weeks we’ve received a hefty mail-bag of criticism and warning from readers and clients alike.

Well, I have one thing to say to everyone (including people open-minded enough to consider pop-ups for business)… 

1,472.

That’s the number of leads Wishpond has generated in the past three weeks from blog pop-ups alone.

 But wait, I don’t get it. Why do they work?

The long and short of it is simple: a website popup requires a visitor to take action, either positive or negative.

 Let me repeat that. Pop-ups require a reader or visitor to your landing page to, actively, say “No” to your offer. And when you put something awesome in front of someone and require them to consider it as a possibility, the chance of them converting on it is far, far higher than it is if they have the option to simply leave.

Pop-ups are like milk: un-bounceable.

 This article will give you five examples of pop-ups that can work for your business. I’ll show you the copy to use and exactly what they might look like on your site.





Webinar Registration Entry Pop-up


Entry pop-ups put you in dangerous territory. They interrupt a visitor coming to your page - pretty damn aggressive.

However, done right, entry pop-ups can have some seriously impressive conversion rates - so long as you support your interruption.

Here’s an example of an entry pop-up that works:


Entry Website Popup example


Why does this entry pop-up work?

  • It’s a limited-time offer, which justifies your interruption of a possible lead’s arrival to your page. This is something they understand needs to be seen now (as the promotion ends soon).

  • The subheader describes exactly what leads stand to get quickly and simply.

  • The subheader delivers value with mention of the guest host, dropping a well-known name to catch the eye of a reader

  • This entry pop-up would be the first touch point (but not the last) in the promotion of the webinar. Blog articles would also feature a webinar CTA and the blog sidebar would feature a picture of John Smith with the date and time of the webinar as well.

  • The colors work together and the CTA button contrasts well with the understated blue - making it incredibly clear how to convert.

 What could we test?

  • It would be interesting to run an A/B test on the copy sizes. Do we get more conversions from emphasizing the time factor or the well-known name of the webinar host?

  • We could also test adding “you”, “me” or “my” to this pop-up’s copy. Adding personal pronouns can positively affect conversion rates, and it would be interesting to see if that were true on pop-ups like it is (in general) on landing pages.


Ebook Download Click Pop-up


This is a pop-up strategy that we’ve been employing on the Wishpond Blog for a couple weeks now. Compared to our old strategy - of using a banner image at the bottom of our articles as an image link to a landing page - the pop-up has doubled our lead generation.

Click pop-ups (or “two-step signups”) cut out the need to send blog or landing page traffic to another page of your site. Click pop-ups expedite the lead generation process, meaning more leads (faster) for your business.

They also cut down on the need for extensive copy and landing page optimization, as they’re far more concise and don’t require anywhere near the energy a landing page does.

 Here’s an example of a click-pop up that works (and is currently working on the Wishpond Blog):


Wishpond Click Website Popup example


Why does this click pop-up work?

  • The click pop-up puts a conversion opportunity in front of your reader while they remain on your blog page instead of sending them to a whole new tab and landing page. This means possible leads have less time to think, meaning more leads for your business.

  • The copy is consistent across both image link and click pop-up, ensuring people who click on the banner image quickly and easily know they’re downloading the right piece of content.

  • The pop-up includes a short and efficient benefit ilst, a USP and a CTA (the most essential parts of any lead or sales-generating page).

  • The banner includes an eye-catching image, which contrasts with the text-dominated bottom of a blog article and draws attention.

What could we test?

  • Changing the templates for our banners so they match the formatting and design of our click pop-ups to see if even more consistency increases conversion rates.

  • Changing the copy to sound a bit more salesy and aggressive. Try something like “Get the free report that can earn you thousands of dollars with no money down!”





Free Demo Exit Pop-up


An exit pop-up is what has generated most of those 1,472 leads I mentioned above. They work by placing a required action in front of your reader, insisting that they focus on it.

 Here’s the breakdown of exit pop-ups:

  • Your blog’s readers are focused, intensely, on your content.

  • When people are focused on a single, specific task or point, they experience something called “inattention blindness”, which basically means they don’t see something obvious (like a big orange CTA button) when they’re focused on something detailed.

  • Pop-ups, particularly exit pop-ups, break through inattention blindness by coming between a reader and their focus point.

  • That means that a reader who bounces (not because they aren’t interested, but simply because they genuinely don’t see your “Ask”) may, instead, convert. 

Here’s an example of an exit pop-up that works:


Exit Website Popup example


Why does this exit pop-up work?

  • Placing this pop-up on a product or pricing page of your website will catch each visitor who chooses to bounce because of a pricing or “not-enough-value” issue.

  • The offer is exclusive, which is always a good influence on engagement.

  • The pop-up is focused on giving you something (“GET 50% off, GET the discount”), which frames it in terms relevant to the visitor rather than what AcmeSaaS can do. 

What could we test?

  • We could test putting this pop-up solely on the pricing pages (rather than pricing and product) to ensure that anybody bouncing has seen the value of what we’re offering.

  • We could test some louder, more “in-your-face” color contrast, particularly the CTA button (perhaps a red).


Blog Subscription Scroll Pop-up


Pop-ups work best for email subscription, as it’s less of an ask and they can be delivered to people in the moment they’re most interested in your valuable content (an email-gated ebook, whitepaper, infographic, report, etc).

Scroll pop-ups are my go-to for email subscribers, as they only show to readers who are invested enough to read at least 70% of a blog article. This is also why it’s essential you don’t place a scroll pop-up at the beginning of your page (because your reader hasn’t gotten value from your content yet) or at the very end (because many readers will leave before scrolling to the very bottom of a page).

Here’s an example of a scroll pop-up that works:


Scroll Website Popup example


Why does this scroll pop-up work?

  • The copy is really solid across the board: everyone wants to be first, everyone wants to “get the latest” and everyone wants to receive something exclusive. The value of subscribing is clearly communicated.

  • The CTA button stands out like a lighthouse against the somewhat dreary background colors.

  • The pop-up only shows after readers have invested a solid amount of time and energy into your content, meaning your subscribers are actually interested in your subject matter (and therefore products).

  • The pop-up doesn’t ask for much in return for a subscription.

 What could we test?

  • While the contrast of the CTA works well to make it stand out, the grey of the background is really pretty dull. Would a more exciting color-scheme increase conversions?

  • Would different CTA copy (perhaps framed in terms of what the subscriber gets) perform better than the command CTA?

  • Would an image of some sort increase the visual appeal and conversion rate?





Industry Report Timed Pop-up


Timed pop-ups are a bit more tricky than scroll pop-ups, but can be perfected through testing and tweaking.

I recommend you head over to your Google Analytics for your blog page and check out the average visit duration on your articles. Set your timed pop-up to appear anywhere between 10 and 20 seconds before your average reader tends to leave.

Here’s an example of a timed pop-up that works:


Timed Website Popup example


Why does this timed pop-up work?

  • This pop-up would show only on blog articles related to customer relationship management, ensuring that the people who see it are likely to be interested in the ebook’s content.

  • Or, if your business was devoted solely to CRM, this pop-up could appear anywhere on your website (unlike a more specific ebook or whitepaper). This pop-up would find success on a product page just as it would on your blog.

  • The pop-up’s offer (a full industry report) is valuable. This means we can ask for more lead information, which increases lead conversion rates down the online marketing sales funnel.

What could we test?

  • An image may soften the intensity of the pop-up’s numerous form fields and increase visual appeal.

  • We could see if fewer form fields increases conversions enough to offset the increased value we get by knowing more about our leads.

  • We could see if a larger subheader/summary paragraph would make it easier to communicate value, or if the larger pop-up is too aggressive.


Conclusion


The pop-up in this article were created by me in the Wishpond website popup tool in about 45 seconds, which (for a content marketer doing a pop-up article) was incredibly convenient.

For you, it’s more of a huge boon for your business’ success, as 45 seconds of work can mean thousands of leads, email subscribers, and sales down the line.

But sales spiel to the side, I hope you learned something about how to use the five main types of pop-ups. As I mentioned beneath each example, there are always variables of your pop-ups that you can test and tweak, adding and taking away bits and pieces until you’re as optimized as you can be.

Make sense?



Written by James Scherer

James Scherer is the content editor at Wishpond. When he's not writing or designing for Wishpond he's risking his life biking around the city. Reach out to him on Twitter @JDScherer.