DEV Community

loading...
Cover image for Setup EU cookie bar on Webflow

Setup EU cookie bar on Webflow

nightbr profile image Titouan B ・2 min read

Hey, we will see how you can easily setup a free EU cookie bar 🍪 on your Webflow website.

cookiebar

If you don't know Webflow, It's a modern website visual builder. I mainly use it to build the marketing website for SaaS product.

Cookieconsent

We will use the awesome OpenSource project Cookieconsent by OSANO.

The easy visual way to get the cookie bar is to use the Wizard.

Go to https://www.osano.com/cookieconsent/download/ and click on Start coding on the Open Source Edition column.

wizard

You will be able to tweak the widget as you wish ✨

It will generate the code we will copy to our Webflow config (on the right).

Webflow configuration

Go to your Webflow Dashboard and open your website settings.

settings

Go to the Custom Code tab. We will copy the Head Code from the Cookieconsent Wizard into the Head Code block in Webflow & the other part into Footer Code block. Don't forget to Save changes (with the buttons).

custom code

Here is my code for example:

Head Code

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />

Footer Code

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.addEventListener("load", function () {
    window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#00947C"
            },
            "button": {
                "background": "#fff",
                "text": "#00947C"
            }
        },
        "theme": "classic",
        "position": "bottom-left",
        "content": {
            "message": "Nous utilisons des cookies pour améliorer votre expérience de navigation.",
            "dismiss": "J'ai compris",
            "deny": "Refuser",
            "link": "En savoir plus"
        }
    })
});
</script>

⚠️ Note: You need a paid site plan to be able to add custom code to your site

warning

Publish & chill 😎

Just hit your site's Publish button and you should have your EU Cookie bar on Webflow 🎉

cookiebar

That's all folks, it's pretty easy and basic but cover the current EU needs to inform about cookie you're using on your website.

For advanced usage, you can see all options available in the JavaScript API for Cookie consent documentation.

Thanks for reading and feel free to ask anything in comment! 🚀

Discussion (1)

pic
Editor guide
Collapse
mirelaprifti profile image
Mirela Prifti

Osano is so great and simple! It also allows you to adapt the cookie banner to the design style of your site