Macht dieser Generator meine Seite allein DSGVO-konform?

Das Banner gibt dem Besucher eine klare Entscheidung zwischen Akzeptieren und Ablehnen und speichert sie. Damit ist die Anforderung an die Einwilligungs-UI erfüllt. Eine Datenschutzerklärung brauchst du trotzdem, und du musst Skripte in abgelehnten Kategorien wirklich blockieren.

Wie blockiere ich Google Analytics, bis der Besucher zustimmt?

Auf zwei Wegen. Am einfachsten aktivierst du das Kästchen Google Consent Mode v2: Das generierte Skript sendet dann gtag-Einwilligungssignale, die zunächst verweigert sind und erst nach Zustimmung zur passenden Kategorie auf gewährt umschalten. Andernfalls kapselst du das gtag-Tag selbst in eine Prüfung, die das vom Banner gesetzte Cookie liest, sodass das Skript erst nach erteilter Einwilligung eingefügt wird.

Kann ich die Texte nach dem Deploy noch ändern?

Ja. Generator mit ähnlichen Einstellungen erneut öffnen, neu generieren und die Strings im Banner-div ersetzen. Bestehende Besucher behalten ihre Wahl, weil der Cookie-Name gleich bleibt.

Was ist der Unterschied zwischen opt-in und opt-out?

Bei opt-in sind alle nicht notwendigen Kategorien zunächst aus und werden erst nach Zustimmung aktiv. Bei opt-out sind sie sofort aktiv, was CCPA erlaubt, DSGVO aber nicht. Hast du EU-Besucher, nimm opt-in.

Erscheint das Banner bei jedem Besuch neu?

Nein. Sobald der Besucher entschieden hat, hält das Cookie so lange wie die von Ihnen festgelegte Gültigkeit (standardmäßig sechs Monate). Das Banner kommt erst wieder, wenn das Cookie abläuft, gelöscht wird oder Sie die Einwilligungs-Version im JS hochzählen.

Cookie-Einwilligungs-Generator

Code für Cookie-Einwilligungsbanner generieren

Einstellungen

Banner-Stil

Banner-Text

Text der Akzeptieren-Schaltfläche

Text der Ablehnen-Schaltfläche

Text für Einstellungen verwalten

URL der Datenschutzerklärung

Linktext

Einwilligungsmodus

Cookie-Gültigkeit

Tage

NotwendigAnalyseMarketingFunktional

Google Consent Mode v2Fügt gtag-Einwilligungssignale (ad_storage, analytics_storage, ad_user_data, ad_personalization) für Google Ads und GA4 hinzu.

Farben

Farbvorlagen

Hintergrund

Text

Text der Akzeptieren-Schaltfläche

Text der Akzeptieren-Schaltfläche Text

Text der Ablehnen-Schaltfläche

Text der Ablehnen-Schaltfläche Text

Vorschau

Wir verwenden Cookies, um Ihr Erlebnis zu verbessern. Indem Sie diese Seite weiterhin besuchen, stimmen Sie der Verwendung von Cookies zu.

Ergebnis

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">Wir verwenden Cookies, um Ihr Erlebnis zu verbessern. Indem Sie diese Seite weiterhin besuchen, stimmen Sie der Verwendung von Cookies zu.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Alle akzeptieren</button>
      <button id="cc-reject-btn">Alle ablehnen</button>
      <button id="cc-manage-btn">Einstellungen verwalten</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Cookie-Einstellungen">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Cookie-Einstellungen</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Notwendig</div>
          <div class="cc-pref-desc">Erforderlich, damit die Website funktioniert. Lässt sich nicht abschalten.</div>
        </div>
        <span class="cc-pref-always">Immer aktiv</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Analyse</div>
          <div class="cc-pref-desc">Helfen uns zu verstehen, wie Besucher die Website nutzen, damit wir sie verbessern können.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Analyse"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Einstellungen speichern</button>
      <button id="cc-prefs-cancel">Abbrechen</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  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';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

Was ist Cookie-Einwilligungs-Generator?

Erstellt ein DSGVO-konformes Cookie-Einwilligungsbanner und liefert das HTML, CSS und JavaScript zum Einbinden auf Ihrer Website. Stil wählen, Cookie-Kategorien festlegen und einstellen, wie die Einwilligung gespeichert wird.

