Back to Blog

How to Add Cookies to your Webflow Website

Tutorials
May 3, 2020

Learn how to add a cookie to your Webflow website and only show an element only once for a customer

Overview 📚

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.

{{ Template "gist" "text:Inside <head> tag" "id:accf51df0cafdd931f6d0988c16115f0" }}
{{ Template "gist" "text:Before </body> tag" "id:ba95556998561c947341ea0eca5108c4" }}

Instructions ✍

1. Add the custom scripts into your webflow custom code 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

2. Review the Cookie IDs

Using an ID we will communicate with our element and the accept button.

  • #cookieBlock =The #ID applied to your cookie main element
  • #accept = The #ID applied to your cookie accept / close button
  • #clr = The #ID applied to a button to clear the cookie. (OPTIONAL)
  • '30' = Alters the duration in the script, and represents 30 days.
3. Add the #ID (cookieBlock)

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.

4. Add the #ID (accept)

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.

5. Publish & Test it works.

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.

OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.