March 29, 2020 / 0 comments

Create a simple cookie banner in a few minutes

If you have a website, there are great chances that you use cookies to make it work perfectly. You must then provide your site with a cookie banner which will inform the user that you are using cookies.

Instead of using third party solutions which will requires you to load external JS files, we will learn here how to make a simple cookie banner with only HTML, CSS and JavaScript.

 

1 - The HTML

Your cookie banner must be visible on every page of your site, so make sure add the following HTML in your global layout.

 

<div class="hidden" id="cookie-banner">
    <div>
         <span>
                This site uses cookies to provide you with a great user experience. By using it, you accept our use of cookies.
         </span>
         <span id="consent-cookies">
                Close
         </span>
    </div>
</div>

 

2 - The CSS

Now, let's apply some style to make it a little sexier. You can obviously customize it by yourself.

 

.hidden {
    display: none;
}

#cookie-banner {
    padding: 1rem;
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #2a4365;
}

#cookie-banner div {
    background-color: #2c5282;
    color: #ebf8ff;
    border-radius: 9999px;
    padding: 0.5rem 0.75rem;
    line-height: 1;
    align-items: center;
    display: inline-flex;
}

#cookie-banner div span:first-child {
    text-align: left;
    margin-right: 0.5rem;
    font-weight: 600;
    flex: 1 1 auto;
}

#cookie-banner div span:second-child {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    display: flex;
    cursor: pointer;
    border-radius: 9999px;
    background-color: #4299e1;
}

 

Great ! You should now see your cookie banner at the bottom of your screen. 

 

3 - The JavaScript

Now we have to write a bit of JavaScript to make the banner appear if your user have not accepted the cookies yet.

 

The JavaScript will also allow us to set a cookie for a chosen duration when your user will click on the close link.

 

Let's start by writing two little functions. The first one to get a cookie value and the second one to define a new cookie for a given value and duration.

 

function getCookie(cname) {
    const name = cname + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const 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 "";
}

function setCookie(cname, cvalue, exdays) {
    const d = new Date();

    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    const expires = "expires="+ d.toUTCString();

    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

 

Now we can use them to check if your user already have the cookie and create it when he will click on the "close" link.

 

const cookieBanner = document.querySelector('#cookie-banner');
const hasCookieConsent = getCookie('cookies-consent');

if (!hasCookieConsent) {
    cookieBanner.classList.remove('hidden');
}

const consentCta = cookieBanner.querySelector('#consent-cookies');

consentCta.addEventListener('click', () => {
    cookieBanner.classList.add('hidden');
    setCookie('cookies-consent', 1, 365);
});

 

That's it ! You have now a fully functionnal cookie banner.

Hugo Soltys

Who is talking to you ?

My name is Hugo, I'm 28 and I'm a Symfony developer since 2013. I love to create websites by myself to learn new technologies or increase my skills. I also like to share my knowledge so I created this blog. I hope you enjoy it :)