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 provided below and paste it into the <head> tag of your custom code settings. If you need assistance with adding custom code in Webflow, click here for more information.
<!-- Flowbase Booster [Cookies] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-cookie@1.0.1/dist/cookie.min.js" type="text/javascript"></script>3. Add the attributes to the main wrapper
Locate the main element that contains your cookie content. This element will be shown or hidden based on the cookie status. We recommend using a simple ▭ div-block to wrap your content.
With the element selected, assign the following attributes:
fb-cookie Value: truefb-cookie-duration Value: 30
The fb-cookie-duration attribute sets the number of days the cookie will be stored. After this period, the element will become visible to the user again.
4. Add the attributes to the close button
To ensure that the cookie content is hidden when the user clicks the close button, add the following attribute to the button or element that will close and hide the cookie element:
Name: fb-cookie-hide Value: true
This attribute ensures that clicking the button will store a cookie and hide the element until the cookie duration expires.
5. Set the Cookie wrapper to display hidden (bonus tip)
To prevent the cookie element from flashing or being visible briefly when the page loads, set the main wrapper to be hidden initially. This ensures a smoother user experience. You can do this by applying a display: none; or visibility: hidden; style to the wrapper until the cookie status is determined.
6. Here is the full list of attributes you will use:
7. Publish & Test 🚀
After completing the setup and adding both the script and attributes, publish your page. Visit your live staging domain to test the Booster and ensure everything is working as expected.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
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
