DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Setup EU cookie bar on Webflow
Titouan B
Titouan B

Posted on

Setup EU cookie bar on Webflow

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

⚠️ 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! πŸš€

Top comments (1)

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

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.