Shuib Abdullah
What is a Cookie consent banner?
A cookie is a form of data from a website which is stored within the user's browser. This is how servers know that a user has returned to a particular website. A cookie banner needs to be adequately noticeable & accessible.
The wording needs to be plain and easy to read and the font must be clear. There are a few ways a cookie consent banner can be integrated into a website. These include a top header, incline header, footer, or in a modal. Generally, a cookie consent banner should be customised to fit within your brand guidelines so it won’t look out of place. Also, it’s important to have settings where the user can toggle which type of cookies they allow. There are essential cookies and ‘advertising’ cookies. Essential cookies support the core site functionality such as providing secure log-in. Advertising cookies are there to serve advertising content that is relevant to the user.
We’ll go through some examples later in this post. We’ve collated a few, free Webflow cookie banner cloneable's for you to use in your next project.
Webflow GDPR Compliance Cookie Consent by Flinch 77
https://webflow.com/made-in-webflow/website/free-clone-gdpr-cookie-consent-banner
This cloneable is a GDPR (General Data Protection Regulation) compliant cookie modal you could clone now and use in your project. It features a clear and well-designed modal which is toggled with a small cookie button at the bottom left corner. We like this design as it’s not too intrusive, but still prominent enough for the user to see. Nobody likes a cookie banner that blocks off the entire website.GDPR compliance means adopting the principle of affirmative consent. This would require a toggle for the user to ‘opt-out’ or ‘opt-in‘ when it comes to data collection and processing
What's in this template?
The template has a clean, easy-to-use modal where the user can accept all cookies, save settings and toggle which type of cookies they want. In this example, it includes the essentials, marketing, personalisation and analytics. You can clone this project and include the necessary attributes for your site's personalisation, analytics or marketing scripts.
What is this template for?
- Anyone who needs a professional, GDPR-compliant cookie consent modal with adjustable settings
The bottom line
This is a professional and GDPR-compliant cookie modal suitable for any project. The design is simple so should easily fit into any brand identity and is easy to use as well!
Finsweet Cookie Consent for Webflow
https://finsweet-cookie-consent-cloneable.webflow.io/
The guys at Finsweet put a lot of effort into offering 5 free, GDPR-compliant cookie banners. There are a few options to choose from and all are made with Finsweet client-first classes, following Webflow best practices. All you have to do is copy and paste them into your Webflow project and you’re good to go!It's important to note, these cookie banners do not remove Webflow Ecommerce cookies. This is because Webflow adds scripts inside their HTML that uses cookies, these aren’t replaceable with attributes.
Finsweet offers banners which are displayed from the left side of the screen, right and also modals.
.png)
What's in this template?
All of these banners are made using components, not JavaScript embeds. This means they’re all simple to add to your project, just like adding a regular Webflow element. The components are 100% attribute-based, so you don't need to edit any JavaScript.
For instance, use the “type=’fs-cc’” to the Google Analytics script to identify it as a cookie issuing script. You could also add “fs-cc=’manager’” to a Div or Section element to the parent of the cookie icon. This allows the user to open preferences and toggle which cookie they allow.
A few of their other templates:
What's this template for?
- For Webflow developers who need a few different cookie banner options
- For designers or business owners who just want a quick, copy & paste cookie banner that's GDPR compliant and stress-free.
The bottom line
Finsweet are pros at making professional, easy to use components. So it was a no-brainer to include their cloneables in this round up
Webflow Free Cookie Consent Resource - Flow Ninja
https://showcased.webflow.io/projects/webflow-free-cookie-consent-resource-flow-ninja
This next cloneable is by Nelson, from Pixel Geek, a Webflow content creator. He’s included 5 different designs for cookie consent banners along with the code needed to implement them. These cloneable's are different to the ones previously mentioned as they’re more of design variations, rather than GDPR cookie consents with toggles. They offer a little more creativity and customization than your general cookie consent button.
What's in this template?
In contrast to Finsweet’s components, these templates use JavaScript embeds to remove the banner/modal when the user clicks the ‘x’. There is a different block of code for every cookie example. Simply copy the code and paste it into an embed element.
Pixel Geek has an in-depth tutorial on how to integrate these banners. Check it out here:
What is this template for?
- Webflow developers who are looking for a simple banner that can fit discreetly in their project or client’s project.
The bottom line
Although this template requires editing a bit of JavaScript, the documentation and video cover it well. This is a handy template for those who are accustomed to using embeds or just need a selection of simple cookie banners.
Flowbase cookie guide & cloneable - hide & show your banner
Our next template is another free cloneable you can use. It was made by Flowbase,and it’s a simple cookie which only shows up once for every new user. Cookies are an ideal way to display information once, without annoying your website visitors with constant popups. This template, and its included guide, contain a script which allows users to close the pop-up and still retain that information.
What does this template include
Unlike the other cloneable's in this roundup, this template only includes one banner example, which might be all you need. Flowbase includes the scripts you need in their documentation, which itself is only 5 steps in total.The setup consists of adding two scripts into the <head> of your Webflow project. Then you’ll use an ID tag to communicate with your cookie elements. The primary wrapper element will be responsible for hiding/showing the cookie, this could be a pop-up/notice/modal etc. You could also decide how long to hide the banner, for example, use ‘30’ to represent 30 days.
Here's the full, step-by-step guide:
https://www.flowbase.co/blog/how-to-add-cookies-to-webflow-website
Who is this template for?
- Webflow developers who already have a cookie banner and only need this functionality
The bottom line:
This is a simple template which gives you the necessary functionality to hide your cookie banner for a chosen period of time.
Add memberships to your Webflow project in minutes.
Over 200 free cloneable Webflow components. No sign up needed.
Add memberships to your React project in minutes.
.webp)
.png)
