How to Create A Cookie Consent Banner for a Website

What is Cookie Consent Banner?

Have you ever seen a “cookie consent banner” at the top of your browser? A cookie is a data that can be stored on your computer to recognize who you are and what sites or apps give access to.

Cookies identify users, so third-party advertising companies know which ads will interest them most, but also track their browsing habits over time—sometimes even if they don’t click an ad!

Cookie banners let users easily control how websites use cookies by allowing website visitors to decide whether or not cookie consent should continue when visiting said site again in the future.

If I were writing this piece about “Cookie Banner,” it would include many ways readers could edit settings like disabling specific types of tracking technology such as Google Analytics Tracking ID.

Imagine that you’re browsing the internet, looking for information about your favorite TV show. You find a page and go to click on it when all of a sudden, an obnoxious banner starts popping up every few seconds demanding that you agree with whatever terms they are insisting upon before being allowed access.

The “accept” button is right there but just out of reach because the pop-ups keep appearing in between each other so quickly! How frustrating would this be?

Cookie consent banners were designed specifically as part of EU law (i.e., privacy Directive), which requires online service providers – like us here at Web Designers Unlimited Incorporated – who collect personal data through cookies or similar technology from users visiting their website to ask permission first by providing certain details.

How to create cookie consent banner

Here is the code about how to create a cookie consent banner for a website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">    
    <style>
      
        .cookieBanner {
  position: fixed;
  bottom: -100%;
  width: 100%;
  padding: 14px;
  transition: 400ms;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.active{bottom: 0;}
.close {
  
  float: right;

}
p{float: left;}
    </style>
</head>
<body>
  <div class="cotainer-fluid"><div class="container">

      <div class="brand"><h1>Advance developer</h1></div>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, possimus?
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eius placeat voluptatum enim temporibus, voluptate molestias veniam voluptas vel beatae tempora libero voluptatem exercitationem repudiandae excepturi fugiat, 

minus quae laboriosam reiciendis! Quas, eum. Est facere iste assumenda similique numquam hic atque amet excepturi, quos cumque voluptate sint ducimus odit, blanditiis perferendis consectetur iure expedita nemo, maiores perspiciatis quasi quas optio! Tempora quod cum dolor facilis quasi incidunt, repudiandae consectetur possimus, minima dicta ad temporibus labore accusamus assumenda vitae culpa ipsa nam repellendus officia quaerat adipisci sequi beatae aliquam harum. Tenetur, similique. Aliquam distinctio illo, minus repellendus corporis ipsam vel harum.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta similique quod ipsum quia maxime officia quae, dolore ratione aut dolores quam sint praesentium quos numquam ad, enim doloribus quaerat nulla vel, voluptate culpa. Voluptatum libero eum placeat beatae. Doloremque, maxime? Quas fuga explicabo dolorem praesentium ut unde ullam similique dolor.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore cum sed quibusdam voluptate, exercitationem illum est consequatur aspernatur officia animi.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto natus quidem nostrum est sit eligendi dolorum incidunt esse quam vel sequi blanditiis sapiente minima velit, nobis recusandae. Ea provident laboriosam iure illum accusantium, harum sit, fugiat facilis neque hic exercitationem.</p>
    </div>
    </div>
    <div class="cookieBanner bg-warning bg-gradient"> 
        <p> 
            By using our website, you agree to our    <a href='insert-link'>cookie policy</a>
          </p>
          
<button type="button" class="btn close btn-outline-light">Accept</button>
        </div>
        
<script>
const cookieContainer = document.querySelector('.cookieBanner')
const cookieClsBtn = document.querySelector('.close')
cookieContainer.addEventListener('click', () => {
    cookieContainer.classList.remove('active');
    localStorage.setItem('cookieBanner', true)

})

setTimeout(() =>{
    if(!localStorage.getItem('cookieBanner'))
    {cookieContainer.classList.add('active')}
},2000)
</script>
</body>
</html>
Cookie Consent Banner
Cookie Consent Banner

Cookie Consent Banner

This is how our cookie consent banner will be created. Now I will explain the code. First of all, do create a banner for your website cookie consent. I just create a simple cookie consent banner with the help of bootstrap.

Create a cookie container and set the position of the banner. Now create a class with the name active. In the active class, just set position bottom : 0. I want this banner from bottom to top. So we set the cookie container position at the bottom -100%; remember, you have to set overflow hidden when you create it.

Don’t forget to add an accept button for your cookie banner. This accepts button helps users to remove the banner from the site.

Now it’s time to use the script for the cookie consent auto to appear. First of all, we need to call all the elements of the cookie consent banner in js. So we call the first cookie banner area in our js in a constant. We used const here because we don’t want to change its value. You can use var too.

Now we just need a function that will set the cookie on your browser. We add an eventlistener. This listener will be removing our active class from the cookie consent banner. Now we will set cookie value in the browser by using localStorage.setitem(), you need to pass to value. First is a string which is the cookie value, and another is Boolean which should be true.

Now call your second element, which is the accepted button of your banner. Now we create a function for setting the active class to our container. But this should happen auto, so here we are using setTimeOut(). In that function, Now we will check that our cookie has been set or not. So we use if condition here.

Hope this code will help you in creating a cookie consent banner. If you have a query related to this article, please let us know by using the comment section below.

Also read :- How to create a pop up using JavaScript

Leave a Comment