Exit Intent Popup in Webflow: JavaScript Tutorial (2026)

Build an exit-intent popup in Webflow by combining a Webflow interaction (set to hidden by default) with a JavaScript event listener that triggers when the user's mouse moves toward the browser tab close button (mouseleave on document.documentElement). Add Cookie or sessionStorage logic to prevent the popup from showing on every page load.

Mobile browsers don't fire mouseleave the same way use a scroll-up trigger or time-on-page fallback instead. Properly implemented exit-intent popups lift email capture by 5-15% and recover 2-5% of abandoning visitors

This guide will walk you through the process of creating an effective exit-intent popup in Webflow, helping you boost conversions and enhance user engagement.

In this exit intent popup tutorial, you can simply copy and paste the JavaScript code into your Webflow website. This JavaScript can be used in any website, be it WordPress, Wix, or any other static or dynamic website.

Create a pop-up in your project

You can create a simple pop-up design in Webflow similar to the one below. I won't go into too much detail as I am assuming you already know how to create it in Webflow.

For those who are not using Webflow, you can create a pop-up in your platform or use the HTML code below to create one.

<div class="exit-popup-modal">
<div class="exit-popup-wrapper">
<h2 class="heading">Heading</h2><a href="#" class="exit-popup-close">X</a>
<p class="paragraph ep-paragraph">Subheading</p>
<a href="#" class="exit-popup-btn">Book a Call</a>
</div>
</div>

All exit popup content will go inside the .exit-popup-modal container. It will have a black transparent overlay.
The .exit-popup-wrapper will have the actual content.

To make it work as a pop-up, you will also need some CSS.

Design your Exit Intent Popup for Webflow

You can design your pop-up in Webflow using the CSS settings of each element. Use your design sense to make your exit pop-up look prominent for your audience. Let's explore the intricacies of Webflow modal popups and learn how to customize them to align with your brand.

For those who are not using Webflow, you can use the below CSS to design it. I am providing basic CSS to make it look like a popup; you can use images or different colors to make it look good.

<style>
.exit-popup-modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    border-radius: 0;
    background-color: rgba(0,0,0,.7);
    text-align: left;
 }
 .exit-popup-wrapper {
    position: relative;
    top: 10%;
    bottom: 10%;
    display: block;
    width: 100%;
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    padding: 40px;
    background-color: #f6f9ff;
}
</style>

As you can see, I've added a z-index to make sure it appears on top of every other element on the page.

Write JavaScript to make the Exit pop-up work

Now, let's add the JavaScript to determine how to show the exit intent pop-up JavaScript.

We want to detect if the user moves their mouse cursor out of the window. And then we have to use a cookie to determine that the pop-up won't show all the time mouse cursor moves out of the window.

I have already written the entire exit intent JavaScript for you. You can simply copy and paste the JavaScript to your Webflow inside the Custom Code section of Project Settings.

If you are using it on another platform, you can add this JavaScript in the footer section of your website. Please make sure that the jQuery library is added to the site.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script>
/*cookie function - Set and read cookie */
  function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

/* Detecting mouse out event */
  document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("mouseout", (event) => {
    if (!event.toElement && !event.relatedTarget) {
      setTimeout(() => {
        var ifcookie = readCookie("exitpopup");
    	if(ifcookie !="hide"){
      		$('.exit-popup-modal').fadeIn();
    	}
      }, 100);
    }
  });
});
/* Closing the popup and setting up cookie so it won't show it again.*/
$('.exit-popup-close').on('click', function(){
  createCookie("exitpopup","hide","7"); //You can set any number of days here.
   $('.exit-popup-modal').fadeOut();
});
</script>

Why Use an Exit-Intent Popup?

Exit-intent popups are an effective marketing tool that helps businesses retain visitors and convert them before they leave. Here’s why they work:

• Reduce Bounce Rates: By offering a discount, freebie, or valuable content, you can convince users to stay.
• Increase Conversions: Strategic exit popups can turn abandoning visitors into subscribers or customers.
• Recover Lost Sales: E-commerce stores can use exit popups to remind users about their cart or offer a last-minute discount.
• Grow Email Lists: Many businesses use exit popups to collect emails for future marketing campaigns.

