How to Display Cookie Consent Banner for EU users, Free and Unlimited

A cookie consent banner is essential for complying with privacy laws such as the GDPR in Europe. This article provides a simple and effective way to create a cookie consent banner using HTML, CSS, and JavaScript. The solution is free and unlimited, meaning it can be used on any number of websites without restrictions.

Step-by-Step Implementation

1. Adding the HTML and CSS

First, you need to create the HTML structure and style the cookie consent banner. Here is the code:


<style>
#cookieBanner {
    background: #444;
    color: #fff;
    padding: 15px;
    font-size: 13px;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
}
.cookie-button {
    background: #008CBA;
    color: #fff;
    border: none;
    padding: 8px 12px;
    margin: 5px;
    cursor: pointer;
}
.cookie-button.reject {
    background: #f44336;
}
</style>

This code creates a fixed banner at the bottom of the page with a dark background and white text.

2. Adding the JavaScript

The JavaScript code is responsible for displaying the banner based on the user's location and managing cookie consent.

This script sends a request to a free API to determine the user's location. If the user is in Europe, it displays the cookie consent message. Otherwise, it hides the banner.

3. Managing Cookie Consent

To manage cookie consent and ensure the banner doesn't reappear once the user has consented, add the following JavaScript:


<div id="cookieBanner">
    We use cookies to personalize content and analyze traffic. <a href="/privacy-policy.html" style="color:#FFD700;">Learn more</a>.
    <button class="cookie-button" id="acceptCookies">Accept</button>
    <button class="cookie-button reject" id="rejectCookies">Reject</button>
</div>

<script>
const endpoint = 'https://apip.cc/json';

// Function to set a cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

// Function to get a cookie
function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(";");
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Check if consent is already given
if (getCookie("cookieConsent") !== null) {
    document.getElementById("cookieBanner").style.display = "none";
} else {
    // Fetch user's location
    fetch(endpoint)
        .then(response => response.json())
        .then(data => {
            if (data.ContinentCode === "EU") {
                document.getElementById("cookieBanner").style.display = "flex";
            }
        })
        .catch(error => console.error("Error fetching location data:", error));
}

// Handle Accept button click
document.getElementById("acceptCookies").addEventListener("click", function() {
    setCookie("cookieConsent", "accepted", 365);
    document.getElementById("cookieBanner").style.display = "none";
    // Enable tracking scripts, ads, etc.
});

// Handle Reject button click
document.getElementById("rejectCookies").addEventListener("click", function() {
    setCookie("cookieConsent", "rejected", 365);
    document.getElementById("cookieBanner").style.display = "none";
    // Ensure no tracking scripts are enabled
});
</script>

This code handles setting and retrieving cookies to check if the user has already consented. If they have, the banner is hidden on subsequent visits.

How It Works

  1. HTML and CSS: Create a fixed banner at the bottom of the page.
  2. JavaScript for Location Detection: Uses an API to check if the user is in Europe and displays the banner if they are.
  3. Cookie Management: Sets a cookie when the user clicks the banner, hiding it for 7 days.

Conclusion

This implementation provides a straightforward, free, and unlimited way to display a cookie consent banner. By integrating this code into your website, you can ensure compliance with privacy laws and improve user experience.

Demo: JSFiddle

Pro tips: Put JS codes before footer or before closing body to increase user experience.

We use cookies to personalize content and analyze traffic. Learn more.