Implement A Cookie Consent Notification Within 5 Minutes

A free solution to the EU, GDPR, and California Cookie Laws

Photo by twinsfisch on Unsplash

What is Cookie Consent?

Cookie Consent is a lightweight JavaScript plugin for alerting users about the use of cookies on your website.

Cookie Consent Github page — https://github.com/osano/cookieconsent

Cookie Consent is a free JavaScript plugin for alerting users about the use of cookies on your website.

It is designed to help you quickly comply with the EU, GDPR and California cookie laws . Cookie consent is fast, free, and easy to use for everybody.

the European Union’s General Data Protection Regulation (GDPR) went into effect in 2018. Establishing seven principles that should govern the collection of personal information. These seven principles are the following;

• Lawfulness, fairness, and transparency
• Purpose limitation
• Data minimization
• Accuracy
• Storage limitation
• Integrity and confidentiality (security)
• Accountability

Why choose Cookie Consent?

• Free and open source. You’re free to copy, modify and even sell Cookie Consent. See our license .
• Super configurable. Choose your own colors, styles, type of compliance, text and more with a few clicks of the mouse.
• The world’s most popular. Cookie Consent is seen over 2 billion times every month, across millions of websites.

Cookie Consent is seen over 2 billion times every month and is used on millions of sites, making this by far the most popular consent project on the internet.

Here’s what a standard cookie consent notification usually looks like.

Standard cookie consent popup

Installation

Install cookie consent through npm :

npm install cookieconsent

Or through Yarn :

yarn add cookieconsent

Or through a CDN:

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>

For simplicity’s sake, I’m going with a CDN. Add the script to your index.html file. Once done, we have access to the window.cookieconsent object.

Initializing cookie consent

Initializing the plugin is straight-forward. Just call the initialise method on the cookieconsent object.

window.cookieconsent.initialise({});

Notice we pass an object as an array. This object is used for configuration. Let’s pass in the theme, color palette, and options.

window.cookieconsent.initialise({  container: document.getElementById("cookieconsent"),  palette:{    popup: { background: "#1aa3ff" },    button: { background: "#e0e0e0" },  },
  revokable: true,  onStatusChange: function(status) {    console.log(this.hasConsented() ?    'enable cookies' : 'disable cookies');  },  "theme": "edgeless"});

Once you inserted the code, open your browser, you should see the cookie notification appear.