Streaming live at 10am (PST)

Building an Exit Pop Up and setting a cookie using using Custom Code (Jquery)

Hello,

I am trying to create a pop up for a blog.

This is the custom code that I use (following this tutorial):

<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>

Here is my site Read-Only: LINK

Unfortunately, the pop up does not show up.

Looking forward to any help :slight_smile:

Best,
Matthias

If you put this code in an html embed in the page, you need to call jquery as well before calling the rest of the script. I guess this is probably why it’s not working.
Other thing you could do, which is more relevant “in terms of webflow” is to remove the code from the html embed and put it in your page settings, before custom code. This way jquery is already called by webflow when the script is called.

Hi Dorian, great to hear from you. This definitely makes sense.

I moved the custom code field to page settings. The popup shows up now, but not when it is supposed to. It is being displayed immediately after the page has been loaded.

Do you have an idea what is causing this?

Highly appreciate your help!

Mathias

Could you share your site’s preview url ? (webflow.io url)

Sure: https://matthias-cordes.webflow.io/post/why-we-love-webflow-and-you-should-too :relaxed:

TBH, I’m not sure what is happening :slight_smile:
I haven’t used this script in a while.

Reading it again :
— I’m not sure the timeouts are useful
— It seems in your case the mouseleave event Y < 0 doesn’t trigger properly (meaning it doesn’t trigger when the pointer goes to the address bar, but in any direction outside of the doc)
— I don’t see why your popup displays before the script being triggered. By looking the source code it seems your exit popup has a display block style initially. Or maybe it’s just the jquery fadeIn() doing this.

I think this exit popup script would need a proper re-write. sorry :confused:

Hi Dorian,
thank you for your thoughts on this. Do you happen to know anyone that might be able to help me out improving the code?
Matthias