Streaming live at 10am (PST)

Exit intent popup with cookie

Hi there,
I’m trying to write a simple piece of script to enable the use of an exit intent on a site that would only show up if you haven’t closed it once before.

I’m pretty bad at js / jquery and am therefore having trouble adding two conditions instead of one to a script I wrote… and I don’t understand why :slight_smile:

This version has syntax problems, but I don’t understand which :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api
  // Check cookie
	if (!$.cookie('exit-intent-closed')) {
  	// if no cookie, exit intent active
  	document.addEventListener("mouseleave", function(e){
    if  (e.clientY < 0)
    {
         $('#exit-popup').css("display", "flex");
         $('#exit-popup').fadeIn();
    }
		}, false);
  }
  $('#exit-popup-cross').click(function () {
    	// cookie if exit intent closed
    	var date = new Date();
    	date.setTime(date.getTime() + 48 * 60 * 60 * 1000); 
 	  	$.cookie('exit-intent-closed', true, { expires: date });
      // destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();   
      }, 5000);
});
</script>

This version has a problem with the combination of conditions (&&)

<script>
document.addEventListener("mouseleave", function(e){
    if  (e.clientY < 0) && (!$.cookie('exit-intent-closed'))
    {
         $('#exit-popup').css("display", "flex");
         $('#exit-popup').fadeIn();
    }
    
}, false);

    $('#exit-popup-cross').click(function () {
    	// cookie if exit intent closed
    	var date = new Date();
    	date.setTime(date.getTime() + 48 * 60 * 60 * 1000); 
 	  	$.cookie('exit-intent-closed', true, { expires: date });
      // destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();   
      }, 5000);
    });
</script>

Any ideas ? Thanks a million !

I made this template that seems to do what you’re looking to. It’s a code I found online, I’m not very mush of a coder.

Thanks @vincent, I actually used your tutorial to write my script :slight_smile:
My problem is I need two if conditions :
If cookie not present & if user mouse position has left the top of the site.
The combination of both is where I’m stuck…

1 Like

Ok, so I found a better way of writing the script, and it works as it should. Therefore I’m sharing the result here if it can help someone

First add
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

and then

<script>
$(document).ready(function(){ 
	// check for cookie
  if ($.cookie('exit-intent-closed')) {  
			// destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();
        //console.log('Removed because cookie');
      }, 2500);	
   }
  // if no cookie, check for user leaving 
  else document.addEventListener("mouseleave", function(e){
    if  (e.clientY < 0)
    {
         $('#exit-popup').css("display", "flex");
         $('#exit-popup').fadeIn();
         //console.log('User leaving, show popup');
    }
    
  }, false);
  // handle closing of exit intent
  $('#exit-popup-cross').click(function () {
    	// cookie if exit intent closed
    	var date = new Date();
    	date.setTime(date.getTime() + 48 * 60 * 60 * 1000); 
 	  	$.cookie('exit-intent-closed', true, { expires: date });
      // destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();
        //console.log('Removed because click');
      }, 2500);
   });   
});
</script>

For those who want to use that, you can remove all the comments (the lines starting with // ) and just rename the cookie and change the id of the popup wrapper with the name of your element. If your popup wrapper is in display block or inline or other, just change the .css(“display”,“XXX”) accordingly.

Some weird thing, it works like a charm on Chrome but doesn’t on Safari… and I have no idea why… It doesn’t even write the console logs in the console… :cry:

Seems like a JS / jQuery problem ? Apparently linked to the mouseleave event.

Ok, new solution that seems to work for Chrome, Safari, Firefox etc :smile:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){ 
	// check for cookie
  if ($.cookie('exit-intent-closed')) {  
			// destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();
        console.log('Removed because cookie');
      }, 1500);	
   }
  // if no cookie, check for user leaving 
  else $(document).on('mouseleave', leaveFromTop);
  function leaveFromTop(e){
    if ( e.clientY < 0 )
          $('#exit-popup').css("display", "flex");
          $('#exit-popup').fadeIn();
          console.log('User leaving, show popup');
      };
    
  // handle closing of exit intent
  $('#exit-popup-cross').click(function () {
    	// cookie if exit intent closed
    	var date = new Date();
    	date.setTime(date.getTime() + 48 * 60 * 60 * 1000); 
 	  	$.cookie('exit-intent-closed', true, { expires: date });
      // destroy exit intent
      setTimeout(function(){
        $('#exit-popup').remove();
        console.log('Removed because click');
      }, 1000);
   });   
});
</script>

Apparently for it to work correctly the browsers need the function that checks the position to be clearly called with an .on(‘mouseleave’, function) and not with a eventlistener of mouseleave. Don’t ask why, I have no idea :slight_smile:

Cheerz

2 Likes

Awesome solution! Was just wondering on how to make it work for mobile?

I guess you can’t. Since the idea is to track the mouse/pointer move in order to know that the user intends to leave…

Please share a complete working codes.
Thank you!

Hey @pepperclip . Came across this post as it was exactly what I’m after. I’ve implemented the code and it works… But, the popup shows whichever edge of the browser window the user leaves from, not just the top edge… But, more confusingly, it behaves differently when the user leaves from the top. That is, the popup is correctly set to display flex when leaving from the top, but when leaving from any other edge it is set to display block?

It’s really thrown me. I can understand there could be an error where is displays whichever edge you leave from, but I can’t see how it would have different display settings?? Any help hugely appreciated.

It’s client project so I can’t share a link at the moment, but the code is identical to yours, just changing the IDs