Hello everyone. Welcome to yet another exciting tutorial from Coding Artist. In today’s tutorial, we will learn how to create a cookie consent banner. To build this tutorial, we need HTML, CSS and vanilla Javascript.
The cookie banner pop up appears on the screen on page load. The cookie banner appears on every page load until the user clicks on the ‘Accept’ button. The user can no more see the cookie banner on page load once the cookie is accepted.
You can find the cookie in developer tools under ‘storage’. You can locate and delete your cookie here. The user can once again see the cookie banner pop up on every page load once the user deletes the cookie.
I have more such javascript tutorials on my channel. You can check it out here. This playlist consists of about 50+ javascript tutorials.
Video Tutorial:
If you prefer to code along to a video tutorial rather than reading the blog post, you can check out the video here down below. It is the video version of this tutorial. Also, subscribe to my youtube channel, where I post regular tricks, tips and tutorials.
Project Folder Structure:
Now before we start coding, let us create the project folder structure. We begin by creating a project folder called – ‘Cookie consent banner’. Inside this folder, we have four files. These files are index.html, style.css, script.js and cookie.png. They are the HTML document, the stylesheet, the script file and the cookie image respectively.
HTML:
We start with the HTML code. First, copy the code provided below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our <a href="#">Cookie Policy & Privacy.</a>
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we need to style this cookie banner. For this purpose we use CSS. Now copy the code below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
@media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
Javascript:
Finally, we need to add functionality to this cookie consent banner. For this we use javascript. Now copy the code provided to you below and paste it into your javascript file.
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
That’s it for this tutorial. I hope you loved this tutorial. If you have any issues while creating this project, you can download the source code by clicking on the download code button below.
Other Tutorials You Might Like:
Also, I would love to hear from you guys. So if you have any queries, suggestions, or feedback, comment on them below. See you next time with another exciting tutorial.
Happy Coding!
Hi there, thanks for the help, It was very usefull for me, and so well expleained.
I have all ok, the only thing is when I reload the web, the cookie popup still appers
What have I made wrong? Is there a way you can help me?
Thanks in advance
Yes because in the code, the cookie name is set at specific position. However, it’s not normal because your web browser add others informations with your cookie.
I have modify a part of code and it work’s. And now this code check where is the cookie name instead of looking for it’s position. It is a key/value dictionary looks like : “name” = “john”; “age” = “40”.
const checkCookie = () => {
//Read the cookie and split on “=”
const dc = document.cookie;
ok = dc.split(“;”);
const result = {};
for (let i in ok) {
const cur = ok[i].split(‘=’);
result[cur[0]] = cur[1];
}
//Check for our cookie
if (result[‘ myCookieName’] == “thisIsMyCookie”) {
//Hide the popup
popUp.classList.add(“hide”);
popUp.classList.remove(“show”);
} else {
//Show the popup
popUp.classList.add(“show”);
popUp.classList.remove(“hide”);
}
};
Hi Im wondering how I get the cookie banner to stay on top of other things in the website?
I have a photo gallery and the cookie banner is behind that..
How do I fix it?
Increase The Z-index of the banner wrapper
i have integrated your code into the website but on mobile device the experience is not good. i am not seeing the cookie at all