How to Create a Simple Cookie Consent Pop-up for your Website
A quick and simple tutorial to create a simple cookie banner
I’ll assume you just got a task to build a banner for your website’s cookie policy. Don’t falter, I’ve got you covered.
Let’s pretend I nailed that catchphrase
A little background…
Cookies aren’t as harmful as they appear to be these days. They are used in websites to ensure users and visitors get the best experience.
What are Website Cookies?
Cookies are small and specific packets of data that a visitor’s computer receives and sends. These packets of data are stored on the visitor’s web browser and can be accessed by a web server also. Cookies help to monitor and keep track of user’s activities on a website.
Why does my website need a Cookie Banner?
If you have a website or blog with people visiting or likely to visit from the EU, you will need a cookie warning or popup notice. This is especially in line with the European Parliament’s directive of 2002 guiding personal data and privacy.
While this directive only covers websites that collect user data through cookies, virtually all websites set cookies that track their users and their behaviour.
This means that if you want your website to be compliant in the most basic ways, you need to have a Cookie Banner requesting user’s consent.
In this tutorial, I will take you through the process of building a simple cookie banner. First, I’ll create the HTML template, then add styling using CSS and functionality using JavaScript (JQuery).
Disclaimer: This tutorial is not intended to help create a cookie policy.
HTML Template
<div class=’cookie-banner’ style=’display: none’><p>
By using our website, you agree to our
<a href=’insert-link’>cookie policy</a>
</p><button class=’close’>×</button></div>
We create a block element (div) then assign a class name of ‘cookie-banner’. The paragraph (p) contains the information that will be displayed to our users. A link to the cookie policy document can be inserted in the anchor tag (a).
A button is added to close the banner. Last, a style attribute is added to the “div” (the reason will be clearer later) to set the display to none — the cookie banner is not displayed by default.
Now, we need to style this banner.
CSS styling
.cookie-banner {
position: fixed;
bottom: 40px;
left: 10%;
right: 10%;
width: 80%;
padding: 5px 14px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}.close {
height: 20px;
background-color: #777;
border: none;
color: white;
border-radius: 2px;
cursor: pointer;
}
A few things to note:
- Our cookie banner is given a width of 80% so it doesn’t fill the screen.
- Some padding is also added to improve the visual appeal.
- Fixed positioning ensures the cookie banner is always visible on the screen, whether we decide to scroll or not.
- The shadow makes the banner stand out from the page content.
- Our close button is also styled with text colour, a height and a border-radius.
Now, these styles are majorly for aesthetic appeal. Got that aesthetic appeal.
Read also: A Beginner’s Guide to Styling Form Fields with CSS
JavaScript
if (localStorage.getItem(‘cookieSeen’) != ‘shown’) {
$(‘.cookie-banner’).delay(2000).fadeIn();
localStorage.setItem(‘cookieSeen’,’shown’)
};$(‘.close’).click(function() {
$(‘.cookie-banner’).fadeOut();
})
In this tutorial, JQuery was used to interact with the DOM. If you prefer, you can use document.querySelector() or document.getElementById() to interact with the DOM also.
To ensure that our cookie banner appears just once on a particular browser, we use localStorage object. It enables websites to store and access data on a browser. For more info on localStorage, I found this article on localStorage in JavaScript to be a good introduction.
Our piece of code checks whether there is a cookieSeen key in the browser’s localStorage object, and if there isn’t one, it creates the key (cookieSeen) with a value (shown). Feel free to name these whatever you like.
To view the ‘cookieSeen’ key of your browser’s localStorage object, open the Developers tools, and click on the Application tab.
To reset localStorage to see changes, you can delete the ‘cookieSeen’ key from the Application tab also.
Lastly, we add a ‘click’ event to our button. Whenever the button is clicked, the whole banner fades out. An alternative to JQuery (using pure JavaScript) for the fade effect can be found here.
