Cookie Consent Banner Generator

Cookie-Einwilligungsbanner aus einem kurzen Fragebogen – kostenlos, privat und bearbeitbar

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

Vorlage, keine Rechtsberatung. This generates working code, not legal advice. It gives you a compliant mechanism; whether your site is compliant also depends on what you connect to it. Two things it cannot do for you: tag every third-party script so the blocker can hold it back, and keep a record of consents if your regulator expects one. Test it with your browser developer tools open - if a tracking cookie appears before you click Accept, something is still loading outside the blocker.

Mit einem Beispiel starten

Füllt jede Antwort mit einem durchgerechneten Beispiel, das du bearbeiten kannst. Nimm das, das deinem Geschäft am nächsten kommt.

0 of 3 details filled
Your site
Which consent model

Opt-in is required in the UK and EU. If you have any European visitors at all, choose it.

Opt-in is required in the UK and EU. If you have any European visitors at all, choose it.
Erscheinungsbild
Recommended. A single Accept-or-Reject is legal but converts worse than letting people keep analytics on and turn advertising off.
Signals and behaviour
Needed if you use Google Analytics or Google Ads and have EEA or UK visitors. Without it Google stops modelling data for those users.
Required in California and several other US states. The browser sends it automatically; this treats it as a rejection.
Consent has to be as easy to withdraw as it was to give, so there must be a way back to this after the banner is gone.

Cookie Consent Banner

5 sections · 1111 words · updates as you type

Cookie Consent Banner

Last updated: 19 September 2026

Paste this into your site

<!-- Cookie consent banner. Put the <style> and <script> in <head>,
     and the markup just before </body>. -->
<style>
#cc-banner{position:fixed;z-index:2147483000;right:16px;bottom:16px;max-width:420px;width:calc(100% - 32px);
  box-sizing:border-box;padding:20px;background:#fff;color:#0f172a;border:1px solid #e2e8f0;
  border-radius:14px;box-shadow:0 10px 40px rgba(2,6,23,.18);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#cc-banner h2{margin:0 0 8px;font-size:1rem;font-weight:650}
#cc-banner p{margin:0 0 14px;color:#475569}
#cc-banner a{color:#4f46e5;text-decoration:underline}
#cc-actions{display:flex;gap:10px;flex-wrap:wrap}
#cc-banner button{flex:1 1 auto;min-width:120px;padding:11px 16px;border-radius:9px;
  font:inherit;font-weight:600;cursor:pointer;border:1px solid #4f46e5}
