Simple information cookie bar for your privacy policy in JS or jQuery

Hi there, today I have created a very simple information bar to let all my visitors know about the use of cookies on my website company. As you know, this information bar is not sufficient for the European rules on the use of personal data (GDPR). If your website is concerned by these rules, you should consider creating an agree / refuse cookie bar.

I decided to create my cookie bar in Javascript, because I already manage some cookies in JS. Moreover, this will be helpful to add some animations on your cookie bar. The whole cookie bar is contained in a single file (with some HTML and CSS in there) so it is very easy to plug it in any website.

Here is my approach:

• First, I create my bar in HTML / CSS
• I print this bar directly from my JS file
• I hide my bar once the visitor agree with the cookie policy

My HTML cookie bar

<div id='cookie-bar' style='position:fixed; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 0.9);  color: #919191;  font: 14px arial, sans-serif;'>
   <div style='display:inline-block;width:78%;margin:0; font-family: Arial;'>
      This website uses cookies - View our
      <a id='cookie-policy' href='https://mywebsite.fr/priacy-policy' style='color: #919191;font-weight:bold;'>privacy policy here !</a>
   </div>
   <div style='width:20%;'></div>
</div>
<span id='agree' style='position:absolute;bottom:5px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 8px;margin: 0;font-weight: 600;'>ok</span>

So I create a simple div with position:fixed; and some other position settings bottom:0; left:0; width: 100%;

Note: I have created my “OK” button outside of the div, because I want it to be displayed after the bar has disapeared.

Managing my Privacy Policy bar in Javascript

First I print my HTML bar in my JS file, and I call 2 variables $okcolor for a custom color and $urlpolicy for the url of my privacy policy page.

var policyurl = "https://mywebsite.com/cookies-policy",
    okcolor = "#7CCBDE";

document.write("<div id='cookie-bar' style='position:fixed; bottom:0; left:0; width: 100%;  text-align: center; padding: 12px 0; margin:0;  background: rgba(244, 244, 244, 0.9);  color: #919191;  font: 14px arial, sans-serif;'><div style='display:inline-block;width:78%;margin:0; font-family: Arial;'>Ce site web utilise des cookies - <a id='cookie-policy' href='"+policyurl+"' style='color: #919191;font-weight:bold;'>Consulter notre politique des cookies !</a>. Vous pouvez stopper l'utilisation des cookies <span id='stop-cookie' style='text-decoration:underline;'>en cliquant ici</span>.</div><div style='width:20%;'></div></div><span id='agree' style='position:absolute;bottom:5px;right:4%;color: #FFFFFF;background: "+okcolor+";border-radius: 3px; line-height: 30px; padding: 0 8px;margin: 0;font-weight: 600;'>ok</span>");

Then, I make my bar disapear when the user clicks on OK and I change “OK” with “Cookies accepted”.

document.getElementById("agree").addEventListener("click", hideCookiebar);
function hideCookiebar() {
    document.getElementById("agree").innerHTML = "cookie";
  document.getElementById("cookie-bar").style.display = 'none';
}

Note: You can do the same in jQuery, but there is no need to load another library for such a simple cookie bar …

$(document).ready(function() {
       $('#agree').click(function(){
        $('#cookie-bar').hide(500);
         // document.getElementById("agree").innerHTML = "cookies";
       document.getElementById("agree").innerHTML = "<a href='policyurl' target='_blank' style='color:white;'>Our cookies policy</a>";
      });
   });

Here is the final result. Feel free to change it as you need.

See the Pen Simple cookie bar information in JS / Jquery by Arthur H (@ArthurAndAshes) on CodePen.

Finally, if you decide to register the choice of each visitor, think about saving this information in a small cookie. To create a more developped cookie bar, see this complete tutorial on A cookie bar to accept or refuse cookies on your website.

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

Technologies utilisées pour ce tuto :

HTML 5

JavaScript (JS)