1. Snippet einfügen
Füge den erzeugten Code auf jeder Seite direkt vor dem schließenden body-Tag ein. Er hat keine Abhängigkeiten und erzeugt keine Netzwerkanfragen.
Kostenloses Tool
Generator für Cookie-Consent-Banner
Wähle deine Cookie-Kategorien, schreib den Text, entscheide dich für einen Look – und kopiere ein Consent-Banner ohne Abhängigkeiten, das du in jede Website einfügen kannst. Es speichert die Wahl des Besuchers, hält getaggte Skripte blockiert, bis ihre Kategorie freigegeben ist, und lässt sich über einen Link im Footer erneut öffnen.
Dein Consent-Banner
Füge das direkt vor dem schließenden body-Tag auf jeder Seite ein.
<!-- Cookie consent banner - paste this just before </body> -->
<script>
(function () {
var CFG = {
"storageKey": "cookie_consent",
"position": "bar",
"theme": "light",
"accent": "#a6144d",
"title": "Wir verwenden Cookies",
"message": "Wir verwenden Cookies, um diese Website zu betreiben, zu verstehen, wie sie genutzt wird, und sie zu verbessern. Du kannst alles akzeptieren, Optionales ablehnen oder pro Kategorie wählen.",
"policyUrl": "https://example.com/privacy",
"policyLabel": "Unsere Datenschutzerklärung lesen",
"accept": "Alle akzeptieren",
"reject": "Optionale ablehnen",
"prefs": "Präferenzen",
"save": "Auswahl speichern",
"categories": [
{
"id": "necessary",
"label": "Unbedingt erforderlich",
"desc": "Für den Betrieb der Website erforderlich. Immer aktiv, fragt nie nach Einwilligung.",
"required": true
},
{
"id": "analytics",
"label": "Analyse",
"desc": "Misst, wie die Website genutzt wird, damit sie verbessert werden kann.",
"required": false
},
{
"id": "marketing",
"label": "Marketing",
"desc": "Wird genutzt, um Werbung zu personalisieren und Kampagnen zu messen.",
"required": false
}
]
};
var KEY = CFG.storageKey;
var doc = document;
var box = null;
function read() {
try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) { return null; }
}
function save(consent) {
consent.necessary = true;
consent.date = new Date().toISOString();
try { localStorage.setItem(KEY, JSON.stringify(consent)); } catch (e) {}
unblock(consent);
window.dispatchEvent(new CustomEvent('consentchange', { detail: consent }));
if (typeof window.onConsentChange === 'function') window.onConsentChange(consent);
}
// Scripts the site parked behind a category run only once it is granted. Park
// one by giving its tag type="text/plain" and data-consent="analytics".
// (Deliberately described, not shown: a literal script tag written out here
// would close this one early and truncate everything below it.)
function unblock(consent) {
var parked = doc.querySelectorAll('script[type="text/plain"][data-consent]');
for (var i = 0; i < parked.length; i++) {
var old = parked[i];
if (!consent[old.getAttribute('data-consent')]) continue;
var next = doc.createElement('script');
for (var a = 0; a < old.attributes.length; a++) {
var at = old.attributes[a];
if (at.name !== 'type' && at.name !== 'data-consent') next.setAttribute(at.name, at.value);
}
next.text = old.text;
old.parentNode.replaceChild(next, old);
}
}
function styles() {
var dark = CFG.theme === 'dark';
var bg = dark ? '#161622' : '#ffffff';
var fg = dark ? '#f4f4f8' : '#141a47';
var muted = dark ? 'rgba(244,244,248,.72)' : 'rgba(20,26,71,.7)';
var line = dark ? 'rgba(255,255,255,.14)' : 'rgba(20,26,71,.12)';
var el = doc.createElement('style');
el.textContent = [
'.cc-root{position:fixed;z-index:2147483000;font:400 14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:' + fg + ';box-sizing:border-box}',
'.cc-root *,.cc-root *::before,.cc-root *::after{box-sizing:inherit}',
'.cc-card{background:' + bg + ';border:1px solid ' + line + ';box-shadow:0 18px 48px rgba(0,0,0,.18);border-radius:14px;padding:20px}',
'.cc-bar{left:0;right:0;bottom:0;padding:16px}',
'.cc-bar .cc-card{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto}',
'.cc-box{left:16px;bottom:16px;max-width:400px}',
'.cc-modal{inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,20,.5)}',
'.cc-modal .cc-card{max-width:520px;width:100%}',
'.cc-title{margin:0 0 6px;font-size:16px;font-weight:700}',
'.cc-text{margin:0;color:' + muted + '}',
'.cc-text a{color:' + CFG.accent + ';font-weight:600}',
'.cc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}',
'.cc-bar .cc-actions{margin-top:0}',
'.cc-btn{appearance:none;cursor:pointer;border:1px solid ' + line + ';border-radius:999px;padding:9px 18px;font:600 14px inherit;background:transparent;color:' + fg + '}',
'.cc-btn-main{background:' + CFG.accent + ';border-color:' + CFG.accent + ';color:#fff}',
'.cc-btn:focus-visible{outline:2px solid ' + CFG.accent + ';outline-offset:2px}',
'.cc-cats{display:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid ' + line + '}',
'.cc-cats.cc-open{display:block}',
'.cc-cat{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}',
'.cc-cat input{margin:3px 0 0;accent-color:' + CFG.accent + '}',
'.cc-cat strong{display:block;font-size:14px}',
'.cc-cat span{display:block;color:' + muted + ';font-size:13px}',
'@media(max-width:640px){.cc-bar .cc-card{display:block}.cc-bar .cc-actions{margin-top:14px}.cc-btn{flex:1 1 auto}}'
].join('');
doc.head.appendChild(el);
}
function build() {
var stored = read() || {};
var root = doc.createElement('div');
root.className = 'cc-root cc-' + CFG.position;
root.setAttribute('role', CFG.position === 'modal' ? 'dialog' : 'region');
root.setAttribute('aria-label', CFG.title);
if (CFG.position === 'modal') root.setAttribute('aria-modal', 'true');
var card = doc.createElement('div');
card.className = 'cc-card';
var copy = doc.createElement('div');
var h = doc.createElement('p');
h.className = 'cc-title';
h.textContent = CFG.title;
var p = doc.createElement('p');
p.className = 'cc-text';
p.textContent = CFG.message + ' ';
if (CFG.policyUrl) {
var link = doc.createElement('a');
link.href = CFG.policyUrl;
link.textContent = CFG.policyLabel;
p.appendChild(link);
}
copy.appendChild(h);
copy.appendChild(p);
var cats = doc.createElement('div');
cats.className = 'cc-cats';
var inputs = {};
for (var i = 0; i < CFG.categories.length; i++) {
var c = CFG.categories[i];
var row = doc.createElement('label');
row.className = 'cc-cat';
var cb = doc.createElement('input');
cb.type = 'checkbox';
cb.checked = c.required || stored[c.id] === true;
cb.disabled = !!c.required;
var txt = doc.createElement('div');
var name = doc.createElement('strong');
name.textContent = c.label;
var desc = doc.createElement('span');
desc.textContent = c.desc;
txt.appendChild(name);
txt.appendChild(desc);
row.appendChild(cb);
row.appendChild(txt);
cats.appendChild(row);
inputs[c.id] = cb;
}
copy.appendChild(cats);
var actions = doc.createElement('div');
actions.className = 'cc-actions';
function button(label, main, onClick) {
var b = doc.createElement('button');
b.type = 'button';
b.className = 'cc-btn' + (main ? ' cc-btn-main' : '');
b.textContent = label;
b.addEventListener('click', onClick);
actions.appendChild(b);
return b;
}
function decide(granted) {
var consent = {};
for (var i = 0; i < CFG.categories.length; i++) {
var c = CFG.categories[i];
consent[c.id] = c.required ? true : granted === null ? !!inputs[c.id].checked : granted;
}
save(consent);
close();
}
var prefsBtn = button(CFG.prefs, false, function () {
var open = cats.classList.toggle('cc-open');
prefsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
saveBtn.style.display = open ? '' : 'none';
});
prefsBtn.setAttribute('aria-expanded', 'false');
button(CFG.reject, false, function () { decide(false); });
button(CFG.accept, true, function () { decide(true); });
var saveBtn = button(CFG.save, false, function () { decide(null); });
saveBtn.style.display = 'none';
card.appendChild(copy);
card.appendChild(actions);
root.appendChild(card);
doc.body.appendChild(root);
box = root;
}
function close() {
if (box && box.parentNode) box.parentNode.removeChild(box);
box = null;
}
function open() {
if (!box) build();
}
function start() {
styles();
var stored = read();
if (stored) unblock(stored);
else build();
window.showConsentPreferences = open;
}
if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', start);
else start();
})();
</script>So nutzt du es
In drei Schritten zu einem funktionierenden Banner
2. Tracking-Skripte parken
Ändere den Typ eines Tracking-Tags in text/plain und füge data-consent="analytics" hinzu. Das Banner führt es aus, sobald diese Kategorie freigegeben ist – und keinen Moment früher.
3. Menschen ihre Meinung ändern lassen
Füge einen Link im Footer hinzu, der window.showConsentPreferences() aufruft, damit Besucher das Panel erneut öffnen können. Jede Entscheidung löst außerdem ein consentchange-Event aus, auf das du hören kannst.
FAQ
Über Cookie-Einwilligung
Reicht dieses Banner für die DSGVO-Konformität?
Es liefert dir die Mechanik, die Aufsichtsbehörden erwarten: keine optionalen Cookies vor der Einwilligung, Ablehnen so einfach wie Akzeptieren, Auswahl pro Kategorie und eine Möglichkeit, die Meinung später zu ändern. Konformität hängt aber auch davon ab, was du tatsächlich einsetzt, was in deiner Datenschutzerklärung steht und wo deine Besucher sind – betrachte den erzeugten Code daher als soliden Ausgangspunkt, nicht als Rechtsberatung.
Wie verhindere ich, dass Skripte vor der Einwilligung laufen?
Gib dem Script-Tag type="text/plain" und ein data-consent-Attribut mit dem Namen seiner Kategorie. Der Browser führt es nicht aus, und das Banner wandelt es in ein echtes Script-Tag um, sobald diese Kategorie freigegeben ist – bei diesem Besuch oder beim nächsten, anhand der gespeicherten Entscheidung.
Wo wird die Wahl des Besuchers gespeichert?
Im localStorage, unter dem von dir gewählten Schlüssel, als kleines JSON-Objekt mit einem Flag pro Kategorie plus dem Datum. Für das Banner selbst wird kein Cookie gesetzt, und nichts wird an einen Server gesendet, sodass es auch auf einer rein statischen Website funktioniert.
Kann ich das Aussehen anpassen?
Ja. Position, Design und Akzentfarbe sind hier Optionen, und jedes Element im erzeugten CSS hat das Präfix cc-, sodass du die Regeln in deinem eigenen Stylesheet überschreiben kannst, ohne das Snippet anzufassen.
Brauche ich trotzdem eine Consent-Management-Plattform?
Für eine Website mit einer Handvoll Kategorien reicht dieses Snippet meist aus. Sobald du Einwilligungsprotokolle, mehrere Domains oder Analytics brauchst, die die Wahl automatisch respektieren, übernimmt der integrierte Consent-Manager von PulsePanda die ganze Arbeit.
Verwandt
Mehr von PulsePanda
Einwilligung, die deine Analytics wirklich respektieren
PulsePanda bringt einen integrierten Consent-Manager mit – standardmäßig ohne Cookies, und die Erfassung stoppt in dem Moment, in dem jemand widerspricht. Kein zweiter Anbieter, kein Verbindungscode.
Kostenlos starten