Streaming live at 10am (PST)

Exit intent popup with cookie


#1

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 !


#2

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.


#3

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…


#4

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.


#5

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.


#6

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