#cc-accept{background:#4f46e5;color:#fff}
#cc-reject{background:transparent;color:#4f46e5}
#cc-prefs{flex:0 0 auto;min-width:0;background:transparent;color:#475569;border-color:transparent;text-decoration:underline}
#cc-banner button:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}
#cc-options{display:none;margin:0 0 14px;padding:12px 0 0;border-top:1px solid #e2e8f0}
#cc-options.cc-open{display:block}
#cc-options label{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;cursor:pointer}
#cc-options input{margin-top:3px;width:18px;height:18px;accent-color:#4f46e5}
#cc-options small{display:block;color:#64748b}
#cc-reopen{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (prefers-color-scheme:dark){
  #cc-banner{background:#0f172a;color:#e2e8f0;border-color:#1e293b}
  #cc-banner p{color:#94a3b8}
  #cc-prefs{color:#94a3b8}
  #cc-options{border-top-color:#1e293b}#cc-options small{color:#94a3b8}
}
@media (prefers-reduced-motion:reduce){#cc-banner{transition:none}}
</style>

<div id="cc-banner" role="dialog" aria-modal="false" aria-labelledby="cc-title" aria-describedby="cc-desc" hidden>
  <h2 id="cc-title">Cookies on this site</h2>
  <p id="cc-desc">We use cookies to run this site and, with your permission, to understand how it is used.
    Nothing optional is set until you choose.
    <a href="/cookie-policy">Read our cookie policy</a>.</p>
  <div id="cc-options">
    <label><input type="checkbox" checked disabled>
      <span>Essential<small>Needed for the site to work. Always on.</small></span></label>
    <label><input type="checkbox" id="cc-analytics">
      <span>Analytics<small>Counts visits so we can see what is used.</small></span></label>
    <label><input type="checkbox" id="cc-marketing">
      <span>Marketing<small>Measures advertising and allows targeted ads.</small></span></label>
  </div>
  <div id="cc-actions">
    <button type="button" id="cc-accept">Accept all</button>
    <button type="button" id="cc-reject">Reject all</button>
    <button type="button" id="cc-prefs">Choose</button>
  </div>
</div>

<script>
(function () {
  var KEY = "cc-consent-v1";
  var el = function (id) { return document.getElementById(id); };
  var banner = el("cc-banner");

  function read() {
    try { return JSON.parse(localStorage.getItem(KEY) || "null"); } catch (e) { return null; }
  }
  function write(state) {
    try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {}
  }

  // Google Consent Mode v2. Must run BEFORE the Google tag loads,
  // which is why this snippet goes in the head.
  window.dataLayer = window.dataLayer || [];
  function gtag() { window.dataLayer.push(arguments); }
  function signal(state) {
    gtag("consent", "update", {
      analytics_storage: state.analytics ? "granted" : "denied",
      ad_storage: state.marketing ? "granted" : "denied",
      ad_user_data: state.marketing ? "granted" : "denied",
      ad_personalization: state.marketing ? "granted" : "denied"
    });
  }
  gtag("consent", "default", {
    analytics_storage: "denied",
    ad_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500
  });

  // Turns every blocked script tag of a granted category into a real one.
  // Scripts are written as: <script type="text/plain" data-consent="analytics" src="...">
  function unblock(state) {
    var nodes = document.querySelectorAll("script[type='text/plain'][data-consent]");
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      var want = node.getAttribute("data-consent");
      if (!state[want]) continue;
      var live = document.createElement("script");
      for (var j = 0; j < node.attributes.length; j++) {
        var at = node.attributes[j];
        if (at.name !== "type" && at.name !== "data-consent") live.setAttribute(at.name, at.value);
      }
      live.text = node.text;
      node.parentNode.replaceChild(live, node);
    }
  }

  function apply(state) {
    write(state);
    signal(state);
    unblock(state);
    document.dispatchEvent(new CustomEvent("cc:consent", { detail: state }));
    hide();
  }

  function show() {
    banner.hidden = false;
    banner.querySelector("button").focus();
  }
  function hide() {
    banner.hidden = true;
  }

  el("cc-accept").addEventListener("click", function () {
    apply({ essential: true, analytics: true, marketing: true, at: Date.now() });
  });
  el("cc-reject").addEventListener("click", function () {
    apply({ essential: true, analytics: false, marketing: false, at: Date.now() });
  });
  el("cc-prefs").addEventListener("click", function () {
    var panel = el("cc-options");
    if (!panel.classList.contains("cc-open")) {
      panel.classList.add("cc-open");
      this.textContent = "Save choices";
      return;
    }
    apply({
      essential: true,
      analytics: el("cc-analytics").checked,
      marketing: el("cc-marketing").checked,
      at: Date.now()
    });
  });

  // Withdrawing consent has to be as easy as giving it, so this
  // reopens the banner from anywhere: <button id="cc-reopen">Cookie settings</button>
  var reopen = el("cc-reopen");
  if (reopen) reopen.addEventListener("click", show);

  var saved = read();
  // Global Privacy Control: a browser-level opt-out that US state law
  // requires you to honour. Treated as a rejection, recorded so the
  // banner does not then ask a question it has already answered.
  if (!saved && (navigator.globalPrivacyControl === true)) {
    apply({ essential: true, analytics: false, marketing: false, gpc: true, at: Date.now() });
    return;
  }
  if (saved) {
    signal(saved);
    unblock(saved);
    if (el("cc-analytics")) el("cc-analytics").checked = !!saved.analytics;
    if (el("cc-marketing")) el("cc-marketing").checked = !!saved.marketing;
  } else {
    show();
  }
})();
</script>

