Webflow Booster

Cookies Booster

Control the display of elements like pop-ups or announcements using cookies. Hide elements for a specific period of time when a user clicks.

Add this in seconds with the Boosters app, or install it manually with the instructions below.

Getting Started 🫧

Control the display of elements like pop-ups or announcements using the Cookies Webflow Booster. Using browser cookies we can control the display state of an element for a specific period of time. That way, when your user clicks close on a popup, we can decide how long it should be until they see that again. Follow the simple instructions below, or install the official Boosters App for the most simple install and setup possible.

Install Instructions ✍️

1. Add the booster script to your project.

Copy the script source listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-cookie@1.0/dist/cookie.min.js"></script>
2. Add the attributes to your element

For this Booster, attributes must be added to two different elements. The main cookie itself with the attribute (fb-cookie), and the button used to set the cookie and display state (fb-cookie-hide). Review the details and the attributes table below. If you aren't sure how to add attributes in Webflow, you can learn more.

3. Add the attributes to the main wrapper

Add the following attributes to the main element that wraps your cookie content. This is what we will show or hide depending on the cookie status. Generally, we recommend just adding a plain div-block to wrap your content then applying the attributes as outlined.

4. Add the attributes to the close button

Add the following attributes to the button or element which will close and hide your cookie. Once the user clicks this button, we will store a cookie and hide it from their view until the duration has expired.

5. Set the Cookie wrapper to display hidden (bonus tip)

Once you have finished customisation of the cookie element, set the main wrapper to hidden. This will prevent any flashing when the page loads.

6. Here is the full list of attributes you will use:
Attribute Name Attribute Value Description
fb-cookie true or false The primary attribute, and an on/off toggle
fb-cookie-duration eg. 30 Specify the number of days the cookie should last in the browser
fb-cookie-hide true or false When clicked, hiden the element and save the cookies

7. Publish & Test 🚀

Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the Booster in action.

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application
*Official Webflow booster application