Overview 🍪
Learn how to use browser cookies to hide elements from your visitors when they choose to close or hide them. This guide will help you create elements like pop-ups, modals, advertisements, or banners that appear only once per visitor. By implementing cookies, you can ensure that once a user decides to hide an element, it remains hidden for a specific time frame.
Follow the simple steps in this guide to add the custom code to your project or page settings.
Instructions ✍
1. Add the script into your custom code settings.
Copy the script and paste it into the <head> section of your custom code settings. If you prefer a quicker setup, you can use our Webflow Boosters App to install the script and add a demo cookie to your project instantly.
<!-- 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 cookie attributes to your main wrapper
Firstly add a ▭ div-block to your page that will act as the the main parent wrapper and will container all your components' content.
Add the following attributes to this wrapper:
- Add the attribute Name:
fb-cookieand Value:true. This sets the cookie as active. - Add the attribute Name:
fb-cookie-durationand Value:30. This sets the cookie duration to 30 days.
4. Add attributes to your close / accept button.
Select the button that visitors will use to close or hide the component. Add the following attribute to this element:
- Add the attribute Name:
fb-cookie-hideand Value:true. This informs the script that the button is for hiding the component.
5. Test the Cookie
To test the cookie functionality, open your page in an incognito window. Click the button to set the cookie. The element should then be hidden (display: none) for the duration you specified. After the cookie duration expires, the element will become visible again to the user.
5. Bonus Tip (Prevent Flashing)
After designing your cookie component, it’s a good idea to hide it to prevent any flashing that might occur. Since the script handles all the display states, hiding the cookie component once you're done with the design ensures a smooth user experience.
6. Publish & test your cookie
Once you publish your site you should be able to test this yourself. If you want to check it a few times, just load up a new window in incognito to test it without those saved cookies.