Example: Imagine a user browsing your Webflow store, hesitating to buy. Just as they move to exit, a pop-up offers 10% off their first purchase—this small nudge can lead to conversion!

Best Practices for Designing an Exit-Intent Popup

Not all exit popups are effective. Follow these best practices to create a high-converting pop-up:

1. Make the Offer Irresistible

• Offer something valuable: discounts, free guides, exclusive deals, or free trials.
• Use a clear call-to-action (e.g., “Get 10% Off Now” instead of “Submit”).

2. Keep It Simple & Non-Intrusive

• Avoid long forms—ask for just an email or phone number.
• Use minimal text with a strong headline & CTA button.

3. Match the Popup Design with Your Brand

• Use your brand colors and fonts to make the popup feel natural instead of intrusive.

4. Create a Sense of Urgency

• Use words like “Limited Time Offer”, “Only for the Next 5 Minutes”, or “Expires Soon”.

5. Mobile-Friendly Optimization

• Ensure the pop-up looks good on mobile devices and doesn’t block important content.

Final Words

Congrats! You've successfully implemented an effective exit-intent popup in Webflow using JavaScript. Now you know how to create a step-by-step exit intent pop-up. There are a few things you must remember to make it more effective for your users.

Here's a simple checklist to get the most out of your exit intent popups.

• Keep a meaningful message so your users will stay interested.
• Create urgency if possible.
• Give something for free and grab an email ID.
• Focus on user experience and catchy design to make them stay.

By following this comprehensive guide, you've successfully implemented an effective exit-intent pop-up in Webflow using JavaScript. This strategic addition is poised to reduce bounce rates and enhance user engagement on your website. Remember to monitor the performance of your pop-up and make adjustments as needed to optimize its effectiveness.

Webflow Resources

1. How to add slider in Webflow?‍
2. How to create pop-up in Webflow?‍
3. How to clone a Webflow website?‍
4. How to connect Webflow to a domain?‍
5. How to add GTM in Webflow?
6. How to Add Lottie Animations in Webflow?
7. How to Add Schema Markup in Webflow?
8. How to add custom code in Webflow?
9. How to Export Code from Webflow?
10. How to add GA4 to Webflow?

FAQs

1) What is an exit intent popup, and how does it engage website visitors?

An exit intent popup is a strategic element that appears when a user is about to leave a website. It captures attention and can present offers, encouraging visitors to stay longer or take specific actions.

2) What is the best way to design an exit-intent popup?

Use minimal text, a strong call-to-action, and an irresistible offer. Keep it mobile-friendly and match your brand’s design.

3) Why is an exit intent popup beneficial for website conversion, and what are its primary advantages?

Exit intent popups can significantly reduce bounce rates by re-engaging visitors before they leave. They offer an opportunity to present special offers, collect email addresses, or provide relevant information, ultimately boosting conversions.

4) Do exit popups affect SEO?

No, as long as they don’t block content immediately. Google penalizes intrusive interstitials, but exit popups are not affected since they trigger on exit.

5) How can I implement exit intent popups on my Webflow site using JavaScript, and is it a complex process?

Implementing exit intent popups on a Webflow site involves adding custom JavaScript code. While it may seem technical, the process is explained in the blog post and can be achieved with step-by-step instructions.

6) Can I track how well my exit popup is performing?

Yes! You can track conversion rates using Google Analytics, Webflow Analytics, or tools like Hotjar to see how users interact with your popup.

7) Can I create exit popups in Webflow without JavaScript?

Yes, but you’ll need third-party tools like OptinMonster or ConvertFlow. Using JavaScript gives you more control and flexibility.

8) Why doesn't my exit-intent popup work on mobile?

Mobile browsers don't fire the `mouseleave` event because there's no mouse cursor. Instead, use a `scrollup` trigger (popup shows when user scrolls up after scrolling down 50%) or a time-based trigger (popup shows after 30+ seconds with no interaction). Both feel more natural on mobile than trying to detect "exit intent.

9) How can I customize the appearance of the exit-intent popup?

Use Webflow Designer for styling, add custom CSS for design tweaks, and apply Webflow interactions for animations. JavaScript can further enhance customization.

10) Is it possible to trigger different pop-ups based on specific user behaviors?

Yes, by detecting page URLs, tracking mouse movements, using cookies, or segmenting users based on referral sources and activity.