Setup EU cookie bar on Webflow
Tags: webflow, nocode, cookie, eu
Published: 2020-09-16 08:51:39

Hey, we will see how **you can easily setup a free EU cookie bar** 🍪 on your [Webflow](https://webflow.com/) website.

![cookiebar](https://dev-to-uploads.s3.amazonaws.com/i/zytb45rqz2zki86p86k9.png)

> 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](https://github.com/osano/cookieconsent) by [OSANO](https://www.osano.com/cookieconsent).

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

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

![wizard](https://dev-to-uploads.s3.amazonaws.com/i/m2q7h0nsifngbo6gjzkq.png)

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](https://webflow.com/dashboard)  and open your website settings.

![settings](https://dev-to-uploads.s3.amazonaws.com/i/j8m5stc18ei0wd5sy1o3.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/evh4fn7rvxmscj2yb2qa.png)

Here is my code for example:

### Head Code

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

### Footer Code

```html
<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](https://dev-to-uploads.s3.amazonaws.com/i/zct04xfs5o8gjcejwvx6.png)

## Publish & chill 😎

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


![cookiebar](https://dev-to-uploads.s3.amazonaws.com/i/zytb45rqz2zki86p86k9.png)

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.](https://www.osano.com/cookieconsent/documentation/javascript-api/)

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