loading

How to Cookie Consent Popup with JavaScript

How to Cookie Consent Popup with JavaScript

How to Cookie Consent Popup with JavaScript

0 Sales

Free

Cookies are now used by practically all websites to gather various sorts of information. Visitors should be informed of the cookie policy if a site employs them. In this scenario, a Cookie Consent Popup can be shown to visitors to ask them to allow cookies. As a result, the visitor will be informed of the site's cookie usage and will agree to the policy.

 

Cookie Authorization Popup is a very important tool for making websites GDPR complying. To make it more user-friendly, the Cookie dialogue Warning can be shown in a dialogue box. There are several Php or javascript plugins provided for adding the Cookie Notice popup to your website. However, there is no need to employ a third-party application for the cookie consent popup. The cookie consent dialogue box is simple to develop and show using JavaScript and CSS. This article will teach you how to use JavaScript to create/display/add a Cookie Consent Popup to your website.

 

Create Popup with HTML


Create a popup dialogue using HTML components.

 

- The Accept button invokes the acceptCookieConsent() method, which is specified 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 Consenth4>
    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 Policya>p>
            <div class="btn-wrap">
                <button class="btn-primary" onclick="acceptCookieConsent();">Acceptbutton>
            div>
        div>
    div>
div>

 

Display Cookie Consent Popup with JavaScript

 

JavaScript Cookies are used to control the display of the Cookie Consent Popup.

 

- setCookie() – Set cookies using the document.cookie property.

- deleteCookie() – Remove cookies using the document.cookie property.

- getCookie() – Read cookies using the document.cookie property.

- acceptCookieConsent() - Set the cookie approval signal in JavaScript Cookies and disable the Cookie Consent Popup for the next 30 days. Once the visitor approves the cookie on the authorization popup, this function is triggered.

 

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

 

 

Once the web page is loaded, the following code checks the cookie approval flag in JavaScript Cookies.

 

- If the Cookie Consent Prompt has previously been accepted, it will be hidden. The Cookie Consent Popup will be presented if this is not the case.

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

 

Conclusion

 

With JavaScript, you can easily integrate the Cookie Consent Popup feature. This sample script allows you to quickly add a Cookie Consent Popup to your website. The Cookie Consent popup is built using HTML and CSS using little JavaScript code. You may customise the features of this minimal JavaScript Cookie Consent Popup code to meet your specific requirements.

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Jan 18, 2022

Updated Date : Jan 23, 2022

Ratings

Comments : 0

Downloads : 0