Guide / Article

How to add cookies to your Webflow website

March 3, 2021
How to add cookies to your Webflow website

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=""></script>

Add Cookie Variables

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

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

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.

March 3, 2021

Recieve webflow resources directly to your mailbox.

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


Boost your webflow site further.