Cookie Consent Generator

LOCAL · Browser-Only

Generate cookie consent banners and compliance code

Banner Position

Color Theme

Background

Text

Button

Button Text

Border Radius12px

Banner Text

Title

Description

Accept All

Selected

Reject All

Cookie Categories

Necessary(Always included)

Essential cookies required for the website to function properly

Functional

Cookies that enable enhanced functionality like live chat, videos, and personalization

Analytics

Cookies that help us understand how visitors interact with our website

Marketing

Cookies used for advertising, retargeting, and tracking across websites

Preferences

Cookies that remember your settings like language and region

Social Media

Cookies set by social media platforms for sharing and embedded content

Compliance

Regulation

GDPRePrivacy Directive

Cookie Expiry (days)

Reopen button

Live Preview

Website content preview

Cookie Settings

We use cookies to enhance your browsing experience, serve personalized content, ...

🍪

Click "Customize" in the preview to toggle the preference center

Generated Code

<!-- Cookie Consent Banner -->
<div id="cookie-consent-banner" class="cookie-consent-banner" role="region" aria-label="Cookie consent" aria-labelledby="cookie-consent-title">
  <div class="cookie-consent-content">
    <div class="cookie-consent-header">
      <h3 id="cookie-consent-title">Cookie Settings</h3>
      <p id="cookie-consent-desc">We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. Please select your cookie preferences below.</p>
    </div>
    <div class="cookie-consent-categories" role="group" aria-label="Cookie preferences">
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-necessary" data-category="necessary" checked disabled />
      <label for="cc-necessary">
        <strong>Necessary (Required)</strong>
        <span>Essential cookies required for the website to function properly</span>
      </label>
    </div>
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-functional" data-category="functional" />
      <label for="cc-functional">
        <strong>Functional</strong>
        <span>Cookies that enable enhanced functionality like live chat, videos, and personalization</span>
      </label>
    </div>
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-analytics" data-category="analytics" />
      <label for="cc-analytics">
        <strong>Analytics</strong>
        <span>Cookies that help us understand how visitors interact with our website</span>
      </label>
    </div>
    </div>
    <div class="cookie-consent-actions">
      <button type="button" onclick="acceptAllCookies()" class="cookie-consent-btn cookie-consent-btn-accept">Accept All</button>
      <button type="button" onclick="acceptSelectedCookies()" class="cookie-consent-btn cookie-consent-btn-selected">Accept Selected</button>
      <button type="button" onclick="rejectCookies()" class="cookie-consent-btn cookie-consent-btn-reject">Reject All</button>
    </div>
  </div>
</div>
<button type="button" id="cookie-consent-reopen" class="cookie-consent-reopen" onclick="reopenCookieBanner()" aria-label="Open cookie settings" title="Cookie settings">🍪</button>

