Learn how to add a cookie to your Webflow website and only show an element only once for a customer
This is a very simple implementation of browser cookies.
The outcome of this guide is to show an element only once, if a customer clicks a button/closes the element.
This will allow you to very easily hide modals, pop-ups etc and to not overwhelm your users with popups and and annoyances.
To add this into your project, follow the simple steps and add the custom code into your project or page settings.
Please copy the first script into the <head> section of your custom-code settings. The second script with variables can be added into our Before </body> tag
Please copy the second script into the <head> section of your custom-code settings. The second script with variables can be added into our Before </body> tag
Using an ID we will communicate with our element and the accept button.
Navigate to parent element of your cookie block. This could be the primary wrapper for your pop-up / notice / modal etc. We need to give the ID 'cookieBlock' to this element. This is the element that we will hide when the user accepts or closes the panel.
Navigate to the accept / close button of your cookie element. Once a user clicks this button / link etc, it will close the cookie and store this. We need to give the ID 'accept' to this element.
Once you publish your site you should be able to test this yourself, and hide elements like banners, popups etc. If you need to clear the cookie, you can add the ID clr to any button or element and when you refresh you should be able to see this hidden element once again.