.avif)
Website popups have a bad reputation.
But that’s because they’re not always used in the right way.
A visitor to your website may be happy to sign up to your newsletter to get that money-off voucher that you’re offering.
However, if they’re asked about it in the wrong way, they can easily be put off and leave your site altogether.
So what is the best way to use website popups on your site?
In this post, we’ll show you how to choose and build website popups that don’t turn your visitors away.
Let’s start by looking at the 5 main website popups:
The welcome popup
This popup shows up as soon as your visitor arrives on your website.
It’s often used to promote sales and special offers that the visitor can keep in mind as they browse your products or services.
The time-driven popup
Instead of showing up as soon as a visitor arrives, this can be set to only appear after a visitor has been browsing your site for a certain amount of time.
The scroll-based popup
This is quite similar to time-driven website popups. However, instead of showing up after a certain length of time, it appears once the visitor has scrolled to a certain part of your content.
The click-driven popup
With this type of popup, the visitor actually needs to click on a link within your content for the popup to show up.
This link is usually within the text or an image.
The exit-intent popup
This only shows up when the visitor moves their mouse over the X that closes down your website in their browser window.
So which website popups are best?
When a potential customer arrives at your website for the first time, it’s as though they have just walked into a shop for the first time.
A good way to think about effective website popups is to picture your website as an offline brick-and-mortar store.
Imagine the popup as a sales rep presenting them with an offer.
With this idea in mind, let’s look at each of the 5 popup types listed above in more detail.
The welcome popup
With the welcome popup, the sales rep would be presenting the visitor with an offer as soon as they walk through the door.
At this stage, the visitor might not know much about you at all. They might have heard about you from their friends or through scrolling online, so they decided to wander in.
Therefore, it’s likely that asking visitors to sign up to your newsletter or follow you on social media the moment they arrive isn’t likely to be very effective.
How do they know if they want to stick around yet?
Having something blocking their way straight away – whether that’s a sales rep or a popup – could be seen as too intrusive and over sales-y.
This can leave them with a bad impression of your brand. It may even cause them to turn around at the door and seek out a more laid-back shopping experience.
How to do the welcome popup right
Set a time limit
To make your welcome popup discount code as effective as possible, set it to be available for a limited amount of time.
While you’re not asking the new visitor to hand over their details before they’ve got to know anything about you, the time-sensitive offer encourages them to make use of the offer soon.
Sure, it’s a slower way to get an email address than simply asking for it straight away. However, it’s a much more personable and effective option.
Pick an offer that doesn’t require familiarity
Welcome popups are much more effective when you base your offer on something that doesn’t require familiarity with your brand.
Remember, there will be many first-time users on your site. Treat them as if they’d just walked into your shop.
Don’t ask your user for information
Your popup shouldn’t require the visitor to hand over too much, or any, of their information.
Putting in personal information into a website you don’t know well yet can often put many first-time users off.
As you’ll receive the user’s details when they use the discount code, you’ll have the option to re-market to them later.
Remember, you’re trying to build trust with your customer- and this takes time.
The time-driven popup
If you have a lot of website traffic data available, time-driven website popups are a good option.
By looking at your analytics, you can see what time your average user starts to leave or lose interest in your content. This allows you to set your popup at an optimal time.
However, without data, your website popups would be running on complete guesswork. You wouldn’t have any way of knowing what your average visitor is doing on your site at any given time.
Going back to the offline scenario comparison, this would be like a sales rep approaching every single visitor (regardless of what they’re doing) every 2 minutes after they come in.
The store’s visitors aren’t all going to be thinking or doing the same thing. Some will just be browsing, and some will head straight to a product.
Ideally, you want everyone to be in the same mindset when they’re reading your website popups.
The time-driven popup essentially runs on educated assumptions, and so it can be difficult to know what time to set it to appear at the best time.
How to do the time-driven popup right
Don’t rush into it
If you want to use this popup, timing is key.
Make sure you give your customer time to become familiar with your website.
But don’t leave it so long that visitors leave before it shows up.
Now, this can really vary from website to website and audience to audience. If you don’t have a clear idea of what timing would be best for your popup, try using A/B testing until you find the optimal window.
Try out A/B testing
A/B testing is where you try one version out with a portion of your audience and then show a different version to another portion of your audience.
So, here, you’d change the time that the popup appears. For example, one portion of your audience could be shown the popup after 3 seconds and the others could be shown it after 30 seconds.
You can analyze the results to see how each time affected the conversion rates, and use the information to set the popup to appear at the optimal time.
Acknowledge the interruption
Another tip would be to use the text in the popup to acknowledge the interruption that it’s causing in a friendly way.
In the same way that a sales rep wouldn’t just hand you a flyer in a store without saying anything to you first, it’s more personable to ‘say’ something to a website visitor too.
The scroll-based popup
As mentioned earlier, the scroll-based popup is very similar to the time-driven popup.
The difference is that it only shows up once a visitor is already engaging with your content.
The theory behind this is that, as the user is already showing interest (especially if you set it to appear after a visitor has scrolled, say, 70% of the way through the page), it has more of a chance of getting a click-through.
However, this isn’t always successful.
While the scroll-based popup does have a very good chance of showing up to people scrolling through your content, remember that – especially if you have a blog – these visitors are taking a few minutes out of their day to read something that interests them.
If a popup jumps onto their screen as they’re reading, two detrimental things could happen:
(1) They could dismiss the popup without really looking at it so that they can continue reading.
(2) It may even put them off your brand altogether because they were interrupted from enjoying your content.
Going back to an offline example, this scenario would be like watching a music performance.Three-quarters of the way through, just as you’re really enjoying it, a sales rep comes over to ask you to sign up to the band’s newsletter.
Not cool.
How to do the scrolling popup right
Having said that, the scrolling popup can be really effective.
If somebody is scrolling through your site, it’s likely that they are invested in your content and therefore likely to be interested in what you have to offer.
That is, if you do it right.
Set the popup at the end of the page
To prevent your popup being a potential annoyance to your visitor, set it to appear only once the person has reached the bottom of the page.
This way, you still get the benefit of your popup reaching someone who’s engaged in your content, but you don’t run the risk of interrupting them halfway through reading.
The click popup
When it comes to conversion rate potential, the click popup is king.
The click only shows up when the visitor requests that it does (by clicking on the text or image that it’s linked to). Therefore, you know you’re getting in front of people who have explicitly shown interest in your offering.
It’s also one of the better ones to opt for from an analytical point of view, too.
With website popups that show up to anyone, at any time, you never really know why they dismissed your offer. Was it the kind of popup? Wrong timing? The text? The design? The offer itself wasn’t appealing enough?
However, with click website popups, you know that people are interested. After all, it was them that made the popup appear.
This means that if they decline, it’s likely to be because they didn’t like the way it was written or designed.
This gives you a really good insight to help you improve your popup (and therefore conversion rate) in the future.
How to do the click popup right
Keep images relevant
It’s very important to ensure that the text or image that links to your click popup is completely relevant to the information that your popup contains.
Otherwise, not only will people feel that they have been mislead, but you’ll be missing out by not showing your popup to relevant visitors.
Make it clear what it is you’re offering
Don’t take your customers by surprise. Make it really obvious what the visitor can expect to learn more about.
You can do this by being as clear as possible in your link’s copy and/or design. Try not to be smart with your words: just tell them how it is.
The exit-intent popup
The exit-intent popup only shows up when the visitor’s mouse is moved towards the X that closes website.
It essentially gives you one more chance to capture your customer’s interest before they leave.
Sometimes, a visitor might be looking through your website and be really interested. However, perhaps they just think the price is too high, or they’re not fully convinced about your product yet.
So, they decide to click off and look elsewhere or check back another time in case you have a sale.
But then, if a discount voucher or a free trial pops up just before they leave, that can turn a visitor about to dismiss your service into a new customer.
The exit popup is another good example of an effective yet unobtrusive option.
The customer is likely feeling that they know a good amount about your offering, and they aren’t in the middle of reading, watching or listening to something.Therefore, an exit popup isn’t going to distract them at this point.
How to do the exit-intent popup right
The good news? There aren’t many ways you can get exit popups wrong.
That’s because (a) you aren’t interrupting your visitor and (b) they are already familiar with your website.
However, here’s what you can do to make the most out of your exit website popups:
Create different popup versions
Let’s say you have a website on web design services.
Within that website, you have a chat for developers, a number of design courses and ebooks, and a blog.
Chances are, different customers will be looking at different services. Therefore, the same popup won’t be relevant to everyone.
For the best results, create a tailor-made popup for each of your website categories.
For example, the popup could invite your blog readers to subscribe to your posts; browsers of your e-course could be offered a money-off coupon; and a visitor leaving from your services page could be shown a popup that offers them a free trial.
What do good popups look like?
Ok, so now we know the different popups and how to use them in the best way.
Now let’s look at how to make a popup look great.
Keep it short
Some visitors automatically go to click the X on every popup they encounter. So, you need to make sure you grab their attention right away.
When website popups have lots of text, it’s very unlikely that a visitor is going to read it. (With perhaps an exception for click popups, as they have purposefully opted to view that type of popup).
So make sure that your copy is concise, to the point and engaging.
You can do this by making sure your popup has a large, short and snappy headline. The title should of clearly and concisely express what you’re offering in just a few words.
Under your headline, follow up with a sentence or two about what your offer is and why it matters to them.
Try and address the reader’s own interests from the start. Lead with the benefits of your offer rather than the features of it.
For example, if you run a recruitment agency for photographers, you may be offering a photography course in exchange for email addresses.
In your popup’s copy, you’ll want to focus on why they will want it and what it will do for them (make them a better photographer, put them ahead of their competition, etc.), rather than only focusing on the specifics of the course itself.
Don’t forget the call to action!
This is the most important part of your popup.
It explains exactly what the visitor needs to do in order to receive the free product, discount or free trial.
Much like the rest of the text, keep y
our call to action very simple and, most importantly, make sure that you’re only asking them to do one thing.
As soon as you introduce more than one action for them to take, they are likely to feel overwhelmed and even put off completely.
A really effective copywriting tip is to write the call to action from the perspective of the visitor.
Instead of creating a button that says ‘Sign up for a free ebook’, create one that says ‘Send me my free ebook.’ This makes the call to action more personable and relatable to the reader- and the button all the more clickable.
Keep the design minimal
Make sure that the design of your popup is very simple. This includes font, images and text.
You want to draw the eye first to the headline, then the sentence and, finally, you want them to read the call to action.
Be mindful of anything on your popup that isn’t necessary or that could distract or draw attention away from that main content.
As popups only show up for a split second, make sure that the font is also very simple and readable. The easier your font is to read, the more chance there is a of a visitor sticking around to read it.
Finally, your call to action is the most important part of your popup-so make it stand out!
If you make the call to action a little bolder, it’ll likely get noticed even by those visitors who are only glancing at your popup.
Quick tip: using a bold color that’s different from the rest of your design and placing your call to action in a button or a clearly clickable hyperlink is a tried-and-tested way of increasing conversions.
Only ask for a few details
If your popup requires visitors to fill out their details, make sure that you’re only asking them for information that is absolutely vital.
For instance, if you’re asking them to subscribe to your mailing list, just ask for their first name and email address.
Asking for anything extra such as their job title, company name, phone number, etc. slows down the process, and only puts up another barrier between lead and sign-up.
Make it easy to dismiss
A very important part of good pop-design: make it easy to close.
A clearly visible X or a button that says ‘no thanks’ should do the job.
Now, this may seem a little counterproductive. After all, we want visitors to read our popup, not close it, right?
Of course we do. But even after they’ve read your headline, short description and call to action, some visitors may not want to take the offer up.
They may, however, still want to browse your website or learn more about you. They may even become a subscriber or customer at a later time.
If there isn’t an easy way for the popup to be closed down, it can cause the visitor to become frustrated and reconsider. Is your website content worth the time and effort of trying to work out how to close the popup?
This then leads to the visitor leaving the website altogether, increasing the website’s bounce rate.
Not good.
Test before you launch
Once you have your popup ready, it’s time to test.
Go onto your website. Put yourself in the position of your own visitor.
Would you follow the popup’s call to action, or would you quickly dismiss it? If the latter, keep amending it until it’s at a point where you’re completely confident.
Just before you launch your new popup, test it out with a few colleagues, friends or, if possible, people that you don’t know.
Ask for an impartial unbiased opinion on how they react to the popup. Is there anything that they think you should change?
You could even use a survey tool such as Survey Monkey to get specific questions answered.
How you can get your popups set up today
There are many tools and plugins that can be used to build your popups.
In this post, we’ll focus on Sumo’s List Builder.
While it offers advanced features (customization, mobile optimization, A/B testing, and more), its drag-and-drop functionality makes it really easy to use- whether you’re tech savvy or not.
Sumo works with most of the major services, and it offers installation instructions for each. Once you’ve signed in, you’ll see the following screen:
Once you’ve selected yours, simply follow the instructions and you’ll then get access to the Sumo dashboard, as seen below:
From here, you can set your first popup up with the click of a few buttons! As you can see, there are 6 stages:
1. Choose your goal
Here you’ll need to decide what it is that you want to get out of your popups.
Are you looking to get as many email addresses as possible? Do you want to direct visitors to a certain page on your website? Do you want more social shares?
It also gives you an option to collect info with your own HTML code.
2. Choose your form
Would you like the popup to cover the whole screen, or would you prefer a sleek bar that sits to the side of your content?
3. Design your popup
There is a ton of templates to use, which makes setting up your popup super easy- and fun!
However, what’s even better is that you’re able to change the colors, fonts and button sizes so that the popup matches your branding perfectly.
This means that your popup will appear as a seamless extension of your site, rather than a confusing, off-brand interruption.
4. Decide on your popup’s visibility
Now, this is where you can put into practice what you’ve learned from this post on popup timings.
As you can see below, the ‘Timed’ tab allows you to set a specific amount of seconds (or minutes) until you popup appears on your site.
It also lets you set the amount of time that’s left before the same visitor sees the popup again.
Similar to timed popups, the ‘User Leaves tab’ (shown below) enables you to set the time between each popup for exit popups too.
You’ll also notice the ‘Display Rules’ section just under the ‘Timed/User Leaves’ tools.
This is where you can tailor your popup visibility even further by creating rules for when the form should and shouldn’t show.
For example, you could create a popup that addresses visitors who arrive from a specific URL, page, device, or referrer.
Of course, if you want the popup to show up for every visitor, you can skip this section.
5. Tailor your success events
When someone completes your desired action of your popup, a welcome email can be sent to them automatically.
On Sumo you can tailor the email so that it’s in line with your messaging and branding.
You can also set up a content download file or instruct the popup to send the visitor to a specific URL.
6. Connect your popup to your email service
Once you’re happy with your popup’s design and settings, you’re then invited to integrate it with your email service.
This is part of Sumo’s Pro level. If you’re only wanting to use their basic service, you can skip this step and complete your popup by clicking ‘Make Live’.
After this, your popup will be ready!
To keep track of how it’s performing, you can take a look at your ‘Forms’ page. Here, you’ll be able to follow metrics such as views, conversions and your conversion rates.
When you have a few popups going, you’ll be able to see which popups are working better than others in your ‘Forms’ page.
This will give you fantastic insight into how you can make future popups more effective.
The key takeaway – what you can do today
While website popups are sometimes seen as unpopular, if they’re designed and used in the right way, they can be a really good for drive sales and social media shares.
As you now know how to set up website popups, why not go off and create one today?
Simply follow our advice and the step-by-step instructions above, and get your website popups published!
