Cookies bar and web implementation

Introduction

In recent years, cookie bars have become a standard feature of websites around the world. Not only do they inform users about the use of cookies on the site, but they also ensure compliance with data protection legislation.

In this article, we'll look at what cookies actually are, who needs to have a cookie bar and why, what categories of cookies exist, and how you can implement a cookie bar using open source solution.

What are cookies 🍪

Cookies are small text files that websites store in your browser when you visit them. These files contain information that can then be used for a variety of purposes, such as tracking user activity, storing preferences or authenticating the user. Cookies can be temporary (session cookies), which are deleted when you close your browser, or persistent (persistent cookies), which remain stored for a longer period of time.

Web extension

To read cookies in the browser, I recommend the Cookie editor browser add-on.

Who needs to have a cookie bar on the web and why

The European Union, through the ePrivacy Directive and the General Data Protection Regulation (GDPR), has set strict requirements for the use of cookies. These regulations require websites to inform users about the use of cookies and obtain their consent before cookies are stored on their device. This measure applies to all websites that target users in the EU, regardless of where the website itself is located.

A cookie bar is therefore necessary to comply with this legislation. Not only does it protect users' privacy, but it also ensures that websites are compliant with the legislation, avoiding potential fines.

Do I need to have a cookie bar even if I am not tracking the user?

No, and I will use a quote from the Data Protection Authority website to answer:

If you only use technical cookies, you may not have a cookie bar. However, if personal data is processed in the context of technical cookies, the information obligation must be fulfilled in another appropriate way, accessible on the website where such processing takes place.

-- Website of the Data Protection Authority (CZ)

What are the cookie categories

Cookies can be divided into several categories, each of which serves a different purpose:

The most common mistakes when implementing cookies

Easy to implement cookie bar on the web

I've prepared two open-source solutions that will make working with the cookie bar much easier. Both tools are free, easily configurable, and compliant with GDPR (if you properly contextualize and link them to your cookies policy).

📦 Solution #1 - OrestBida/cookieconsent

A proven, functional and visually great cookie bar that also meets legal requirements. Before you start implementing it, you can see a sample from the author.

Link to sample

Where you can try to easily modify and customize it, at the same time you can generate a configuration json on this page which you can use later during installation.

Step 1 Embed CSS and Javascript into the site.

<script type="module" src="cookieconsent-config.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css">

Step 2 Mark javascript blocks on the page with categories and switch their type to text/plain

<script
    type="text/plain"
    data-category="analytics"
    data-service="Google Analytics"
>
<!-- Google analytics code -->
<!-- ... -->
</script>

Step 3 Download and insert cookieconsent-config.js from playground and edit the text

Step 4 Paste the change cookie settings link into the footer

<button type="button" data-cc="show-preferencesModal">View Preferences Modal</button>

📦 Solution #2 - Osano/cookieconsent

1. First, embed the CookieConsent library into your site. You can find it on GitHubu or use the CDN.

<script src="
https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css
" rel="stylesheet">

2. Customize the look and feel

window.addEventListener("load", function() {
  window.cookieconsent.initialise({
    palette: {
      popup: { background: "#000" },
      button: { background: "#f1d600" }
    },
    theme: "classic",
    content: {
      message: "This website uses cookies to ensure you get the best experience.",
      dismiss: "I understand!",
      link: "Find out more",
      href: "/privacy-policy"
    }
  });
});

window.addEventListener("load", function() {
  window.cookieconsent.initialise({
    palette: {
      popup: {
        background: "#edeff5",
        text: "#838391"
      },
      button: {
        background: "#4b81e8"
      }
    },
    theme: "edgeless",
    type: "opt-in",
    content: {
      message: 'This website uses cookies to give you the best experience',
      allow: "Allow cookies",
      deny: "Disable",
      link: "Learn more",
      href: "/privacy-policy"
    },
    onInitialise: function (status) {
      var type = this.options.type;
      var didConsent = this.hasConsented();
      if (type == 'opt-in' && didConsent) {
        // enable cookies
      }
      if (type == 'opt-out' && !didConsent) {
        // disable cookies
      }
    },
    onStatusChange: function(status, chosenBefore) {
      var type = this.options.type;
      var didConsent = this.hasConsented();
      if (type == 'opt-in' && didConsent) {
        // enable cookies
      }
      if (type == 'opt-out' && !didConsent) {
        // disable cookies
      }
    },
    onRevokeChoice: function() {
      var type = this.options.type;
      if (type == 'opt-in') {
        // disable cookies
      }
      if (type == 'opt-out') {
        // enable cookies
      }
    }
  });
});

Checklist for cookie bar implementation

I've put together a simple checklist to help you ensure that your cookie bar complies with legal requirements:

Checklist

• ⏹️ User consent is obtained before non-technical cookies are stored.
• ⏹️ The cookie bar allows easy access to the cookie policy or privacy policy.
• ⏹️ The "Accept All " and "Reject All " buttons are equally easily accessible.
• ⏹️ Users have the possibility to set their cookie preferences in detail (e.g. by category).
• ⏹️ The cookie bar does not interfere with site navigation, but is also easily visible.
• ⏹️ An icon or link for changing the cookie settings is always accessible (e.g. in the footer of the website).
• ⏹️ The cookie bar is fully functional on mobile devices and different browsers.
• ⏹️ Categories of cookies are rightly marked and separated according to purpose (necessary, preferential, statistical, marketing).
• ⏹️ Users are able to revoke their consent or change their preferences at any time.
• ⏹️ When withdrawing consent, cookies are rightfully removed or deactivated.
• ⏹️ Users are not manipulated by preset options (e.g. pre-ticked boxes).
• ⏹️ Users are not forced to accept cookies to access basic site features.
• ⏹️ A detailed description of all cookies used is part of the cookie policy.

Conclusion

The cookie bar is an important element of a website that ensures compliance with data protection legislation. Implementing a cookie bar requires careful planning and adherence to the principles of transparency, information and respect for user privacy. Thanks to open source solutions, you can easily and efficiently implement a cookie bar on your website to ensure that you are compliant with the legislation and protect yourself from potential fines and legal issues.

Useful links

• Data Protection Authority
• ePrivacy Directive
• Open Source Orest Bida Cookies
• Chrome Extension Cookies