Go to main content

Simple cookie bar

EU cookie legislation requires website owners to inform visitors about the use of cookies. In this article, I will provide you with a simple solution of an informative cookie bar.

Simple cookie bar

What it does

When a page gets loaded, a message shows up. If the visitor closes the message, a localStorage flag gets set, and the message won´t display any more. See the example.

The code

The solution consists of 2 parts:

  • logic based on Javascript and
  • styling.


Both parts need to be implemented in the website to make it work. For javascript, you can find jQuery and vanilla implementations below.
For styling, you can choose from CSS or LESS implementations.

Please, note that the javascript code relies on the existence of the ".footer" element. You can, of course, change it according to your taste.

jQuery

$(function () {
  if (localStorage) {
      if (localStorage.getItem('CookieBarHide') !== 'true') {
        var bar = '<div class="cookie-bar js-cookie-bar"><div class="cookie-bar__inner"><div class="cookie-bar__text">The website uses small cookies to improve your website experience. You may disable them from your browser settings at any time. <a href="#" target="_blank" rel="noopener noreferrer">Learn more</a>.</div><div class="cookie-bar__close js-cookie-bar__close">×</div></div></div>';
        $('.footer').after(bar);
      }

      $('.js-cookie-bar__close').click(function () {
        $(this).parents('.js-cookie-bar').remove();
        localStorage.setItem('CookieBarHide', 'true');
      });
  }
});

Vanilla javascript

(function () {
    if (localStorage) {
        if (localStorage.getItem('CookieBarHide') !== 'true') {
          var bar = '<div class="cookie-bar js-cookie-bar"><div class="cookie-bar__inner"><div class="cookie-bar__text">The website uses small cookies to improve your website experience. You may disable them from your browser settings at any time. <a href="#" target="_blank" rel="noopener noreferrer">Learn more</a>.</div><div class="cookie-bar__close js-cookie-bar__close">×</div></div></div>';
          document.querySelector('.footer').insertAdjacentHTML('afterend', bar);
        }
  
        var closeEl = document.querySelector('.js-cookie-bar__close');

        if (closeEl !== null) {
            closeEl.addEventListener('click', function () {
                var barEl = document.querySelector('.js-cookie-bar');
                barEl.parentNode.removeChild(barEl);
              localStorage.setItem('CookieBarHide', 'true');
            });
        }   
    }
})();

CSS

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #a3bf3b;  /*Bar bg color*/
  z-index: 999;
  padding: 5px 0;
  line-height: 1.4em;
}
.cookie-bar__inner {
  color: #fff;	/*Bar text color*/
  text-align: left;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}
 /*Bar wrapper width*/
@media (min-width: 1000px) {
  .cookie-bar__inner {
    width: 1000px;
  }
}
.cookie-bar__inner a {
  color: #fff;	/*Bar link color*/
}
.cookie-bar__text {
  padding-right: 8px;
  display: inline-block;
  width: 92%;
}
.cookie-bar__close {
  color: #fff;	/*Bar close icon color*/
  font-size: 28px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 10px;
}

LESS

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #a3bf3b; /*Bar bg color*/
  z-index: 999;
  padding: 5px 0;
  line-height: 1.4em;

  &__inner {
    color: #fff; /*Bar text color*/
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;

	/*Bar wrapper width*/
    @media (min-width: 1000px) {
        width: 1000px;
    }

    a {
      color: #fff; /*Bar link color*/
    }
  }

  &__text {
    padding-right: 8px;
    display: inline-block;
    width: 92%;
  }

  &__close {
    color: #fff; /*Bar close icon color*/
    font-size: 28px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px;
  }
}

Further reading

all posts
  • Front-end & JavaScript

    Simple scroll parallax

    Recently, a designer asked me to add a parallax background image on a website. I researched the web to find a suitable solution. Regrettably, I found only massive libraries that wo…

  • Kentico EMS & Xperience

    Social media share urls enhanced by Kentico macros

    Requirements of nearly every website ask us to incorporate links for sharing content on social media. There are tools out there which generates these links for us. But wh…

  • Kentico EMS & Xperience

    Sync form submissions with Integration bus in Xperience by Kentico

    In this post, I will provide you with a code snippet and tips on how to synchronize new form submissions with an external system through its REST API using the Integration bus in X…