In today’s digital age, respecting user privacy is crucial. One way to ensure transparency and gain user trust is by implementing a cookie consent banner on your website. This article guides you through creating a simple yet effective cookie consent banner using HTML, JavaScript, and Bootstrap 5.
What is a Cookie Consent Banner?
A cookie consent banner is a notification that pops up on a website when a user first visits. It informs the user about the site’s use of cookies and requires their consent before proceeding. This is crucial for compliance with privacy laws like the GDPR in the European Union.
Tools Required
- HTML – To structure the consent banner.
- JavaScript – For handling user interactions and cookie management.
- Bootstrap 5 – For styling and responsiveness of the banner.
Step-by-Step Implementation
Step 1: Setup Your HTML
First, include the Bootstrap 5 CSS and JavaScript in your project. This will help in styling and adding functionality to your consent banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Consent Banner</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="cookieConsent" class="text-center" style="background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; position: fixed; bottom: 0; width: 100%;">
<span>This website uses cookies to ensure you get the best experience. <a href="#" target="_blank">Learn more</a></span>
<button id="acceptCookies" class="btn btn-primary btn-sm ms-3">Accept</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="cookie-consent.js"></script>
</body>
</html>
Step 2: JavaScript for Cookie Management
Create a file named cookie-consent.js. This script will manage the cookie settings and display logic for the consent banner.
document.addEventListener("DOMContentLoaded", function() {
var cookieConsent = document.getElementById('cookieConsent');
var acceptCookies = document.getElementById('acceptCookies');
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
if (!getCookie("cookieConsent")) {
cookieConsent.style.display = "block";
}
acceptCookies.addEventListener('click', function() {
setCookie("cookieConsent", "accepted", 365);
cookieConsent.style.display = "none";
});
});
Step 3: Styling the Banner
Although Bootstrap handles most styling, you can customize the appearance directly within your HTML or via external CSS for specific stylings, such as background color and text alignment.
Implementing a cookie consent banner not only helps in complying with legal requirements but also enhances user trust by being transparent about your use of their data. By following the steps above, you can implement an effective cookie consent mechanism on your website using HTML, JavaScript, and Bootstrap 5.