How to install it

1. Copy the block above into your page. The style and script can go in the head; the markup goes just before the closing body tag. On WordPress, a "header and footer scripts" plugin is the usual place; on Shopify it is theme.liquid.

2. Find every tracking script on your site - analytics, pixels, chat widgets, heatmaps.

3. Change each one from type="text/javascript" to type="text/plain" and add data-consent="analytics" or data-consent="marketing". That is what holds them back until someone agrees; a script you forget to tag will keep loading regardless of what the banner says.

4. Leave the Google tag itself in place and untagged. Consent Mode signals handle it: the tag loads, but it stores nothing until the consent update grants it.

5. Add a button with id="cc-reopen" to your footer, labelled something like "Cookie settings". Consent must be as easy to withdraw as it was to give, and that button is how.

6. Test it. Open a private window with developer tools on the Application tab, load the site, and look at Cookies before you click anything. If a tracker has already written one, it is not tagged properly.

What a blocked script looks like

<!-- BEFORE - runs immediately, sets cookies before anyone agrees -->
<script src="https://example-analytics.com/tag.js"></script>

<!-- AFTER - held back until consent for its category exists -->
<script type="text/plain" data-consent="analytics"
        src="https://example-analytics.com/tag.js"></script>

<!-- Inline scripts work the same way -->
<script type="text/plain" data-consent="marketing">
  /* pixel code here */
</script>

Reacting to a choice in your own code

// Fires every time a decision is made or restored on load.
document.addEventListener("cc:consent", function (e) {
  if (e.detail.analytics) {
    // start something that needs analytics consent
  }
});

// Read the stored decision anywhere:
var consent = JSON.parse(localStorage.getItem("cc-consent-v1") || "null");

What this banner does and does not do

What it does

  • Sets nothing before a choice. Tagged scripts stay inert until someone accepts, which is what the UK and EU rules require and what most free snippets get wrong.
  • Gives Reject the same weight as Accept. Same size, same prominence, one click. A greyed-out or hidden reject option is a dark pattern that has attracted fines.
  • Remembers the decision in localStorage under a versioned key, so changing the key re-asks everyone when your cookies change.
  • Works with a keyboard and a screen reader. It is a labelled dialog, focus moves into it, and the controls are real buttons.
  • Honours Global Privacy Control. Browsers that send the signal are treated as having rejected, without being asked - which is what California and several other states require.
  • Sends Google Consent Mode v2 signals , so Google Analytics and Google Ads behave correctly for EEA and UK visitors instead of silently dropping them.

What it does not do

  • It does not keep a server-side record of who consented and when. If your regulator or your DPO expects an audit trail, you need to post the decision to your own endpoint - the cc:consent event is where to do it.
  • It does not scan your site for trackers. Anything you do not tag keeps loading.
  • It does not write your cookie policy. The banner links to it; you still need the page.

Aus einem Template erzeugt. Keine Rechtsberatung - lies es, bevor du es veröffentlichst oder unterschreibst.

Andere Dokumente, die du erzeugen kannst

Die meisten Sites brauchen mehr als eines. Eine Datenschutzerklärung ohne AGB oder AGB ohne Rückerstattungsrichtlinie lässt die offensichtliche Lücke.

