Easily add a clean, lightweight, and fully customizable cookie consent banner to your website. This script helps you comply with privacy regulations like GDPR and CCPA by informing users about cookie usage and getting their consent, without relying on any external libraries like jQuery.

It's built with pure vanilla JavaScript, making it incredibly fast and easy to integrate into any project. The banner also remembers the user's choice using localStorage, so it won't appear on every single page load, creating a seamless user experience.

Key Features:

  • Lightweight & Fast: Written in pure vanilla JavaScript with no dependencies.
  • Easy to Customize: Change the entire color scheme in seconds by editing simple CSS variables.
  • Smart Memory: Remembers the user's choice so they only have to consent once.
  • Simple Integration: Just copy and paste the HTML, CSS, and JavaScript into your project.
  • Responsive Design: Looks great on desktops, tablets, and mobile devices.

How to Use:

Follow these 3 simple steps to add the banner to your site:

1. Add the HTML:

Place this HTML code just before your closing </body> tag.

<div id="cookie-consent-banner" class="cookie-consent-banner">
<p>This website uses cookies to ensure you get the best experience on our website. <a href="/privacy.php">Learn More</a></p>
<button id="cookie-consent-accept" class="cookie-consent-button">Accept</button>
</div>

2. Add the CSS:

Add this CSS to your stylesheet. You can easily change the colors in the :root section.

/* --- Cookie Consent Banner --- */
:root {
--cookie-bg: #222;
--cookie-text-color: #eee;
--cookie-button-bg: #007bff;
--cookie-button-text-color: #fff;
--cookie-link-color: #80bfff;
}

.cookie-consent-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--cookie-bg);
color: var(--cookie-text-color);
padding: 15px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.5s ease-in-out;
}

.cookie-consent-banner.active {
transform: translateY(0);
}

.cookie-consent-banner p {
margin: 0;
font-size: 0.9rem;
}

.cookie-consent-banner a {
color: var(--cookie-link-color);
text-decoration: underline;
}

.cookie-consent-button {
background-color: var(--cookie-button-bg);
color: var(--cookie-button-text-color);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
flex-shrink: 0;
}

3. Add the JavaScript:

Place this script just before your closing </body> tag, after the banner's HTML.

<script>
document.addEventListener('DOMContentLoaded', () => {
const consentBanner = document.getElementById('cookie-consent-banner');
const acceptButton = document.getElementById('cookie-consent-accept');

// Check if the user has already consented
if (!localStorage.getItem('cookie_consent')) {
    setTimeout(() => {
        consentBanner.classList.add('active');
    }, 1000);
}

// Add event listener to the accept button
acceptButton.addEventListener('click', () => {
    localStorage.setItem('cookie_consent', 'true');
    consentBanner.classList.remove('active');
});
});