Exit Intent Popup JavaScript for Webflow - A simple tutorial

Did you ever inquire or purchase the item after seeing the popup on website?

It is called exit intent popup.

It would be best if you considered this marketing tactic to improve your website conversions as a website owner or business owner.

Today, I will show you the exit intent popup javascript tutorial. In this 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.

Let's learn step by step how to do webflow development and website platform development for exit intent popup.

Create Popup in your project

You can create a simple popup design in Webflow similar to 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 popup in your platform or use 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 popup, you will also need some CSS.

Design your popup

You can design your popup in Webflow using CSS settings of each elements. Use your design sense to make your exit popup look prominent for your audience.

For those, who are not using Webflow, you can use below CSS to design it. I am providing basic CSS to make it look like 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 elements on the page.

Write JavaScript to make Exit popup work

Now let's add a JavaScript and determine how to show the popup.

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

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

If you are using it on other platform, you can add this JavaScript in Footer section of your website. And please make sure that 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>

So, that's it.
You have your exit intent popup ready using Javascript.

Final Words

Now you know how to create step by step exit intent popup. 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 popup.

  • Keep a meaning message so your user 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.

I hope you learned something today.

Happy coding!

Viken Patel

Viken Patel

Viken Patel has 14+ years of experience working with websites. He is passionate about building website that converts. His marketing background helps him build the sales driven websites.

The SaaS Website Conversions Playbook: Tips and Tactics for Success

The SaaS Website Conversions Playbook: Tips and Tactics for Success

In today's highly competitive Software as a Service (SaaS) market, understanding and optimizing conversion rates has become paramount for survival and growth. The conversion rate is not just about gaining new customers; it's about transforming one-time users into loyal patrons of your SaaS product.

8 Timeless Website Marketing Strategies to Get More Customers

8 Timeless Website Marketing Strategies to Get More Customers

Ask any marketer, and they would say that your website is the perfect platform for online marketing. The Internet is an infinite universe of its own, and your website is the best tool to represent your business

Webflow vs Framer: Deciding the Best Tool for Web Designers

Webflow vs Framer: Deciding the Best Tool for Web Designers

Choosing the right design tool can make a world of difference to your web design and development journey.

Hire a Webflow Expert for your webflow website

Quick Turnaround. No Contracts. Cancel Anytime. Book a 30 minutes consulting call with our expert.
Book a Call