Cookie-Banner-Generator

Erzeugen Sie den HTML-, CSS- und JavaScript-Code eines einfachen Cookie-Einwilligungsbanners zum Kopieren und Einfügen in Ihre Website, mit der Auswahl „Akzeptieren / Ablehnen“ und Speicherung der Entscheidung im Browser der Besucher. Der gesamte Code wird lokal erstellt, ohne Server.

Nachricht

Beschriftung des Buttons „Akzeptieren“

Beschriftung des Buttons „Ablehnen“

Linkbeschriftung

Link-URL (Datenschutzerklärung)

Position

Hintergrundfarbe

Textfarbe

Farbe des Buttons „Akzeptieren“

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

Code zum Kopieren und Einfügen

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie-Einwilligung">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

So funktioniert es

Passen Sie Nachricht, Button-Beschriftungen und Farben an, sehen Sie sich die Vorschau an und kopieren Sie dann den vollständigen HTML/CSS/JS-Block in Ihre Website: Fügen Sie ihn direkt vor dem schließenden Tag </body> Ihrer Seite ein. Das Skript speichert die Entscheidung des Besuchers im lokalen Speicher seines Browsers, damit das Banner nach der Antwort nicht erneut angezeigt wird.

Genügt dieses Banner, um DSGVO-konform zu sein?

Dieser Generator liefert eine funktionierende technische Grundlage (Anzeige, Auswahl, Speicherung), aber die tatsächliche Konformität hängt auch davon ab, was Sie konkret mit den Cookies tun: Nicht notwendige Cookies (Analyse, Werbung) müssen deaktiviert bleiben, solange die Nutzerin oder der Nutzer nicht auf „Akzeptieren“ geklickt hat. Passen Sie den Kommentar „TODO“ im erzeugten JavaScript-Code an, damit Ihre Skripte erst nach der Einwilligung aktiviert werden, und ziehen Sie eine Rechtsberatung hinzu, wenn Ihre Website sensible Daten verarbeitet.

Kann ich den erzeugten Code nach dem Kopieren ändern?

Ja, der Code ist ein Standard-Ausgangspunkt ohne externe Abhängigkeit und ohne erforderliches Framework: Sie können ihn frei an das Design Ihrer Website anpassen oder in eine bestehende Komponente integrieren.

Der Code wird vollständig in Ihrem Browser erzeugt: Keine Ihrer Angaben wird an einen externen Server gesendet.