Hi everyone,
I made this simple Webflow site that you can clone, with which you can learn how to use Jquery to set a cookie and use it to show, or not, a div popup.
Visit the site here:
You can clone the site from its Webflow page:
22 Likes
When you read a lot of information and still can’t do something, and then in comes @vincent and shows us how to do it…
10 Likes
Hey @vincent,
Couple questions:
- Does this script actually drop the ‘alert’ cookie too?
- is this possible to set the time frame to 1 year or forever?
That is a very helpful script that should help display the EU cookie law mesage!
Cheers
1 Like
Sweet stuff @vincent!
1 Like
Yes, the script goes this way:
- check if ‘alert’ cookie exist.
— if cookie exist do nothing
— if cookie doesn’t exist then
------ show popup
------ create the cookie ‘alert’ wth a validity of 24hr
Edit the code to change the validity time for example, or name of the cookie
2 Likes
@vincent I have cloned the project and dug around but I can’t see any of the JQuery code?
I’m I being stupid and looking in the wrong places?
If you could tell me where its located I would be grateful.
If I used this code in a persistent site-wide footer that I wanted to hide on a button click would it work? Or would I have to take the objects out of the site-wide footer?
1 Like
@vincent I have found the code apologies for the question I am going to try and answer my own last question but if you are happy to let me know your thoughts then please do.
1 Like
Like the “we’re using cookies” popup info we see everywhere in europe?
yes it would work as expected, site wide. the visitor would get the popup the first time he visits any of the pages, and wouldn’t get it when visiting any other page.
let me know how it went.
I realize it’s not so obvious and I’ll update the template to make sure to disclose where the custom code is placed. It’s not a stupid question, custom code in Webflow can be in 3 distinctive places: site’s settings, page’s settings or canvas.
@vincent thanks for the speedy reply. In practice yes I am looking for a similar solution to the cookie consent but this is for a financial risk warning.
I don’t know Javascript or jQuery - What I can’t figure out is which piece of code is setting the cookie on the button press?
On our site we must have a risk warning. Once someone clicks “I accept” I am trying to set a cookie and then not display the risk warning to them again as they proceed through the site and on subsequent visits.
I think I understand most of your code but I can’t see where the cookie being set part is? For our implementation that is the key part.
Shareable link to a copy of the site:
https://preview.webflow.com/preview/uown-v2-9facd2ad11541ca8af92fc27067c63c?preview=e1e5573f62fc306f9e17ffdf73991750
Viewable Link:
http://uown-v2-9facd2ad11541ca8af92fc27067c63c.webflow.io/
The matter is complicated by the fact that we have two risk warnings - One for desktop and one for mobile!
That’s normal because there is no such thing. The cookie is set if it doesn’t exist yet, automatically. It’s not bound to the button.
The description on the page of my demo should be more clear, like this:
When this page loads, a script checks if a valid cookie named “alert” already exists.
- if there is a valid cookie, the script does nothing
- If there is no such cookie, the script then:
– adds a cookie named “alert” automatically
– shows a hidden element (the popup) with the class .popup-overlay by giving it the CSS property display:block.
1 Like
I see! That makes sense. I will end it there as I don’t want to hijack the thread and I will speak to our developers about how we can implement the solution we need. i do appreciate you taking the time to answer my questions thought.
But do you propose an alternative, like “I don’t accept” ? And what does this alternative do? if the alternative means not getting access to the site, then my script works anyway. Clicking I accept shows the site, clicking otherwise direct you elsewhere.
No, we have a full risk warning in the footer of our site and articles discussing all of the risks - After stating it on an overlay footer we just allow them to accept to get rid of it on their screen.
If we had our full risk warning on a mobile screen you wouldn’t see the actual page! 
I have the feeling I’m seeing this once a week if not more! I regularly see such a messege taking up more than the screen, battling up with another message and an ad…
1 Like
It’s a nightmare - IM ALL FOR WARNING PEOPLE OF RISKS BUT IF OUR PLATFORM WAS AN APP I WOULDN’T HAVE TO DO HALF OF THIS!
Hi @vincent great work on this and thanks a bunch for providing the clone.
I seem to be having issues getting the element to show.
The script seems to be running fine and my class (.float-card) is applied the same in the script and the CSS. I have the script running in the /body section of the project settings to effect all pages, but I’ve also put it in the single page to make sure that wasn’t the issue. I’ve checked it in incognito as well just to make sure I’m not crazy…
When you have a sec, can you take a look? Thanks so much.
Here’s my preview link:
https://preview.webflow.com/preview/alistofawards?preview=2b963a5168d5af62a7490134afd31a05
PS.
Possibly related, while trying to use your cookie method I also saw the forum post about https://cookieconsent.insites.com/ and tried to implement that but that is not showing either. May not be related, but want to give you a heads-up.
Thank you for developing this cookie popup and sharing it! You are a lifesaver!
Do you know if there is a way to implement this with the new GDPR? For example, letting the user accept or revoke the use of cookies in the popup.