How to implement an exit pop up that doesn't suck
You've probably seen an exit pop ups many times, and maybe you even have one implemented on your own website. Marketers usually use it to entice visitors to stay on a page. In this post, we'll give you an overview of what an exit pop up is, how it works, and what you should do to avoid it becoming annoying or aggressive to users on your website.
What is an exit pop up?
An exit pop up appears on the screen when a user is about to leave a website. The pop up is usually an offer that draws visitors back to the site and makes them act before leaving. The offer comes in the form of free resources in exchange for an email or discounts to prevent cart abandonment like in this example:
Exit pop ups are very effective in lead generation. They can help you keep visitors on your site for more extended periods, add subscribers to your mailing list, reduce cart abandonment, and boost your conversion rates.
But in many cases, these pop ups flash on the screen at the wrong time and for the wrong reasons. This is particularly annoying and interferes with the user's experience.
Examples of annoying pop ups
Improperly targeted pop ups can be a tad irritating. Picture this: you're advertising a great benefit, but it's only relevant to less than half of the people seeing it. Do you think that showing it to all users it's going to make much sense or drive conversions? Probably not.
Websites that don't target the right people only irritate users and do more harm than help the business.
The same goes for a wrongly-timed pop up that shows up while your customer reads a vital piece of content. Or pop ups that offer nothing interesting to change the mind of a visitor that's about to abandon the website.
As with everything else in the user journey, the right content must appear to the right person at the right time when you want to provide a good user experience and drive conversions.
Now, there are ways to implement an exit pop up so it doesn't make your users feel irritated when browsing through your site. We'll talk about it briefly, but first, let's walk you through how exit pop up work.
How does an exit pop up work?
When a user decides to leave the page, their cursor automatically moves to the "x" button on the browser without thinking twice. It's a natural pattern, like turning off the lights when leaving your room or shutting the door behind you.
On a website, an exit pop up disrupts that pattern.
It pops up as soon as it detects the user's cursor leaving the page's frame. In cases where there's no cursor movement, like in mobile devices, it checks out the user's scrolling behavior, detecting if they scroll to a particular percentage of the page, scroll up instead of down, press the back button, or switch between tabs in a browser.
Many developers create exit pop up from scratch by including specific Javascript implementation in the source code, while others use free or paid plugins connected to their website. Optinmonster and Mail Munch are examples of these plugins.
But how do you ensure your exit pop up do not annoy your visitors? There are rules you can create for triggering pop ups in specific situations. However, most plugins don't enable you to use those rules. Next, we'll give you an overview of what rules you can apply and how to implement them.
When to use exit pop up
Implementing a pop up that works according to exit detection or scrolling behavior is not enough. There are other possible rules for exit pop up depending on your goals. The key is to limit the use to only essential needs and always think about the user's experience.
For instance, you can set a rule for triggering the pop up only once per session. Once a user sees your pop up, it should not appear again, even if they repeat the same action.
Another possibility is triggering the pop up to appear on specific product pages for users interested in that product. For instance, a user browsing the product page of an unavailable product would see a pop up recommending them to join your email list for notifications when it returns to stock.
Another rule could be that the exit pop up should appear only for new users or leads. Free shipping popups are a good example.
As you can see, many possible rules get limited when you use a plugin or complex when you develop one from scratch.
How to create a dynamic exit pop up with Croct
Segmentation rules for exit pop up go as far as the user's onsite behavior, demographics, CRM data, location, and profile data go. Segments could also extend to the type of device, frequency of use, social profile, the user's company or industry, traffic source, and the keywords used to find your site. It can be as flexible as displaying exit pop ups with personalized travel recommendations on a travel website or personalized game recommendations for each user on a gaming site.
Creating personalized pop ups for each customer can cost too many development hours. The pop up itself is not the problem, as it can be a simple HTML element. The trouble appears when the marketing team gets new ideas to test, and it becomes necessary to frequently change the pop up content or behavior.
If you are a developer (or have one at your side), this is how a simple and static pop up would be:
1<div role="dialog" id="pop-up">2 <div id="content">3 <a href="{{link}}">4 <img src="{{image}}" alt="{{altImage}}" />5 </a>6 <button type="button" aria-label="Close" id="close">✕</button>7 </div>8 <div id="backdrop"></div>9</div>
With Croct, however, it is possible to turn the pop up into dynamic content. It can be transformed into a personalized component via API through our SDK. From there, creating segmentation rules becomes simple using the PMS, our personalization management system.
How PMS works
Croct's PMS is a software that enables marketing professionals to deliver and manage personalized experiences on different channels.
For example, you can display an exit pop up for a user in the travel industry or display it for users coming from a specific location. That type of experience involves highly intelligent systems that automatically employ user data to react to each person's actions in real-time.
With the PMS, this logic doesn’t need to be on the source code, making the developer's work easier and allowing the marketing team to change multiple strategies faster. It also means not showing annoying pop ups as each one is personalized according to the context of each user and not shown generically throughout the website.
Remember the provided code sample above? Using Croct, you would configure a component with a link and an image and implement it like this:
1croct.fetch('pop-up')2 .then(({payload: content}) => {3 if (content === null) {4 // don't show the pop up5 document.querySelector('#pop-up).style.display = 'none';67 return;8 }910 document.querySelector('#content img').src = content.image;11 document.querySelector('#content a').href = content.link;12 })13 .catch(() => {14 // if something goes wrong, don't show the pop up 🥲15 document.querySelector('#pop-up).style.display = 'none';16 });
Notice that the source code does not contain any segmentation logic or content since it comes from Croct's platform. Therefore, the marketing team can change and AB test them anytime without a deployment.
To understand how Croct implementation works, you can look at this simple example.
Conclusion
Marketers have misused exit pop ups over time. But when properly used, they're a powerful way to reduce bounce rate and boost conversions on your site.
Using Croct's PMS to turn your pop ups into dynamic content gives you the flexibility to personalize any kind of experience. In addition, it's also possible to find out which of the pop ups are delivering the expected results through AB tests on the same platform. With this, you can optimize your website faster and validate hypotheses about the real needs of your users.
So, if you want to get the best results with your exit pop ups and improve your user experience, create your free account and explore our platform.