Das Ergebnis ist ein eigenständiger Code-Schnipsel: HTML für das Banner, CSS für die Optik und ein kleines JavaScript, das die Auswahl des Besuchers in einem Cookie speichert und nur Skripte der zugestimmten Kategorien lädt. Du kannst es direkt einfügen oder die drei Dateien als zip herunterladen.

Anleitung

Wählen Sie einen Banner-Stil (obere Leiste, untere Leiste, Modal oder Eck-Popup) und passen Sie Farben, Texte und Schaltflächenbeschriftungen an.
Konfigurieren Sie Cookie-Kategorien (notwendig, Analyse, Marketing, funktional), wie lange die Einwilligung gespeichert bleibt und das Einwilligungsverhalten (Opt-in vs. Opt-out).
Kopieren oder laden Sie den generierten HTML/CSS/JS-Code herunter und fuegen Sie ihn in Ihre Website ein.

Wann verwenden

Einen DSGVO-Hinweis auf eine statische Website oder Marketing-Landingpage setzen.
Eine schwerfällige Drittanbieter-CMP ersetzen, die 200 KB lädt bevor der Besucher überhaupt klickt.
Das Banner-Design durchspielen, bevor die Spezifikation an die Entwicklung geht.

Ergebnis

Ein Website-Betreiber, der einen DSGVO-konformen Blog einrichtet, waehlt einen unteren Leisten-Banner mit Alle-akzeptieren- und Einstellungen-verwalten-Schaltflaechen, aktiviert Analyse- und Marketing-Kategorien und laedt den Code-Schnipsel herunter.

Häufige Fragen

Macht dieser Generator meine Seite allein DSGVO-konform?: Das Banner gibt dem Besucher eine klare Entscheidung zwischen Akzeptieren und Ablehnen und speichert sie. Damit ist die Anforderung an die Einwilligungs-UI erfüllt. Eine Datenschutzerklärung brauchst du trotzdem, und du musst Skripte in abgelehnten Kategorien wirklich blockieren.
Wie blockiere ich Google Analytics, bis der Besucher zustimmt?: Auf zwei Wegen. Am einfachsten aktivierst du das Kästchen Google Consent Mode v2: Das generierte Skript sendet dann gtag-Einwilligungssignale, die zunächst verweigert sind und erst nach Zustimmung zur passenden Kategorie auf gewährt umschalten. Andernfalls kapselst du das gtag-Tag selbst in eine Prüfung, die das vom Banner gesetzte Cookie liest, sodass das Skript erst nach erteilter Einwilligung eingefügt wird.
Kann ich die Texte nach dem Deploy noch ändern?: Ja. Generator mit ähnlichen Einstellungen erneut öffnen, neu generieren und die Strings im Banner-div ersetzen. Bestehende Besucher behalten ihre Wahl, weil der Cookie-Name gleich bleibt.
Was ist der Unterschied zwischen opt-in und opt-out?: Bei opt-in sind alle nicht notwendigen Kategorien zunächst aus und werden erst nach Zustimmung aktiv. Bei opt-out sind sie sofort aktiv, was CCPA erlaubt, DSGVO aber nicht. Hast du EU-Besucher, nimm opt-in.
Erscheint das Banner bei jedem Besuch neu?: Nein. Sobald der Besucher entschieden hat, hält das Cookie so lange wie die von Ihnen festgelegte Gültigkeit (standardmäßig sechs Monate). Das Banner kommt erst wieder, wenn das Cookie abläuft, gelöscht wird oder Sie die Einwilligungs-Version im JS hochzählen.

Cookie-Einwilligungs-Generator

Einstellungen

Farben

Vorschau

Ergebnis

Was ist Cookie-Einwilligungs-Generator?

Anleitung

Wann verwenden

Ergebnis

Häufige Fragen

Ähnliche Tools

Generator für strukturierte Daten

Webseite als PDF

Datenschutzerklärung-Generator

AGB-Generator

CSS-Minifizierer

HTML-Minifier

Cookie-Einwilligungs-Generator

Einstellungen

Farben

Vorschau

Ergebnis