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:
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.
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
