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

Design help Custom code
1

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/

2

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

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

4

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…

¯\_(ツ)_/¯

5

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.

6

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.

image
image1305×817 233 KB

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

7

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

8

Hi @vincent I’m new on Webflow. I was looking for a solution with the PopUp I create, which is to not showing it after it is clicked. I tried to use your code but it didn’t work. Was it created specific for your popup or can it be used also in others popup, like mine? I used the same element name (popup-overlay), regarding the cookie alert, Do I need to have it somewhere on the element as well or just in the code? I already cloned your example, but I can’t find anything which gives me a clue. Any other tip?

9

SA5 has some nocode attributes you can use to easily suppress a pop-up for N days

10

Hi, I’m trying to use the popup but I can’t get it to work correctly. I have cloned the template, copied the popup and the script but the “Close this popup” button does not work. I do not understand why. Thank you so much!
https://preview.webflow.com/preview/ics-2024?utm_medium=preview_link&utm_source=designer&utm_content=ics-2024&preview=9820bc49d0ca1d5f7fe3d95ecdbaa188&pageId=664c4e6d0a8226545b3ca2d1&workflow=preview

And the test page is: Test poppup