HomeJavascriptCookie Consent Banner | HTML, CSS & Javascript

Cookie Consent Banner | HTML, CSS & Javascript

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!

RELATED ARTICLES

5 COMMENTS

  1. 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”);
      }
      };

  2. 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?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eighteen + fifteen =

Most Popular