This JavaScript example manages cookie consent on a website. It displays a consent box with accept and decline buttons. The consent is stored for a month if accepted. It helps comply with cookie policies.
You can use this code on any website to manage cookie consent easily. It helps ensure compliance with privacy regulations like GDPR. With clear buttons and a customizable design, it enhances the user experience.
How to Create Cookie Consent Javascript Example
1. First of all, load the Box Icons CSS by adding the following CDN link into the head tag of your HTML document.
<!-- Boxicons CSS --> <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
2. In your HTML file, create a structure for the cookie consent box. Include elements for the message, accept, and decline buttons. Ensure proper classes for styling and identification.
<div class="wrapper">
<header>
<i class="bx bx-cookie"></i>
<h2>Cookies Consent</h2>
</header>
<div class="data">
<p>This website use cookies to help you have a superior and more relevant browsing experience on the website. <a href="#"> Read more...</a></p>
</div>
<div class="buttons">
<button class="button" id="acceptBtn">Accept</button>
<button class="button" id="declineBtn">Decline</button>
</div>
</div>
3. Copy the following CSS code into your CSS file or add it within <style> tags in your HTML file. This CSS code styles the cookie consent box and ensures it blends seamlessly with your website’s design.
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
background-color: #4070f4;
}
.wrapper {
position: fixed;
bottom: 50px;
right: -370px;
max-width: 345px;
width: 100%;
background: #fff;
border-radius: 8px;
padding: 15px 25px 22px;
transition: right 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
right: 20px;
}
.wrapper header {
display: flex;
align-items: center;
column-gap: 15px;
}
header i {
color: #4070f4;
font-size: 32px;
}
header h2 {
color: #4070f4;
font-weight: 500;
}
.wrapper .data {
margin-top: 16px;
}
.wrapper .data p {
color: #333;
font-size: 16px;
}
.data p a {
color: #4070f4;
text-decoration: none;
}
.data p a:hover {
text-decoration: underline;
}
.wrapper .buttons {
margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.buttons .button {
border: none;
color: #fff;
padding: 8px 0;
border-radius: 4px;
background: #4070f4;
cursor: pointer;
width: calc(100% / 2 - 10px);
transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
background-color: #034bf1;
}
#declineBtn {
border: 2px solid #4070f4;
background-color: #fff;
color: #4070f4;
}
#declineBtn:hover {
background-color: #4070f4;
color: #fff;
}
4. Finally, copy the following JavaScript code into a separate JavaScript file or add it within <script> tags at the end of your HTML file, just before the closing </body> tag. This JavaScript code controls the behavior of the cookie consent box.
const cookieBox = document.querySelector(".wrapper"),
buttons = document.querySelectorAll(".button");
const executeCodes = () => {
//if cookie contains codinglab it will be returned and below of this code will not run
if (document.cookie.includes("codinglab")) return;
cookieBox.classList.add("show");
buttons.forEach((button) => {
button.addEventListener("click", () => {
cookieBox.classList.remove("show");
//if button has acceptBtn id
if (button.id == "acceptBtn") {
//set cookies for 1 month. 60 = 1 min, 60 = 1 hours, 24 = 1 day, 30 = 30 days
document.cookie = "cookieBy= codinglab; max-age=" + 60 * 60 * 24 * 30;
}
});
});
};
//executeCodes function will be called on webpage load
window.addEventListener("load", executeCodes);
That’s all! hopefully, you have successfully integrated this Cookie Consent JavaScript example into your web/app project. If you have any questions or suggestions, feel free to comment below.
