Return to articles
How to add cookies to your Webflow website
Tutorials

How to add cookies to your Webflow website

Learn how to add a cookie to your webflow website and only show items once for a selected amount of days.

Flowbase
May 3, 2020

Today we would like to share with you a super simple guide for adding cookies to your webflow websites. This will allow you to very easily hide modals, pop-ups etc and for them to NOT show again. (for a selected amount of days)

Using cookies for your pop-ups & notices can be a super powerful way to display information once, without constant bombardment to your visitors.

Add Cookie Script

Firstly, copy the following script into the <head> section</head> of your custom-code settings.

Please Note: The custom-code section can be found in your page settings or project settings. If your cookie applies sitewide be sure to include this in the project settings.
<script src="https://flowbase.s3-ap-southeast-2.amazonaws.com/cookie/cookie.js"></script>

Add Cookie Variables

Copy these attributes into the after <body> section of your custom-code settings. </body>

<script>
// default time is 182 days
flowBaseCookie('#cookieBlock', '#accept', '#clr', 30);
</script>


It should look like this🎉


Add the #ID (cookieBlock)

Navigate to the primary layer of your cookie element. This could be the primary wrapper for your pop-up / notice / modal etc. We need to give the ID 'cookieBlock' to this element.

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.

The Cookie Variables

  • #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' = Altered direction in the script, and represents 30 days.
ABOUT THE AUTHOR
Flowbase

Flowbase is the leading company for Webflow resources. We provide customers a collection of premium and free resources that help them build better products with Webflow.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.