Tools

Cookie Consent Generator

Web & SEO

Generate a consent banner snippet

This banner is a UI component, not compliance in itself. Real consent means your analytics and marketing scripts must stay OUT of the page until the visitor actually opts in — check window.cookieConsent.hasConsent("analytics") before loading them. This tool does not claim GDPR, CCPA or any other compliance on its own; that depends on how you wire it up.

Position

Background

Text

Accent

Message

Reject

Preferences

Categories

Preview

We use cookies to run this site and, with your permission, for analytics and marketing. Choose which categories you're OK with.

Necessary (required)AnalyticsMarketingPreferences

Accept allReject non-essentialSave preferences

Snippet

<!-- Cookie consent banner: self-contained, no external dependency.
     Stores the visitor's choice in localStorage under "cookieConsent" and
     exposes window.cookieConsent for your own scripts to check before firing.
     This banner is a UI component only — it does not withhold any script by
     itself. You must gate your analytics/marketing tags behind
     window.cookieConsent.hasConsent("analytics") etc. yourself, and it makes
     no claim of GDPR/CCPA compliance on its own. -->
<div id="cc-banner" style="position:fixed;bottom:0;left:0;right:0;z-index:999999;background:#1a1a1a;color:#ffffff;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 -2px 12px rgba(0,0,0,0.15);display:none;">
  <div style="padding:16px;max-width:960px;margin:0 auto;">
    <p style="margin:0 0 12px;font-size:14px;line-height:1.5;">We use cookies to run this site and, with your permission, for analytics and marketing. Choose which categories you're OK with.</p>
    <div class="cc-categories" style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;font-size:13px;">
      <label class="cc-cat cc-cat-locked">
          <input type="checkbox" data-cat="necessary" checked disabled />
          <span>Necessary (required)</span>
        </label>
        <label class="cc-cat">
          <input type="checkbox" data-cat="analytics"  />
          <span>Analytics</span>
        </label>
        <label class="cc-cat">
          <input type="checkbox" data-cat="marketing"  />
          <span>Marketing</span>
        </label>
        <label class="cc-cat">
          <input type="checkbox" data-cat="preferences"  />
          <span>Preferences</span>
        </label>
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
      <button id="cc-accept" style="background:#2563eb;color:#fff;border:0;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;">Accept all</button>
      <button id="cc-reject" style="background:transparent;color:#ffffff;border:1px solid #ffffff;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;">Reject non-essential</button>
      <button id="cc-save" style="background:transparent;color:#ffffff;border:1px solid #ffffff;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;">Save preferences</button>
      <a href="/privacy" style="color:#ffffff;font-size:12px;text-decoration:underline;margin-left:auto;">Privacy policy</a>
    </div>
  </div>
</div>
<script>
(function () {
  var STORAGE_KEY = "cookieConsent";
  var CATEGORY_IDS = ["necessary","analytics","marketing","preferences"];
  var DEFAULTS = {"necessary":true,"analytics":false,"marketing":false,"preferences":false};

  function readChoice() {
    try {
      var raw = localStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : null;
    } catch (e) {
      return null;
    }
  }

  function writeChoice(choice) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(choice));
    } catch (e) {}
    window.cookieConsent.choice = choice;
    document.dispatchEvent(new CustomEvent("cookieConsentChanged", { detail: choice }));
  }

  window.cookieConsent = {
    choice: readChoice() || DEFAULTS,
    hasConsent: function (category) {
      return !!(window.cookieConsent.choice && window.cookieConsent.choice[category]);
    },
    setConsent: function (partial) {
      var next = Object.assign({}, window.cookieConsent.choice, partial);
      writeChoice(next);
    },
  };

  document.addEventListener("DOMContentLoaded", function () {
    var banner = document.getElementById("cc-banner");
    var existing = readChoice();
    if (!existing) {
      banner.style.display = "block";
    }

    document.getElementById("cc-accept").addEventListener("click", function () {
      var all = {};
      CATEGORY_IDS.forEach(function (id) { all[id] = true; });
      writeChoice(all);
      banner.style.display = "none";
    });

    document.getElementById("cc-reject").addEventListener("click", function () {
      writeChoice(Object.assign({}, DEFAULTS));
      banner.style.display = "none";
    });

    document.getElementById("cc-save").addEventListener("click", function () {
      var picked = Object.assign({}, DEFAULTS);
      banner.querySelectorAll("input[data-cat]").forEach(function (input) {
        picked[input.getAttribute("data-cat")] = input.checked;
      });
      writeChoice(picked);
      banner.style.display = "none";
    });
  });
})();
</script>