Update 2021/6/9: This article was updated for Bootstrap 5.
Update 2024/7/7: This article updated for v5.3.
Exit popups help convert users who are about to leave your site and regardless of how you feel about them, they are unquestionably effective. This article will show you how to create an exit popup from scratch using the Bootstrap framework that you may style however you wish. The code can be modified to use any backend service – after all clicking the button just sends an HTTP POST request. (In a subsequence POST, Ghost will act as a backend to store the received registration information.)
There are numerous third-party services available to add CTAs to your site. If you are already using a particular service for something else, and that service provides CTAs that you can add to your site – MailChimp and Hubspot are good examples – then it makes sense to utilized that service. The collected data will end up in the place you want it go. However, if you are looking at a service solely to add CTAs to your site, then its just not work the cost and effort to have yet another subscription service. (If you’re like us, you have far too many subscriptions already). It’s easy to add an exit popup – for free – with a handful of lines of copy-and-pasted JS code that you can just add to your site.
Benefits of Pop-Ups
Pop-ups are very effective for desktop users. There are several advantages to using pop-ups when targeting desktop users:
Covert Users: Depending on what you use the pop-ups for, they can increase leads, bolster sales, increase email lists, or direct users to popular posts. Several case studies validate the effectiveness of pop-ups.
Demand Attention: Pop-ups take up the entire screen and require the user to respond to the content. While it can become frustrating or annoying to users, they still absorb the content on the pop-up.
Create a Call-to-Action: Pop-ups create a focused call-to-action message that your users are guaranteed to see. This opens impactful marketing opportunities that can be customized and changed to meet your site goals.
Increase Your ROI for Free: Pop-ups are a free marketing tool that can convert your users with a massive payoff.
Where to Target Pop-Ups
Because pop-ups can also be very annoying, it’s essential to use best practices so that you don’t lose users. Pop-ups can be very useful when targeted correctly. Here are some critical tips for implementing pop-ups well:
- Do not allow pop-ups for mobile devices because they don’t display well, and Google can penalize you for using them.
- When you use pop-ups, make sure the content you are serving them is relevant and valuable to the content they are seeking.
- Don’t use pop-ups on every page. Be selective and strategic about when you use them.
- Wait to trigger pop-ups until the user has spent some time on your website. They need to decide first if they value your content before you block it, or they may leave.
Different Types of Pop-Ups
There are a variety of types of pop-ups that are less intrusive than traditional pop-ups:
Exit-Intent Pop-ups
The exit-intent pop-up triggers when a user navigates to close the tab on your website. This pop-up gives you a last chance to get their attention or entice them back to the site. You’ll want to make sure your pop-up is easy to close, or you’ll risk annoying the user further and creating a negative experience with your website.
Gamified Pop-ups
By adding a game element with a chance of potential reward makes the pop-up more intriguing and fun. Gamification is a relevantly new technique for providing rewards like free shipping, discounts, free samples, or subscriptions.
Multi-Step Pop-ups
Multi-step pop-ups offer two or more pop-ups based on the user’s response to the first pop-up. It allows you to customize your content that is most relevant to the user.
Freebie Pop-ups
These pop-ups offer free content like ebooks or other valuable content in exchange for the user’s email. If the freebies are tailored to the content that your users are seeking, then it can be very impactful.
Incentive Pop-ups
Incentive pop-ups provide a variety of discounts or promotions that will attract your users, such as:
- Free shipping
- A gift card with purchase
- Discounts on products or total orders
- Insider details on upcoming promotions
Once you know what types of pop-ups you want to use on your site, it’s time to create them.
Requirements
- Prompt the user when that user is about to leave a particular page.
- Remember registered users so that they aren’t asked again (if you are fortunate enough to have returning visitors).
- Fully customizable look and feel.
- After minimal interruption, allow the user to proceed with their intended action e.g. close the browser tab.
Exit Popup styling
The exit popup will use a Bootstrap 5 modal for styling. If you are using another framework then you can easily translate the code. If you are coding scratch then it should be trivial to create centered div with background overlay.
Add the following HTML to you page.
<div class="modal fade" id="exitModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">'
<div class="modal-content">
<div class="modal-body p-5">
<h5 class="text-center mb-5">Subscribe to our mailing list.</h5> <form data-members-form="subscribe">
<div class="form-group mb-4">
<input class="form-control" name="email" placeholder="[email protected]"
autocomplete="false">
</div>
<div class="form-group">
<button class="btn btn-primary w-100" type="submit">Subscribe</button>
</div>
<div class="form-group text-center">
<a href="#" data-dismiss="modal">No, I don't want to join.</a>
</div>
</form>
</div>
</div>
</div>
</div>Change the <form> element to point to whatever backend you are using. The style and wording can be tuned to your needs.
If you are using a customized version of Bootstrap – as you should be – then ensure that style.scss includes the following uncommented lines:
@import "node_modules/bootstrap/scss/forms";@import "node_modules/bootstrap/scss/modal";There should be no changes to you site yet – as expected.
Show the modal on exit
The modal is triggered when the user’s mouse leaves the main page, suggesting they are about to click the back button on switch tabs. The following JS code shows the modal:
<script>
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
} } addEvent(document, 'mouseout', function (evt) {
var modalId = 'exitModal';
if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('modal.' + modalId)) {
var modal = new bootstrap.Modal('#' + modalId);
modal.show();
localStorage.setItem('modal.' + modalId, '1');
}
});
</script>The above code assumes you have previously loaded the Bootstrap JS.
Conclusion
Exit intent popups can significantly increase your conversion rate and don’t need to be implemented by yet another third-party service. With small amounts of code, mostly cut-and-paste, you can add the functionality to your site for free.
Mailing Address