Cookie bar to let visitors allow / block cookies on your website (RGPD compliant)

I have previously made a tuto on creating a simple information bar about cookies. Right know I’ll try to expand my Cookie Bar with more settings. I will let users decide if they want or not cookies on my website, so as to be GDPR compliant ( the new European Union rules on personal data):

• Visitors of your website might be able to accept / refuse the cookie use
• Some cookies might be suppressed on demand by any visitor
• Your visitors might be able to come back on their first decision

Note:Not every cookies are concerned by the RGPD. Only cookies able to identify a specific person are concerned (connexion cookies, analytics cookies, advertizing cookies …).

So here is my approach to create the perfect acceptance / refusal cookie bar :

• I display my information bar with a link to my “Privacy Policy”, a link to agree with the policy and another link to block cookies.
• When the visitor Agree / refuse my cookie policy, I will hide the information bar, but I keep a small button to let the user change his choice about cookies.
• Then, I have to register the visitor’s choice and repeat this behaviour on each page, with a small cookie.
• Finally, if the user wants to block cookies, I delete my cookies and I block the scripts generating new cookies

First, let’s try to display my information cookie bar

I decided to code this program in a single JS file. Thus, it will be easier to plug this bar on any website.

To manage my different cookies, I am using a small library named JS Cookie.

var policyurl = "https://dmp.com/policy-cookie",
    okcolor = "#7CCBDE",
    cookie_crunch = Cookies.get('cookie_crunch');

// My HTML cookie bar
document.write("<div id='cookie-bar' style='display:none;z-index:10;position:absolute; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 1);  color: #919191;  font: 14px arial, sans-serif;'><div style='display:inline-block;width:78%;margin:0; font-family: Arial;'>This website uses cookies - <a id='cookie-policy' href='"+policyurl+"' style='color: #919191;font-weight:bold;'>Consulter notre politique des cookies !</a>. You can easily block cookies <span id='stop-cookie' style='text-decoration:underline;'>by clicking here</span>.</div><div style='width:20%;'><span id='agree' style='position:absolute;bottom:4px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 6px;margin: 1px 8px 0 0;font-weight: 600;'>J'accepte</span></div></div>");

// I keep a button below my cookie bar, so as to let the user display or change his choice about cookies
document.write("<span id='checkcookies' style='z-index:1;position:absolute;bottom:4px;right:2%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 6px;margin: 1px 8px 0 0;font-weight: 600;'>cookies</span>");

Then, I manage the visitor’s choice, among his acceptance / refusal about cookies.

document.getElementById("checkcookies").addEventListener("click", showCookiebar);
function showCookiebar() {
  document.getElementById("cookie-bar").style.display = 'block';
}

// If the visitor agree with the use of cookies
document.getElementById("agree").addEventListener("click", hideCookiebar);
function hideCookiebar() {
   // I store his acceptance on a cookie
  document.cookie = "cookie_crunch=ok;expires=Thu, 18 Dec 2020 12:00:00 UTC;path=/";
  // I hide my information bar
  document.getElementById("cookie-bar").style.display = 'none';
}

//If the visitor refuse
document.getElementById("stop-cookie").addEventListener("click", hideCookiebar);
function hideCookiebar() {
   // I store his refusal on a cookie
  document.cookie = "cookie_crunch=no;expires=Thu, 18 Dec 2020 12:00:00 UTC;path=/";
  // I hide my cookie bar
  document.getElementById("cookie-bar").style.display = 'none';
  // I delete specific cookies here ....
}

Finally, I am going to manage some settings among the visitor’s choice

On the one hand, if the user already made a choice about my cookies policy, I will stop displaying the information bar on every page.

// If there is no cookie about the user's choice, I am going to display the bar. Otherwise, the bar is not displayed.
if (cookie_crunch == null || cookie_crunch == ""){
   document.getElementById("cookie-bar").style.display = "block";
}

On the other hand, I am going to stop loading scripts generating new cookies (like Google Analytics …)

// I check if the user decided to block cookies on my own cookie
var cookie_crunch = Cookies.get('cookie_crunch');
if (cookie_crunch != "no"){
  // je charge mes scripts de suivi de données, publicités ... 
}

Here is the result of my cookie bar : GDPR Compliant and very easy to customize.

See the Pen Simple cookie bar aggreement / disagreement in jquery by Arthur H (@ArthurAndAshes) on CodePen.

retrouvez tous les outils et ressources en liens avec ce tuto ...

Technologies utilisées pour ce tuto :

Google analytics

HTML 5

JavaScript (JS)