Privesy

Cookie-Banner-Generator

Stelle mit einem anpassbaren Cookie-Zustimmungsbanner sicher, dass deine Website DSGVO und ePrivacy-Richtlinien erfüllt. Nachricht konfigurieren, Code kopieren und in das HTML deiner Website einfügen.

Erstellen Sie in Minuten einen Cookie-Consent-Banner für Ihre Website. Konfigurieren Sie Text, Kategorien und Position und kopieren Sie den HTML-Code in Ihre Website.

Nachricht

Link zur Datenschutzerklärung

Link-Text

Button-Text

Position

Cookie-Kategorien

Notwendig (immer aktiv)AnalyseMarketing

(Platzhalter für Website-Inhalte)


<!-- Cookie Consent Banner by Privesy -->
<style>
  .privesy-cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1e293b; color: #f8fafc; padding: 1rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    font-family: sans-serif; z-index: 10000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  .privesy-cookie-banner a { color: #60a5fa; text-decoration: underline; }
  .privesy-cookie-banner .privesy-prefs { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.85rem; flex-wrap: wrap; }
  .privesy-cookie-banner .privesy-prefs label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
  .privesy-cookie-banner .privesy-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .privesy-cookie-banner button {
    background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem;
    border-radius: 4px; cursor: pointer; font-weight: bold;
  }
  .privesy-cookie-banner button.privesy-btn-secondary { background: transparent; border: 1px solid #64748b; font-weight: normal; }
</style>
<div id="privesy-cookie-banner" class="privesy-cookie-banner">
  <div>
    We use cookies to improve your experience.
    <a href="https://example.com/privacy" target="_blank" rel="noopener">Learn more</a>
    <div class="privesy-prefs">
      <label><input type="checkbox" checked disabled> Notwendig</label>
      <label><input type="checkbox" id="privesy-analytics" checked> Analyse</label>
      <label><input type="checkbox" id="privesy-marketing"> Marketing</label>
    </div>
  </div>
  <div class="privesy-btns">
    <button onclick="privesyAcceptAll()">
      Accept all
    </button>
    <button class="privesy-btn-secondary" onclick="privesyRejectAll()">Ablehnen</button>
    <button class="privesy-btn-secondary" onclick="privesySavePrefs()">Einstellungen speichern</button>
  </div>
</div>
<script>
  function privesyHideBanner() {
    document.getElementById('privesy-cookie-banner').style.display = 'none';
  }
  function privesySaveConsent(prefs) {
    localStorage.setItem('privesyCookieConsent', JSON.stringify({ necessary: true, analytics: !!prefs.analytics, marketing: !!prefs.marketing }));
    privesyHideBanner();
  }
  function privesyAcceptAll() {
    privesySaveConsent({ analytics: true, marketing: true });
  }
  function privesyRejectAll() {
    privesySaveConsent({ analytics: false, marketing: false });
  }
  function privesySavePrefs() {
    privesySaveConsent({
      analytics: document.getElementById('privesy-analytics').checked,
      marketing: document.getElementById('privesy-marketing').checked
    });
  }
  (function () {
    try {
      var stored = JSON.parse(localStorage.getItem('privesyCookieConsent') || 'null');
      if (stored && stored.necessary) {
        if (document.getElementById('privesy-analytics')) document.getElementById('privesy-analytics').checked = !!stored.analytics;
        if (document.getElementById('privesy-marketing')) document.getElementById('privesy-marketing').checked = !!stored.marketing;
        privesyHideBanner();
      }
    } catch (e) { /* storage unavailable: keep banner visible */ }
  })();
</script>

Konfigurieren Sie oben Nachricht, Linktext und Cookie-Kategorien.
Kopieren Sie den erzeugten HTML-Snippet.
Fügen Sie ihn auf jeder Seite vor dem schließenden body-Tag ein.

Konfiguration

Vorschau & Code

So fügen Sie den Banner ein