Kostenloses Tool

Generator für ein Cookie-Banner

Konfigurieren Sie Ihr Banner und erhalten Sie ein eigenständiges HTML/CSS/JS-Snippet (ohne Abhängigkeiten) zum Einfügen in Ihre Website, unabhängig vom Framework.

Orientierungsvorlage, keine Rechtsberatung. Passen Sie Text und Kategorien an das an, was Ihre Website tatsächlich tut (haken Sie eine Kategorie nur an, wenn Sie diese Art von Cookie wirklich setzen), bevor Sie live gehen.

Das Banner allein genügt nicht.Es speichert die Entscheidung der Nutzerin bzw. des Nutzers (angenommen/abgelehnt, mit Ablauf nach 6 Monaten) und löst ein zkyCookieConsentChanged-Ereignis aus, Sie müssen Ihre Drittanbieter-Skripte (Google Analytics, Werbe-Pixel usw.) daran koppeln, damit sie erst nach der Einwilligung laden. Ohne diese Kopplung wird das Banner angezeigt, blockiert aber von sich aus nichts.

Name der Website

Link zur Datenschutzerklärung

Akzentfarbe

Kategorie „Reichweitenmessung“ Kategorie „Werbung“

Erzeugtes Snippet

<!-- Bandeau cookies généré sur zkysolutions.com/generateur-bandeau-cookies -->
<!-- Vanilla JS, aucune dépendance. Adapter le texte/les catégories à votre cas réel avant mise en ligne. -->
<style>
.zky-cc { position: fixed; inset: auto 0 0 0; z-index: 9999; background: #fff; border-top: 1px solid #e2e8f0; padding: 16px; box-shadow: 0 -4px 24px rgba(0,0,0,.08); font: 14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; color: #1e293b; }
.zky-cc-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.zky-cc a { color: #0C6E84; text-decoration: underline; }
.zky-cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zky-cc-btn { border: 1px solid #cbd5e1; background: #fff; color: #1e293b; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.zky-cc-btn-primary { background: #0C6E84; border-color: #0C6E84; color: #fff; }
.zky-cc-settings { display: none; }
.zky-cc-row { display: flex; justify-content: space-between; gap: 16px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.zky-cc-row-title { font-weight: 600; margin: 0; }
.zky-cc-row-desc { margin: 4px 0 0; color: #64748b; }
</style>

<div id="zky-cc-banner" class="zky-cc" role="dialog" aria-label="Cookie-Einstellungen" style="display:none">
  <div class="zky-cc-inner">
    <div class="zky-cc-main">
      <p style="margin:0">
        Ce site verwendet ausschließlich für den Betrieb zwingend erforderliche Cookies.
        <a href="/confidentialite">Mehr erfahren</a>.
      </p>
      <div class="zky-cc-settings"><p style="margin:0;color:#64748b">Keine optionale Kategorie konfiguriert : nur zwingend erforderliche Cookies.</p></div>
    </div>
    <div class="zky-cc-actions">
      <button type="button" class="zky-cc-btn" data-zky-cc-action="settings">Anpassen</button>
      <!-- "Refuser" et "Accepter" ont volontairement le même style : la CNIL
      considère qu'un bouton "accepter" visuellement plus mis en avant que
      "refuser" est un dark pattern (consentement pas vraiment libre). -->
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="refuse">Alle ablehnen</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="accept">Alle akzeptieren</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="save" style="display:none">Speichern</button>
    </div>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'zky_cookie_consent';
  // Recommandation CNIL : le consentement n'est pas éternel, ~6 mois avant de
  // redemander (au-delà, considérer que la situation/l'utilisateur a pu changer).
  var CONSENT_MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
  var banner = document.getElementById('zky-cc-banner');
  var settingsBox = banner.querySelector('.zky-cc-settings');
  var saveBtn = banner.querySelector('[data-zky-cc-action="save"]');
  var checkboxes = banner.querySelectorAll('[data-zky-cc-category]');

  function getConsent() {
    try {
      var stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
      if (!stored || !stored.consentedAt) return null;
      if (Date.now() - stored.consentedAt > CONSENT_MAX_AGE_MS) return null;
      return stored;
    } catch (e) { return null; }
  }

  function setConsent(consent) {
    consent.consentedAt = Date.now();
    localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    banner.style.display = 'none';
    document.dispatchEvent(new CustomEvent('zkyCookieConsentChanged', { detail: consent }));
  }

  function buildConsent(allValue) {
    var consent = { necessary: true };
    checkboxes.forEach(function (cb) {
      consent[cb.getAttribute('data-zky-cc-category')] = allValue !== undefined ? allValue : cb.checked;
    });
    return consent;
  }

  banner.addEventListener('click', function (e) {
    var action = e.target.getAttribute('data-zky-cc-action');
    if (!action) return;
    if (action === 'accept') setConsent(buildConsent(true));
    else if (action === 'refuse') setConsent(buildConsent(false));
    else if (action === 'settings') {
      settingsBox.style.display = 'block';
      saveBtn.style.display = 'inline-block';
    } else if (action === 'save') setConsent(buildConsent());
  });

  window.zkyOpenCookieSettings = function () {
    banner.style.display = 'block';
    settingsBox.style.display = 'block';
    saveBtn.style.display = 'inline-block';
  };

  if (!getConsent()) banner.style.display = 'block';
})();
</script>