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 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.

<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.