Custom Exit Popup with cookies

Design help Animations & Interactions
1

Hey

I have a popup that activates when your cursor is off the canvas (exit popup).

Here’s the link

The problem is that the javascript code suppose to save the cookies so it won’t show up again, but it doesn’t work until you actually refresh the page.

How to make it pop up just once and then don’t bother again?

Here’s the javascript of the popup

<!-- this is cookie for the exit popup -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {

  // Load cookie library
  $.getScript('https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js', function() {

    // If cookie found (already shown)
    if(Cookies.get('notice3') !== undefined) {

      // Hide cookie notice (change jQuery selector to match your own)
      $('.popup').remove();
    }

    // On button click
    $('.popup').click(function() {
      // Calculate when you want to display the notice again (change 15 to number of minutes you want)
      var expireTime = new Date(new Date().getTime() + 60000 * 60 * 24 * 365);
      // Set this cookie
      Cookies.set('notice3', 'shown', { expires: expireTime });
    });
  });

});
</script>
<!-- end exit popup cookie -->

Here is my public share link: LINK
(how to access public share link)

2

Can you share a read-only to your website and also the live link to the page? Just by looking at the code I would suggest removing the popup when the user clicks the link:

<!-- this is cookie for the exit popup -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {

  // Load cookie library
  $.getScript('https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js', function() {

    // If cookie found (already shown)
    if(Cookies.get('notice3') !== undefined) {

      // Hide cookie notice (change jQuery selector to match your own)
      $('.popup').remove();
    }

    // On button click
    $('.popup').click(function() {
      // Calculate when you want to display the notice again (change 15 to number of minutes you want)
      var expireTime = new Date(new Date().getTime() + 60000 * 60 * 24 * 365);
      // Set this cookie
      Cookies.set('notice3', 'shown', { expires: expireTime });
      $('.popup').remove();
    });
  });

});
</script>
3

Here’s the read-ony link:
https://preview.webflow.com/preview/ebaq?utm_medium=preview_link&utm_source=designer&utm_content=ebaq&preview=8dff0d94ae26eb871be9bb894f741bb0&pageId=5e6e76532a9bce3733bc9eb5&itemId=5e6e76532a9bceca4fbc9f48&mode=preview

and here’s the live link to the page:

4

Hey did you end up figuring this out? I’m trying to figure this out on one of my sites currently.

1 Like
5

Hey Arek!
How did you figure it out. Trying to make a similar popup for a project.
Could you please share the final code and the one you’re using for mouse exit function?