How to Create a GDPR-Compliant Cookie Consent Notification
The General Data Protection Regulation (GDPR) is a regulation in EU law on data protection and privacy for all individuals within the European Union (EU) and the European Economic Area (EEA). It came into effect on May 25, 2018, and replaced the 1995 Data Protection Directive.
What is GDPR?
The GDPR requires that websites obtain user consent before setting cookies on their device. Consent must be freely given, specific, informed, and unambiguous. Websites must also provide users with the ability to withdraw their consent at any time.
The cookie consent notification we are creating in this tutorial meets the GDPR requirements by providing users with the option to choose which cookies they want to accept. The notification also includes a clear message that informs users about the use of cookies and obtains their consent to store cookies on their browser. The notification is designed to be easily visible and accessible to users, which ensures that users are fully informed about the use of cookies on the website. By providing users with the option to choose which cookies they want to accept, the notification ensures that users have control over their data and can withdraw their consent at any time.
Step 1: Create the HTML structure
Let us start by creating the HTML structure for the cookie consent notification. We will position it at the bottom of our screen. We will add an image of a cookie just above our text for aesthetic purposes. We will also add our consent message, as well as some options for them to choose. Our HTML file will have the following code:
<!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 rel="stylesheet" href="style.css">
</head>
<body>
<div class="cookie-consent">
<img src="cookie.png" alt="cookie icon" class="cookie-icon">
<p>We use cookies to improve your experience on our website. By clicking "I agree", you consent to the use of cookies.</p>
<button id="more-info-btn">More info</button>
<div class="cookie-options">
<h3>Cookie Options</h3>
<ul>
<li><input type="checkbox" id="essential-cookies" name="essential-cookies" checked><label for="essential-cookies">Essential Cookies</label></li>
<li><input type="checkbox" id="analytics-cookies" name="analytics-cookies"><label for="analytics-cookies">Analytics Cookies</label></li>
<li><input type="checkbox" id="marketing-cookies" name="marketing-cookies"><label for="marketing-cookies">Marketing Cookies</label></li>
</ul>
</div>
<button id="agree-btn">I agree</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Add CSS styles
Next, let's add CSS styles to create the look and feel of our cookie consent banner. It will be fixed at the bottom of the screen with items centered. the options will be hidden when it appears. Our style.css file will look like this:
.cookie-icon {
width: 100px;
height: 100px;
}
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: #f8f8f8;
border-top: 1px solid #ccc;
text-align: center;
transform: translateY(100%); /* Initially move it up by its full height */
opacity: 0; /* Initially hide it */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Prepare for animation */
}
.cookie-consent p {
margin: 0 0 12px 0;
font-size: 14px;
}
.cookie-consent button {
margin-left: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border: 1px solid #3e8e41;
border-radius: 3px;
cursor: pointer;
}
.cookie-consent #more-info-btn {
margin-left: 10px;
padding: 5px 10px;
background-color: transparent;
color: #3e8e41;
border: 1px solid #3e8e41;
border-radius: 3px;
cursor: pointer;
}
.cookie-consent button:hover {
background-color: #3e8e41;
}
.cookie-consent #more-info-btn:hover {
background-color: #c4ffc6;
}
.cookie-options {
display: none;
max-width: 300px;
padding: 12px;
margin: 10px auto 10px auto;
text-align: left;
background-color: rgb(241, 241, 241);
border: 1px solid rgb(136, 136, 136);
border-radius: 6px;
}
.cookie-options h3 {
margin: 0 0 5px;
font-size: 16px;
}
.cookie-options ul {
margin: 0;
padding: 0;
list-style: none;
}
.cookie-options li {
margin: 5px 0;
}
.cookie-options label {
margin-left: 5px;
font-size: 14px;
}
Step 3: Add JavaScript code
Finally, let's add JavaScript code to make the cookie consent item functional. Our banner will slide in from the bottom and when the user clicks the more info button- the cookie options will be revealed. When they agree, the banner will be hidden. Add the following code in the script.js file:
// Get the html elements
const cookieConsent = document.querySelector(".cookie-consent");
const moreInfoBtn = document.querySelector("#more-info-btn");
const cookieOptions = document.querySelector(".cookie-options");
const agreeBtn = document.querySelector("#agree-btn");
// Reveal the consent options when the user clicks the button
moreInfoBtn.addEventListener("click", () => {
cookieOptions.style.display = "block";
moreInfoBtn.style.display = "none";
});
// Hide the notification when the user agrees
agreeBtn.addEventListener("click", () => {
cookieConsent.style.display = "none";
// Add your logic for user consent here e.g. set a cookie or log it in your database
});
// Use a timer to create a 3 second delay before our div slides in
setTimeout(() => {
document.querySelector(".cookie-consent").style.transform = "translateY(0)";
document.querySelector(".cookie-consent").style.opacity = 1;
}, 3000); /* Delay for 3 seconds */
Our banner will now respond to clicks. When the user clicks the More info button the options will become visible as shown below.
On a mobile screen, our banner will look as shown below when we click to see more info.
Conclusion
That's it! You now have a cookie consent banner that meets GDPR requirements and provides options for the user to select which cookies they accept. You can customize the notification for your own website to ensure compliance with GDPR regulations.