Guide / Article

How to add cookies to your Webflow website

Flowbase
October 30, 2020
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 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.

Add Cookie Variables

Copy these attributes into the after section of your custom-code settings.

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

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.

Flowbase
October 30, 2020

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.