How to add a cookie consent banner to a website

Adding a cookie consent banner to a website is essential for compliance with regulations like the General Data Protection Regulation (GDPR) in the European Union. Here's a comprehensive guide on how to add one to your website:

Understanding Cookie Consent

Before diving into implementation, it's crucial to understand what cookie consent is and why it's important. Cookie consent refers to obtaining explicit permission from users before storing or accessing cookies on their devices. Cookies are small pieces of data stored on a user's browser, often used for tracking, analytics, or personalization purposes. The consent banner informs users about the use of cookies on the website and gives them the option to accept or decline their use.

Step 1: Choose a Consent Banner Solution

There are various methods and tools available for implementing cookie consent banners on websites. You can choose between using a third-party consent management platform or implementing a custom solution. Popular third-party tools include Cookiebot, OneTrust, and Cookie Consent by Osano. These tools offer customizable consent banners and automated cookie scanning features.

Step 2: Customize the Consent Banner

Once you've chosen a solution, customize the consent banner to match your website's design and branding. Typically, you can customize aspects such as colors, text, and behavior (e.g., banner position, animation). Ensure that the banner is clear, visible, and easy to understand for users.

Step 3: Implement the Consent Banner Code

The implementation process varies depending on the chosen solution. If you're using a third-party tool, they often provide a snippet of JavaScript code to embed on your website. This code displays the consent banner and manages user preferences regarding cookies.

If you prefer a custom solution, you'll need to create the consent banner HTML, CSS, and JavaScript yourself. Here's a basic example:

HTML:

<div id="cookie-banner">
    <p>This website uses cookies to ensure you get the best experience. <a href="/privacy-policy">Learn more</a></p>
    <button id="accept-cookies">Accept</button>
    <button id="decline-cookies">Decline</button>
</div>

CSS:

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

#cookie-banner button {
    margin: 0 10px;
    padding: 5px 10px;
    background-color: #fff;
    color: #333;
    border: none;
    cursor: pointer;
}

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    var cookieBanner = document.getElementById('cookie-banner');
    var acceptCookiesBtn = document.getElementById('accept-cookies');
    var declineCookiesBtn = document.getElementById('decline-cookies');

    acceptCookiesBtn.addEventListener('click', function() {
        // Set cookies as accepted
        // Code to hide the cookie banner
    });

    declineCookiesBtn.addEventListener('click', function() {
        // Handle decline action
    });
});

Step 4: Manage Cookie Consent

Once the user interacts with the consent banner (accepts or declines cookies), you need to manage their preferences accordingly. If the user accepts cookies, you can set cookies on their device for tracking or other purposes. If they decline, respect their choice and refrain from setting non-essential cookies.

Step 5: Provide Cookie Policy Information

In addition to the consent banner, it's essential to provide users with information about your website's cookie usage and privacy practices. This information is typically included in a dedicated Privacy Policy or Cookie Policy page. Ensure that this page is easily accessible from the consent banner.

Step 6: Test and Optimize

After implementing the cookie consent banner, thoroughly test it across different browsers and devices to ensure compatibility and functionality. Pay attention to user feedback and analytics to optimize the banner's design and messaging for better user experience and compliance.

Preview

<div id="cookie-notice"><div id="cookie-text">We use cookies to give you the best experience please let us know if you agree to all of these cookies being used. 
<a target="_blank" class="cookie-link" href="https://example.com/homepage">Learn more</a></div><button class="cookie-notice-button" onclick="acceptCookie();">OK</button></div><div>

<style>
#cookie-notice {
    color: #fff;
    font-family: inherit;
    background: #434343;
    padding: 15px;
    position: fixed;
    width: 100%;
    visibility: hidden;
    z-index: 1000000;
    bottom: 0;
    transition: background .2s;
}
#cookie-text {
    display: inline-block;
    margin-left: 20px;
    margin-top: 12px;
}
.cookie-notice-button {
    color: inherit;
    background: #f05c1d linear-gradient(90deg, #faa00d, #f05c1d);
    border-width: 0px;
    border: 0;
    padding: 10px;
    margin-top: 0;
    cursor: pointer;
    float: right;
}
.cookie-notice-button:hover {
    background: #F05D1D;
}
.cookie-link:hover {
    color: #F15F1D;
    border-bottom: none;
    text-decoration: none;
}
.cookie-link{
    border-bottom: none;
    color: #f99c0e;
}
  @media screen and (max-width: 768px) {
.cookie-notice-button {
    color: inherit;
    background: #f05c1d linear-gradient(90deg, #faa00d, #f05c1d);
    border-width: 0px;
    border: 0;
    padding: 10px;
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
}
}
</style>

<script>function acceptCookie(){document.cookie="cookieaccepted=1; expires=365; path=/",document.getElementById("cookie-notice").style.visibility="hidden"}document.cookie.indexOf("cookieaccepted")<0&&(document.getElementById("cookie-notice").style.visibility="visible");</script>

By following these steps, you can effectively add a cookie consent banner to your website, ensuring compliance with relevant regulations and respecting user privacy preferences.