Streaming live at 10am (PST)

Custom code to show popup based on cookie not working. Please help!

Hi!

I’m trying to implement some javascript on my website that should display the popup the first time someone visits the site and create a cookie so the popup does not appear again for 24 hours.

I’m quite new to Webflow and I obtained the code here: Show a popup based on a cookie — Free clonable template

But I can’t figure out why it’s not working. I’ve been trying to figure it out for days. Any help would be greatly appreciated! Unfortunately, there seem to be no replies on the original thread when others have experienced the same issue.

The code is located in the home page settings and should work for the class ‘popup-overlay’.


Here is my site Read-Only: https://preview.webflow.com/preview/bon-and-berg?utm_medium=preview_link&utm_source=designer&utm_content=bon-and-berg&preview=a9e9cdbaeb0796d7f8c9b1ea2d3d518b&mode=preview

And here is the link to the published site: https://www.bonandberg.com/

Hi @ Siobhán

Remove the underscore character at the beginning of your cookie script.

Script should be:

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

<script>
$(document).ready(function(){
  if (!$.cookie('alert')) {  
    $('.popup-overlay').show();    
    var date = new Date();      
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000);  
    $.cookie('alert', true, { expires: date });
   }
});
</script>

@vincent Thank you!!! Works perfectly now :blush:

No idea how the underscore ended up there!

Also, thank you so much for sharing this code. Super useful.

The underscore was in the code you copied and pasted from my demo page… the code shown on the page as an example. I really don’t know why I had an underscore there. If you had cloned the project and copied the code from the page settings, it would have worked because the code was correct there.

My fault, sorry, and probably the reason why others have trouble replicating this demo sometimes…

¯\_(ツ)_/¯

Aha! I haven’t quite figured out how to clone a project yet. I’m only at the cut and paste level :laughing: Super happy it’s working now though. Thanks again.

Oh, cloning and inspecting, sharing projects, is an essential part of learning Webflow. It’s easy. Go back to the post where i shared the template, there are two links. The second link is a link to the project page. From the project page, you can either directly open a read only version of it, or click on clone, which will place a copy of the project in your Webflow dashboard.

Both will allow you to open pages settings and copy the code that’s actually used by the page.

Oh wow. That’s quite simple. Thanks for the info. That will be so useful in the future!