Cookies are now used by practically all websites to collect various types of information. Visitors must be informed of your cookie policy if your website employs them. A Cookie Consent Popup might be provided in this scenario to ask visitors to accept cookies. The user will be aware of the website’s cookie usage and will accept the cookie policy as a result.

The Cookie Consent Popup is extremely helpful in ensuring that websites comply with GDPR. To make it more user-friendly, the Cookie Consent Notice can be shown in a popup box. To add the Cookie Notice popup to your website, you can use a variety of JavaScript or jQuery plugins. The cookie consent popup, however, does not require the usage of a third-party plugin. With JavaScript and CSS, you can quickly design and show a cookie consent dialogue box. This tutorial will show you how to use JavaScript to construct, display, and add a Cookie Consent Popup to your website.

Create Popup in HTML

To create a popup dialogue, define HTML elements.

•  The acceptCookieConsent() function, which will be defined in the JavaScript section, is triggered by the Accept button.

<div id="cookieNotice" class="light display-right" style="display: none;">
<div id="closeIcon" style="display: none;">
</div>
<div class="title-wrap">
<h4>Cookie Consent</h4>
</div>
<div class="content-wrap">
<div class="msg-wrap">
<p>This website uses cookies or similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our <a style="color:#115cfa;" href="/privacy-policy">Privacy Policy</a></p>
<div class="btn-wrap">
<button class="btn-primary" onclick="acceptCookieConsent();">Accept</button>
</div>
</div>
</div>
</div>

With JavaScript, you can show a cookie consent popup.
The Cookie Consent Popup’s visibility is controlled by JavaScript Cookies.

• setCookie() – Create cookies with the document.cookie property;
• deleteCookie() – Delete cookies with the document.cookie property;
• getCookie() – Read cookies with the document.cookie property;
• acceptCookie() – Accept cookies with the document.cookie property.CookieConsent() – Hide Cookie Consent Popup for the next 30 days and set cookie acceptance flag in JavaScript Cookies. When the user accepts the cookie on the consent popup, this function is called.

// Create cookie
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// Delete cookie
function deleteCookie(cname) {
const d = new Date();
d.setTime(d.getTime() + (24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=;" + expires + ";path=/";
}

// Read cookie
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

// Set cookie consent
function acceptCookieConsent(){
deleteCookie('user_cookie_consent');
setCookie('user_cookie_consent', 1, 30);
document.getElementById("cookieNotice").style.display = "none";
}

When the web page is loaded, the following code checks the cookie acceptance flag in JavaScript Cookies.

The Cookie Consent Popup will be hidden if it has previously been accepted. In that case, the Cookie Consent Popup will appear.

let cookie_consent = getCookie("user_cookie_consent");
if(cookie_consent != ""){
document.getElementById("cookieNotice").style.display = "none";
}else{
document.getElementById("cookieNotice").style.display = "block";
}

Note :

With JavaScript, you can easily integrate the Cookie Consent Popup functionality. This sample script demonstrates how to quickly add a Cookie Consent Popup to your website. The Cookie Consent popup is built using HTML and CSS using minimal JavaScript code. This lightweight JavaScript Cookie Consent Popup script can be customised to meet your specific requirements.