<style>
.cookie-consent-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;display:none;}
.cookie-consent-content{background:#1f2937;color:#f9fafb;padding:24px;box-shadow:0 -2px 20px rgba(0,0,0,0.15);}
.cookie-consent-header h3{margin:0;font-size:18px;font-weight:700;}
.cookie-consent-header p{margin:8px 0 0;font-size:14px;opacity:0.85;line-height:1.5;}
.cookie-consent-categories{margin:16px 0;font-size:13px;}
.cookie-consent-category{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f9fafb15;}
.cookie-consent-category:last-child{border-bottom:none;}
.cookie-consent-category input[type="checkbox"]{margin-top:3px;accent-color:#6366f1;width:16px;height:16px;cursor:pointer;}
.cookie-consent-category label{cursor:pointer;flex:1;}
.cookie-consent-category strong{display:block;font-size:13px;}
.cookie-consent-category span{display:block;font-size:12px;opacity:0.7;margin-top:2px;}
.cookie-consent-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.cookie-consent-btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:opacity 0.2s;}
.cookie-consent-btn:hover{opacity:0.88;}
.cookie-consent-btn-accept{background:#6366f1;color:#ffffff;}
.cookie-consent-btn-selected{background:transparent;color:#f9fafb;border:1px solid #f9fafb40;}
.cookie-consent-btn-reject{background:transparent;color:#f9fafb;opacity:0.7;}
.cookie-consent-footer{margin-top:12px;font-size:12px;opacity:0.6;}
.cookie-consent-footer a{color:#f9fafb;text-decoration:underline;}
.cookie-consent-link{background:none;border:none;padding:0;font:inherit;color:#f9fafb;text-decoration:underline;cursor:pointer;}
.cookie-consent-btn:focus-visible,.cookie-consent-link:focus-visible,.cookie-consent-category input:focus-visible,.cookie-consent-reopen:focus-visible{outline:2px solid #6366f1;outline-offset:2px;}
.cookie-consent-reopen{position:fixed;bottom:16px;right:16px;z-index:9998;background:#1f2937;color:#f9fafb;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:none;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.2);transition:transform 0.2s;}
.cookie-consent-reopen:hover{transform:scale(1.1);}
</style>

<script>
(function() {
  'use strict';
  var COOKIE_NAME = 'cookie_consent';
  var COOKIE_DAYS = 365;
  var CATEGORIES = ['necessary', 'functional', 'analytics'];
  var GDPR_COMPLIANT = true;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax;Secure';
  }

  var lastFocused = null;

  function getFocusable(banner) {
    return Array.prototype.slice.call(
      banner.querySelectorAll('button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])')
    );
  }

  function trapFocus(e) {
    var banner = document.getElementById('cookie-consent-banner');
    if (!banner || banner.style.display === 'none') return;
    if (e.key === 'Tab') {
      var f = getFocusable(banner);
      if (!f.length) return;
      var first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (!banner) return;
    lastFocused = document.activeElement;
    banner.style.display = 'block';
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'none';
    // Move focus into the banner for keyboard/screen-reader users.
    var focusable = getFocusable(banner);
    if (focusable.length) focusable[0].focus();
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'flex';
    // Restore focus to where it was before the banner opened.
    if (lastFocused && typeof lastFocused.focus === 'function') {
      lastFocused.focus();
      lastFocused = null;
    }
  }

  function saveConsent(consent) {
    var data = {
      consent: consent,
      timestamp: new Date().toISOString(),
      version: '1.0'
    };
    var serialized = JSON.stringify(data);
    setCookie(COOKIE_NAME, serialized, COOKIE_DAYS);
    // Also store a consent record in localStorage for audit/retrieval.
    try { localStorage.setItem(COOKIE_NAME, serialized); } catch (e) {}
    hideBanner();
    onConsentUpdate(consent);
  }

  function getStoredConsent() {
    var raw = getCookie(COOKIE_NAME);
    if (!raw) { try { raw = localStorage.getItem(COOKIE_NAME); } catch (e) {} }
    if (!raw) return null;
    try {
      var data = JSON.parse(raw);
      return data && data.consent ? data.consent : data;
    } catch (e) { return null; }
  }

  window.acceptAllCookies = function() {
    var consent = {};
    CATEGORIES.forEach(function(cat) { consent[cat] = true; });
    saveConsent(consent);
  };

  window.acceptSelectedCookies = function() {
    var consent = { necessary: true };
    var checkboxes = document.querySelectorAll('#cookie-consent-banner input[data-category]');
    checkboxes.forEach(function(cb) {
      consent[cb.getAttribute('data-category')] = cb.checked;
    });
    saveConsent(consent);
  };

  window.rejectCookies = function() {
    var consent = { necessary: true };
    CATEGORIES.forEach(function(cat) {
      if (cat !== 'necessary') consent[cat] = false;
    });
    saveConsent(consent);
  };

  function syncCheckboxes() {
    var consent = getStoredConsent();
    if (!consent) return;
    var checkboxes = document.querySelectorAll('#cookie-consent-banner input[data-category]');
    checkboxes.forEach(function(cb) {
      var cat = cb.getAttribute('data-category');
      if (cat !== 'necessary') cb.checked = !!consent[cat];
    });
  }

  window.reopenCookieBanner = function() {
    syncCheckboxes();
    showBanner();
  };

  function onConsentUpdate(consent) {
    window.dispatchEvent(new CustomEvent('cookieConsentUpdate', { detail: consent }));
    if (typeof GDPR_COMPLIANT !== 'undefined') {
      console.log('[Cookie Consent] GDPR-compliant consent recorded:', consent);
    }
  }

  // Public API: query consent and register callbacks from your own code.
  window.CookieConsent = {
    getConsent: getStoredConsent,
    hasConsent: function(category) {
      var c = getStoredConsent();
      return !!(c && c[category]);
    },
    show: function() { syncCheckboxes(); showBanner(); },
    acceptAll: function() { window.acceptAllCookies(); },
    reject: function() { window.rejectCookies(); },
    onUpdate: function(cb) {
      window.addEventListener('cookieConsentUpdate', function(e) { cb(e.detail); });
    }
  };

  function init() {
    // Check for existing consent on page load.
    var existing = getStoredConsent();
    if (!existing) {
      showBanner();
    } else {
      var reopen = document.getElementById('cookie-consent-reopen');
      if (reopen) reopen.style.display = 'flex';
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

Compliance Notes

GDPR Requirements

Prior consent required before setting non-essential cookies
Users must be able to withdraw consent at any time
Consent must be freely given, specific, informed, and unambiguous
Pre-ticked checkboxes are not valid consent
Consent records should be stored for audit purposes

·Share recipe

Was this tool helpful?

What is Cookie Consent Generator?

Free online cookie consent generator to generate GDPR and ePrivacy-compliant cookie consent banners for your website.

Get copy-paste cookie banner HTML, CSS, and JavaScript with no external library required. Choose from multiple banner styles (bottom bar, modal, corner popup), configure cookie categories (necessary, analytics, marketing), and customize colors to match your site. The generated banner handles consent storage and respects user choices, and works on plain HTML, WordPress, or any framework. The code is built locally in your browser. No signup required.

How to Use Cookie Consent Generator

1Choose a banner style (bar, modal, or corner popup)
2Configure cookie categories and descriptions
3Customize colors to match your website design
4Copy the HTML/CSS/JS code and add it to your site

Frequently Asked Questions

Do I need a cookie consent banner?

If your website uses cookies and serves users in the EU (GDPR) or California (CCPA), you likely need a cookie consent mechanism. Even outside these regions, it's considered best practice.

What cookie categories are included?

Necessary (always active), Analytics (Google Analytics, etc.), Marketing (ad tracking), and Preferences (language, theme). Users can accept all, reject non-essential, or customize their choices.

How is consent stored?

The generated code stores consent in a cookie itself (ironic but standard). It checks for existing consent on each page load and only fires tracking scripts after the user accepts the relevant category.

Do I need an external library to use the banner?

No. The generator outputs self-contained HTML, CSS, and JavaScript. Paste it into your page and the banner works on a static site, plain HTML, or any framework without loading a third-party script.

How do I add the cookie banner to my website?

Copy the generated code and paste it before the closing body tag of your pages, or add it through your site template. The banner shows on first visit, records the choice, and stays hidden on return visits until consent is reset.

Share this tool

Related Tools

SEO

Twitter card generator

Free online meta tag generator - generate SEO meta tags, Open Graph, and Twitter Card markup for your website

🛡️

Privacy Policy Generator

Free online privacy policy generator - generate GDPR-compliant privacy policies for websites

Email signature maker

Free online email signature generator - create professional HTML email signatures with live preview

🗺️

Create xml sitemap

Free online XML sitemap generator - generate XML sitemaps from a list of URLs

Qr code maker

QR code generator free - create QR codes from URLs or text with no watermark, no signup required

JavaScript Minifier

Free online javascript minifier - minify JavaScript code to reduce file size and improve load times

TMR

Pomodoro Timer

Free online pomodoro timer - stay focused with a customizable work/break timer using the Pomodoro technique

🔬

Trig calculator

Scientific calculator online - trig, logarithms, powers, roots, factorials, and expression parser

Keep reading: TypeScript Cheat Sheet and html entities reference. Doing this in code instead? See the utility endpoints.