Privacy PolicyA privacy policy written from what your site actually does - GDPR and CCPA sections included only where they apply.Terms and ConditionsTerms of service built around what you actually sell - goods, subscription, downloads or services.Cookie PolicyA cookie policy with a real table - each cookie named, with its purpose and how long it lasts.Refund and Return PolicyA refund policy customers can follow and payment processors accept - windows, exclusions and statutory rights in plain words.Website DisclaimerA disclaimer that names the actual risk your site carries, plus affiliate and sponsorship disclosures.Accessibility StatementA WCAG accessibility statement that states what you actually meet, names known issues, and gives people a route to report problems.Non-Disclosure AgreementA mutual or one-way NDA with a real purpose clause, standard carve-outs and a defined term.Freelance ContractAn independent contractor agreement that pins down scope, revisions, IP ownership and what happens when payment is late.Data Processing AgreementA GDPR Article 28 processor agreement with the eight mandatory clauses and a filled-in processing schedule.W-9 FormFills a substitute Form W-9 in your browser - your TIN is never uploaded, stored or sent anywhere.1099-NEC Contractor SummaryPrepares a 1099-NEC recipient statement and a payer summary - with a straight answer about what you can and cannot print yourself.Shipping PolicyA shipping policy Shopify and Amazon sellers can publish - origin, times, tracking, duties and who pays.DSAR Form GeneratorA data-delete and access request page you can host - GDPR and CCPA wording, no upload, no signup.

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Beantworte ein paar Fragen und das Banner schreibt sich selbst. Es ist für Entwicklerinnen und Seitenbetreiber, die einen funktionierenden Einwilligungsmechanismus brauchen statt einer weiteren Richtlinienseite, und am selben Tag, an dem du Analyse oder ein Werbe-Pixel hinzufügst, nicht danach, sind zwanzig Minuten gut investiert. Das ist das einzige Tool im Set, das Code statt Prosa ausgibt, weil eine Cookie-Richtlinie beschreibt, was du setzt, während ein Banner das ist, was dich am Setzen hindert. Die meisten kostenlosen Snippets setzen das Cookie zuerst und zeigen den Hinweis danach – genau das Verhalten, das die ePrivacy-Richtlinie verbietet. Der Fragebogen ist keine Dekoration. Klauseln erscheinen und verschwinden je nach dem, was du angibst, deshalb bekommen zwei Leute auf dieser Seite inhaltlich andere Banner, nicht denselben Text mit anderem Namen oben. Alles läuft in deinem Browser. Was du tippst, wird nie hochgeladen, nie gespeichert und ist weg, wenn du den Tab schließt – das zählt hier mehr als bei den meisten Tools, weil diese Dokumente Firmendaten, Kundennamen und manchmal Steuernummern tragen.

So verwendest du dieses Tool

  1. Beantworte die FragenSeitenname. Link zu deiner Cookie-Richtlinie. Welches Einwilligungsmodell brauchst du?. Nichts, was du tippst, verlässt den Browser.
  2. Sieh zu, wie es sich zusammenbautKlauseln erscheinen und verschwinden, während du antwortest, damit das Banner zu dem passt, was du wirklich tust, statt zu einer generischen Vorlage.
  3. Kopieren oder herunterladenKopiere den Code oder lade die HTML-Datei herunter und füge sie in deine Seite ein.

Warum es nutzen

  • Gibt funktionierenden Code zum Einfügen aus, keine Anleitung, die du selbst umsetzen musst.
  • Aus deinen Antworten gebaut, sodass Klauseln, die du nicht brauchst, weggelassen statt aufgefüllt werden.
  • Kostenlos ohne Wasserzeichen, ohne E-Mail-Hürde und ohne Limit pro Dokument.
  • Sagt klar, was es ist und was nicht, über der Vorschau statt in einer Fußzeile.
  • Läuft vollständig in deinem Browser. Nichts hochgeladen, nichts gespeichert, kein Konto.

Häufige Anwendungen

  • Ein kopiertes Banner ersetzen, das ein anderes Unternehmen beschreibt.
  • Einer Anwältin einen Entwurf zur Prüfung geben, statt sie bei null anfangen zu lassen.
  • Entwicklerinnen und Seitenbetreiber, die einen funktionierenden Einwilligungsmechanismus brauchen statt einer weiteren Richtlinienseite.
  • Etwas am selben Tag in Stellung bringen, an dem du Analyse oder ein Werbe-Pixel hinzufügst, nicht danach.
  • Vorbereiten, was eine Kundin, ein App Store oder ein Zahlungsanbieter sehen will.

