Cookie Consent Banner 🍪

A lightweight, drop-in GDPR cookie consent banner. Add one script tag to your site and you're sorted.

No dependencies. No build step. No tracking. Just a banner that does what it needs to do.

Quick Start

Add this before your closing </body> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Hand-On-Web-Ltd/cookie-consent-banner/cookie-consent.css">
<script src="https://cdn.jsdelivr.net/gh/Hand-On-Web-Ltd/cookie-consent-banner/cookie-consent.js"></script>
<script>
  CookieConsent.init({
    message: "We use cookies to make this site work and to improve your experience.",
    policyUrl: "/privacy-policy",
    expiry: 365
  });
</script>

That's it.

What It Does

• Shows a banner on first visit
• Saves the user's choice in a cookie (the irony isn't lost on us)
• Doesn't show again after they accept or reject
• Fires a callback so you can enable/disable your tracking scripts

Options

CookieConsent.init({
  message: "Your cookie message here",       // Banner text
  policyUrl: "/privacy",                      // Link to your cookie policy
  policyText: "Cookie Policy",                // Link text
  acceptText: "Accept",                       // Accept button text
  rejectText: "Reject",                       // Reject button text
  expiry: 365,                                // Days until consent expires
  position: "bottom",                         // "bottom" or "top"
  theme: "light",                             // "light" or "dark"
  onAccept: function() {                      // Called when user accepts
    // Enable your analytics here
  },
  onReject: function() {                      // Called when user rejects
    // Disable tracking here
  }
});

Check Consent Status

if (CookieConsent.hasConsented()) {
  // User accepted cookies
}

if (CookieConsent.hasRejected()) {
  // User rejected cookies
}

Styling

Override the CSS variables to match your brand:

.cc-banner {
  --cc-bg: #1e293b;
  --cc-text: #f1f5f9;
  --cc-btn-accept-bg: #22c55e;
  --cc-btn-reject-bg: transparent;
  --cc-btn-reject-border: #64748b;
  --cc-link-color: #60a5fa;
}

npm

npm install cookie-consent-banner

GDPR Notes

This banner handles the consent UI, but you're responsible for actually respecting the user's choice. If they reject cookies, make sure you're not loading Google Analytics, Facebook Pixel, or anything else that drops cookies.

Demo

Open index.html to see it in action.

About Hand On Web

We build AI chatbots, voice agents, and automation tools for businesses.

• 🌐 handonweb.com
• 📧 [email protected]
• 📍 Chester, UK

Licence

MIT