Setup EU cookie bar on Webflow

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

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.

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.

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).

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

Publish & chill 😎

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

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! 🚀