Tipps für bessere Ergebnisse

  • Füll die Freitextfelder aus statt sie zu überspringen. Die benannten Listen - Auftragsverarbeiter, Ausschlüsse, Liefergegenstände - machen, dass es nach dir klingt statt nach einer Kopie.
  • Das Banner einbauen und die Tracking-Skripte unangetastet lassen. Das Banner blockiert allein nichts - jedes Skript muss neu markiert werden, damit der Blocker es zurückhalten kann, und ein unmarkiertes Pixel feuert weiter, während das Banner höflich um Erlaubnis bittet.
  • Teste mit offenen Entwicklertools. Wenn ein Tracking-Cookie erscheint, bevor du auf Akzeptieren klickst, lädt ein Skript noch außerhalb des Blockers.
  • Lies es, bevor du es veröffentlichst. Es ist ein Entwurf aus Standardklauseln, und nur du weißt, ob jede Zeile auf dich zutrifft.

Fehler, die du vermeiden solltest

  • Das Banner einbauen und die Tracking-Skripte unangetastet lassen. Das Banner blockiert allein nichts - jedes Skript muss neu markiert werden, damit der Blocker es zurückhalten kann, und ein unmarkiertes Pixel feuert weiter, während das Banner höflich um Erlaubnis bittet.
  • Veröffentlichen und nie wieder hinschauen. Die werden alt – du fügst ein Tool hinzu, wechselst einen Auftragsverarbeitenden, verkaufst woanders, und das Banner beschreibt noch letztes Jahr.
  • Einen erzeugten Entwurf wie einen geprüften behandeln. Das ist ein Ausgangspunkt, und wo es ernst wird, lohnt sich ein professionelles Gegenlesen.
  • Den Platzhaltertext stehen lassen. Alles in eckigen Klammern ist ein Feld, das du übersprungen hast, und Leserinnen merken das sofort.

Häufig gestellte Fragen

Beantworte die Fragen links. Das Banner entsteht, während du tippst, und du kannst es kopieren oder als PDF, Word oder Klartext herunterladen, wenn es stimmt.

Nein. Es setzt einen Entwurf aus Standardklauseln zusammen, und jede Seite sagt das über der Vorschau. Die größten EU-Cookie-Bußgelder galten nicht fehlenden Bannern. Sie galten Bannern, bei denen Ablehnen schwerer war als Zustimmen, oder bei denen Tracker unabhängig von der Antwort liefen.

Nein. Alles passiert auf deinem Gerät - nichts geht an einen Server, nichts wird gespeichert, und das Schließen des Tabs löscht es.

Das Banner einbauen und die Tracking-Skripte unangetastet lassen. Das Banner blockiert allein nichts - jedes Skript muss neu markiert werden, damit der Blocker es zurückhalten kann, und ein unmarkiertes Pixel feuert weiter, während das Banner höflich um Erlaubnis bittet.

Ja. Lade die Word-Version herunter und ändere, was du willst - es ist ein normales .docx ohne Schutz.

Die meisten brauchen zusätzlich Cookie-Richtlinie und Datenschutzerklärung. Die decken die Lücken, die dieses Dokument offen lässt.

Im Großen und Ganzen Entwicklerinnen und Seitenbetreiber, die einen funktionierenden Einwilligungsmechanismus brauchen statt einer weiteren Richtlinienseite. Der beste Zeitpunkt ist am selben Tag, an dem du Analyse oder ein Werbe-Pixel hinzufügst, nicht danach.

Andere suchen auch nach

  • cookie einwilligungsbanner generator ohne anmeldung
  • cookie einwilligungsbanner generator kleinunternehmen
  • cookie einwilligungsbanner generator usa
  • cookie einwilligungsbanner generator uk
  • cookie einwilligungsbanner generator kostenlos
  • cookie einwilligungsbanner generator vorlage
  • cookie einwilligungsbanner generator

Related guides