Cookie Consent Popup with JavaScript

Nowadays, almost all websites are using cookies to collect various types of information. If your website uses cookies, the visitors must be aware of the cookie policy. In this case, a Cookie Consent Popup can be displayed to ask visitors to accept cookies. That way, the user will be aware of the website’s cookie uses and accept the cookie policy.

Cookie Consent Popup is very useful to make websites comply with GDPR. The Cookie Consent Notice can be displayed in a popup box to make it user-friendly. There are various JavaScript or jQuery plugins are available to add the Cookie Notice popup on the website. But, you don’t need to use any third-party plugin for the cookie consent popup. The cookie consent dialog box can create/display easily with JavaScript and CSS. This tutorial will show you how to create/display/add Cookie Consent Popup on the website using JavaScript.

Create Popup with HTML

Define HTML elements to build popup dialog.

• The Accept button triggers the acceptCookieConsent() which will be defined in the JavaScript section.

<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>

Display Cookie Consent Popup with JavaScript

The JavaScript Cookies is used to handle the visibility of the Cookie Consent Popup.

• setCookie() – Create cookies with document.cookie property.
• deleteCookie() – Delete cookies with document.cookie property.
• getCookie() – Read cookies with document.cookie property.
• acceptCookieConsent() – Set cookie acceptance flag in JavaScript Cookies and hide Cookie Consent Popup for next 30 days. This function triggers when the user accepts the cookie on the consent popup.

// 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";
}

The following code will check the cookie acceptance flag in JavaScript Cookies when the web page is loaded.

• If already accepted, it will hide the Cookie Consent Popup. Otherwise, the Cookie Consent Popup will be displayed.

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

Store Data in Cookies with JavaScript

Conclusion

The Cookie Consent Popup functionality is easy to implement with JavaScript. This example script helps you to add Cookie Consent Popup on the website instantly. Minimal JavaScript code is used to build the Cookie Consent popup with HTML and CSS. You can enhance the functionality of this lightweight JavaScript Cookie Consent Popup script as per your needs.