How to build an Exit-Intent Popup in Javascript

Picture this situation: Sarah, an internet shopper, visits your online retail site. She looks through your product pages, puts an item in her cart, but then starts to reconsider. Right when she tries to leave the page, a well-timed popup pops up.

“Hold on! Don’t go away without something in your hands. Get a 15% discount on your first order when you sign up for our newsletter!”

Follow us

Sarah is fascinated as she types in her email, takes advantage of the discount, and becomes a loyal customer. That is the effectiveness of an exit-intent popup.

How can you effectively use exit-intent popups to increase sales and grow your email list significantly? And most importantly, how can you develop one that functions smoothly on all devices, like mobile, where more than half of e-commerce purchases take place?

In this guide, we will explain how exit-intent popups can improve your online business by increasing conversions and growing your email list. We will explore two different methods for adding an exit-intent popup on your WordPress website. One that uses Javascript code and a no-code solution.

Why You Need an Exit-Intent Popup

Every day, potential customers leave websites without taking action. Exit-intent popups give you a final opportunity to engage these visitors just before they leave. Here’s how to use this powerful tool to grow your business.

1. Increase conversions: Offer special deals, discounts, or free shipping to encourage visitors to complete their purchases.
2. Grow your email list exponentially: Capture email addresses with irresistible lead magnets or newsletter signup incentives.
3. Reduce cart abandonment: Remind shoppers of items in their cart and offer a limited-time discount to encourage checkout.
4. Upsell and cross-sell: Showcase related products or bundle deals to increase average order value.
5. Re-engage bouncing visitors: Turn potential exits into opportunities by offering valuable content or personalized recommendations.

Creating an Exit-Intent Popup with JavaScript

Let’s start by looking at a simple JavaScript implementation of an exit-intent popup. This method involves making changes to your WordPress theme files. While it’s a good way to learn, it has limitations, especially for mobile users and advanced marketing needs.

The exit-intent popup we’ll be creating is seen below:

Let’s get started, follow the steps listed below:

Step 1: Create the Popup HTML

First, you’ll need to create the HTML structure for your popup. You can add this to your theme’s footer.php file or use a plugin that allows you to add custom HTML to your site.

<div id="exit-popup">
	<h2>Wait! Before you go...</h2>
	<p>Don't miss out on our exclusive offers!</p>
	<div class="exit-popup-actions">
		<a href="#" class="view-offers">Yes, show me offers</a>
		<button onclick="closePopup()" class="leave-offer">I don't like offers</button>
	</div>
</div>

Step 2: Add JavaScript and CSS to Your WordPress Theme

In this step, we’ll add both the JavaScript and CSS files to your WordPress theme:

1. Open your WordPress theme’s functions.php file. You can do this by going to Appearance > Theme Editor in your WordPress dashboard.
2. Add the following code at the end of the file:

function add_exit_intent_assets() {
    wp_enqueue_script('exit-intent-script', get_template_directory_uri() . '/assets/js/exit-intent.js', array(), '1.0', true);
    wp_enqueue_style('exit-intent-style', get_template_directory_uri() . '/assets/css/exit-intent.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'add_exit_intent_assets');

This function tells WordPress to load both a new JavaScript file named exit-intent.js and a new CSS file named exit-intent.css.

3. Create a new file named exit-intent.js in your theme’s /assets/js/ directory. If the directory doesn’t exist, create it.
4. Add the following JavaScript code to exit-intent.js:

document.addEventListener('DOMContentLoaded', function() {
    let popupShown = false;

    document.addEventListener('mouseleave', function(e) {
        if (e.clientY < 0 && !popupShown) {
            showPopup();
        }
    });

    function showPopup() {
        document.getElementById('exit-popup').style.display = 'block';
        popupShown = true;
    }

    window.closePopup = function() {
        document.getElementById('exit-popup').style.display = 'none';
    }
});

5. Create a new file named exit-intent.css in your theme’s /css/ directory. If the directory doesn’t exist, create it.
6. Add the following CSS code to exit-intent.css:

#exit-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 40px;
    border: 1px solid #ccc;
    z-index: 9999;
    max-width: 400px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

#exit-popup h2 {
    font-size: 30px;
    color: #333;
    margin: 0 0 10px 0;
}

#exit-popup p {
    font-size: 18px;
    color: #666;
    margin: 0 0 15px 0;
}

#exit-popup .exit-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#exit-popup .view-offers {
    background-color: #007bff;
    color: white;
    border: none;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

#exit-popup .view-offers:hover {
    background-color: #0056b3;
}

#exit-popup button.leave-offer {
    background: transparent;
    color: #333;
    padding: 0;
    border: none;
    cursor: pointer;
}

However, this method has significant limitations for businesses focused on maximizing sales and lead generation:

1. Lack of mobile support: This approach will only work on desktop devices, potentially missing out on a huge segment of your audience such as mobile users.
2. Limited targeting options: You can’t easily segment visitors or create personalized offers based on browsing behavior.
3. Basic design capabilities: Creating visually appealing popups that match your brand may require additional CSS and design skills.
4. No A/B testing: Testing different offers or designs to optimize conversion rates is challenging with a basic JavaScript implementation.
5. Limited analytics: Tracking popup performance and conversion rates requires additional coding.

Given these limitations, especially for businesses serious about growth, many e-commerce owners and marketers turn to more robust solutions.

Creating an Exit-Intent Popup with a WordPress Popup Plugin

While the JavaScript method provides a basic solution, using a dedicated WordPress popup plugin offers a more robust and user-friendly approach. This section will walk you through creating an exit-intent popup using FireBox, the best exit-intent WordPress Popup Plugin.

Creating an exit-intent popup with FireBox is easy. You start by selecting a template, customizing your content, setting triggering rules, and enabling your popup. To help you learn how to use FireBox to create exit-intent popups, we’ve prepared a detailed guide covering everything you need to know.

Ready to create your high-converting exit-intent popup?

In this tutorial, you’ll find:

• The science behind exit-intent popups and why they’re so effective
• How exit intent popups compare to immediate popups in terms of user experience and conversion rates
• How mobile exit intent are a valuable asset in engaging any retaining your visitors
• Strategies for addressing common consumer concerns about popups
• Powerful trigger words and phrases to boost your popup’s effectiveness
• A step-by-step walkthrough of creating an exit-intent popup in WordPress using FireBox
• Advanced techniques to go beyond basic exit-intent triggers
• The best tactics to double your conversions with exit intent popups
• Answers to frequently asked questions about exit-intent popups

Read the detailed tutorial: How to Create an Exit Intent Popup in WordPress

Conclusion

Exit-intent popups are a powerful tool for driving more sales and building your email subscriber list on your WordPress site. The FireBox plugin makes it easy to create high-converting exit-intent popups that engage visitors just before they leave your site. FireBox’s easy to use campaign builder, advanced targeting options, and in-depth analytics empower you to design popups that capture the attention of your audience at the perfect moment.

By displaying compelling offers or content, you can convince visitors to convert, whether that means making a purchase, signing up for your email list, or taking another valuable action. Don’t let visitors slip away without giving them one last chance to engage with your business. Implement effective exit-intent popups with FireBox and watch your sales and email list grow.