Cookie Hinweis Generator – kostenlos Banner HTML · Ok IMG

Cookie-Hinweis Generator

HTML, CSS und ein kleines Skript für ein Banner am Seitenende — zum Einfügen vor </body>. Speichert die Wahl in localStorage.

Name der Website

localStorage-Schlüssel

URL Datenschutz

URL Impressum (optional)

Button „Akzeptieren“

Button „Nur notwendige“

Hinweistext

Darstellung

Code-Ausgabe

<!-- Cookie-Hinweis (Muster Ok IMG) — vor Livegang Text und Rechtslage prüfen -->
<div id="cookie-hinweis-banner" role="dialog" aria-label="Cookie-Einstellungen" aria-live="polite" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;padding:16px;background:#ffffff;color:#0f172a;border-top:1px solid #e2e8f0;box-shadow:0 -4px 24px rgba(15,23,42,.12);font-family:system-ui,sans-serif;font-size:14px;line-height:1.5">
  <div style="max-width:960px;margin:0 auto">
    <p style="margin:0 0 12px"><strong>Beispiel Website</strong> — Wir verwenden Cookies, um die Website nutzbar zu machen und — sofern Sie zustimmen — Statistik oder Marketing zu ermöglichen. Sie können Ihre Auswahl jederzeit in den Datenschutzeinstellungen ändern.</p>
    <p style="margin:8px 0 0;font-size:13px"><a href="https://beispiel.de/datenschutz" style="color:#1a56db;text-decoration:underline">Datenschutz</a> · <a href="https://beispiel.de/impressum" style="color:#1a56db;text-decoration:underline">Impressum</a></p>
    <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:12px">
      <button type="button" id="cookie-hinweis-accept" style="padding:10px 18px;border:none;border-radius:8px;background:#1a56db;color:#fff;font-weight:600;cursor:pointer">Alle akzeptieren</button>
      <button type="button" id="cookie-hinweis-essential" style="padding:10px 18px;border:none;border-radius:8px;background:#e2e8f0;color:#0f172a;font-weight:600;cursor:pointer">Nur notwendige</button>
    </div>
  </div>
</div>
<script>
(function () {
  var KEY = "cookie_consent";
  var banner = document.getElementById("cookie-hinweis-banner");
  if (!banner || localStorage.getItem(KEY)) return;
  banner.style.display = "block";
  function save(v) { try { localStorage.setItem(KEY, v); } catch (e) {} banner.style.display = "none"; }
  document.getElementById("cookie-hinweis-accept")?.addEventListener("click", function () { save("all"); });
  document.getElementById("cookie-hinweis-essential")?.addEventListener("click", function () { save("essential"); });
})();
</script>

Muster-Banner für Cookie-Hinweise — kein Ersatz für eine datenschutzkonforme Consent-Lösung (z. B. CMP). Text, Kategorien und Skripte vor Livegang rechtlich prüfen.

1
Text anpassen
Hinweistext, Datenschutz- und Impressum-Links setzen.
2
Banner erzeugen
HTML, CSS und JS mit Akzeptieren / Nur notwendige.
3
Code einbinden
Vor </body> einfügen oder im CMS als Custom HTML.

Neue Website
Blog
Landing Page
Kleiner Shop
Prototyp Consent-Banner

Ist das Tool kostenlos?: Ja. Cookie Hinweis Generator ist kostenlos und ohne Registrierung.
Ist das Banner DSGVO-konform?: Technisches Muster — für echte Sites oft CMP, Kategorien und Dokumentation nötig. Rechtlich prüfen.
Wo füge ich den Code ein?: Kurz vor </body> oder als Custom HTML im Theme/CMS.
Werden Cookies gesetzt?: Das Muster speichert die Auswahl in localStorage — welche Cookies danach laden, legst du fest.
Funktioniert das auf dem Handy?: Ja. Banner ist responsiv nutzbar.

Vorteile

Kostenlos
Ohne Registrierung
Direkt im Browser
HTML/CSS/JS
localStorage

Unterstützte Formate

HTML, CSS, JavaScript

Datenschutz

Deine Eingaben werden ausschließlich in deinem Browser verarbeitet und nicht hochgeladen.