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