Start / Webmaster Tools / Cookie Consent Generator

Cookie Consent Generator

Erstellt ein pragmatisches Cookie-Consent-System mit Kategorien, lokalem Consent-Speicher, Script-Nachladen, Widerrufsbutton und ZIP-Ausgabe.

Webmaster Tools Sofort nutzbar Beliebt Neu

Dein Cookie-Consent-Paket

Mit Einbau-Code, JavaScript, CSS, Dienst-Snippets und ZIP-Download.

<link rel="stylesheet" href="/assets/css/cookie-consent.css">
<script>
window.b4yCookieConsentConfig = {
    "privacyUrl": "/datenschutz/",
    "mode": "optin",
    "position": "bottom",
    "theme": "dark",
    "template": "compact",
    "title": "Cookie-Einstellungen",
    "description": "Wir nutzen technisch notwendige Funktionen. Optionale Dienste werden nur geladen, wenn du zustimmst.",
    "shortDescription": "Diese Webseite verwendet Cookies und ähnliche Technologien. Du kannst selbst entscheiden, welche Dienste erlaubt sind.",
    "acceptAllText": "Alle akzeptieren",
    "necessaryOnlyText": "Nur notwendige",
    "saveText": "Auswahl speichern",
    "closeText": "Verstanden",
    "reopenText": "Cookie-Einstellungen",
    "settingsText": "Einstellungen",
    "showReopenButton": true,
    "showFloatingReopenButton": true,
    "storageKey": "b4y_cookie_consent",
    "primaryColor": "#6c63ff",
    "categories": {
        "necessary": true,
        "statistics": true,
        "marketing": false,
        "external": true
    },
    "services": [],
    "customServices": [],
    "serviceDetails": [],
    "serviceValues": {
        "ga_id": "G-XXXXXXXXXX",
        "gtm_id": "GTM-XXXXXXX",
        "fonts_urls": [
            "/assets/vendor/fonts/site-fonts.css"
        ],
        "maps_url": "https://www.google.com/maps/embed?pb=...",
        "youtube_url": "https://www.youtube-nocookie.com/embed/VIDEO_ID",
        "meta_pixel_id": "1234567890",
        "instagram_url": "https://www.instagram.com/p/POST_ID/",
        "tiktok_pixel_id": "TIKTOK_PIXEL_ID",
        "tiktok_url": "https://www.tiktok.com/@user/video/VIDEO_ID",
        "cf_token": "CLOUDFLARE_TOKEN",
        "matomo_url": "https://analytics.example.com/",
        "matomo_site_id": "1"
    }
};
</script>
<script src="/assets/js/cookie-consent.js" defer></script>

<!-- Keine Dienst-Presets ausgewählt. Eigene optionale Skripte so blockieren: -->
<script type="text/plain" data-cookie-category="statistics" data-src="https://example.com/analytics.js"></script>
<button type="button" data-cookie-settings>Cookie-Einstellungen ändern</button>

/*
 * illitools Cookie Consent
 * Copyright: Illya Beverung
 * https://www.beverung.de/projekte/illitools/
 * Datum: 18.05.2026
 * Pfad/Dateiname: /assets/js/cookie-consent.js
 * Beschreibung: Consent-Banner mit Kategorien, localStorage, Script-/Iframe-/Link-Nachladen und Widerruf.
 */
(function () {
	'use strict';

	var DEFAULT_CONFIG = {
    "privacyUrl": "/datenschutz/",
    "mode": "optin",
    "position": "bottom",
    "theme": "dark",
    "template": "compact",
    "title": "Cookie-Einstellungen",
    "description": "Wir nutzen technisch notwendige Funktionen. Optionale Dienste werden nur geladen, wenn du zustimmst.",
    "shortDescription": "Diese Webseite verwendet Cookies und ähnliche Technologien. Du kannst selbst entscheiden, welche Dienste erlaubt sind.",
    "acceptAllText": "Alle akzeptieren",
    "necessaryOnlyText": "Nur notwendige",
    "saveText": "Auswahl speichern",
    "closeText": "Verstanden",
    "reopenText": "Cookie-Einstellungen",
    "settingsText": "Einstellungen",
    "showReopenButton": true,
    "showFloatingReopenButton": true,
    "storageKey": "b4y_cookie_consent",
    "primaryColor": "#6c63ff",
    "categories": {
        "necessary": true,
        "statistics": true,
        "marketing": false,
        "external": true
    },
    "services": [],
    "customServices": [],
    "serviceDetails": [],
    "serviceValues": {
        "ga_id": "G-XXXXXXXXXX",
        "gtm_id": "GTM-XXXXXXX",
        "fonts_urls": [
            "/assets/vendor/fonts/site-fonts.css"
        ],
        "maps_url": "https://www.google.com/maps/embed?pb=...",
        "youtube_url": "https://www.youtube-nocookie.com/embed/VIDEO_ID",
        "meta_pixel_id": "1234567890",
        "instagram_url": "https://www.instagram.com/p/POST_ID/",
        "tiktok_pixel_id": "TIKTOK_PIXEL_ID",
        "tiktok_url": "https://www.tiktok.com/@user/video/VIDEO_ID",
        "cf_token": "CLOUDFLARE_TOKEN",
        "matomo_url": "https://analytics.example.com/",
        "matomo_site_id": "1"
    }
};
	var userConfig = window.b4yCookieConsentConfig || {};
	var config = mergeDeep(DEFAULT_CONFIG, userConfig);
	var consent = null;

	function mergeDeep(target, source) {
		var output = Object.assign({}, target || {});
		Object.keys(source || {}).forEach(function (key) {
			if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
				output[key] = mergeDeep(output[key] || {}, source[key]);
			} else {
				output[key] = source[key];
			}
		});
		return output;
	}

	function escapeHtml(value) {
		return String(value || '').replace(/[&<>"']/g, function (char) {
			return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[char];
		});
	}

	function readConsent() {
		try {
			var raw = localStorage.getItem(config.storageKey);
			return raw ? JSON.parse(raw) : null;
		} catch (error) {
			return null;
		}
	}

	function writeConsent(data) {
		var payload = Object.assign({
			necessary: true,
			statistics: false,
			marketing: false,
			external: false,
			date: new Date().toISOString()
		}, data || {});

		try {
			localStorage.setItem(config.storageKey, JSON.stringify(payload));
		} catch (error) {}

		consent = payload;
		loadAllowedResources();
		document.dispatchEvent(new CustomEvent('b4yCookieConsentChanged', { detail: payload }));
	}

	function categoryAllowed(category) {
		return category === 'necessary' || !!(consent && consent[category] === true);
	}

	function loadAllowedResources() {
		document.querySelectorAll('script[type="text/plain"][data-cookie-category]').forEach(function (blockedScript) {
			var category = blockedScript.getAttribute('data-cookie-category') || '';
			if (!categoryAllowed(category) || blockedScript.getAttribute('data-cookie-loaded') === '1') {
				return;
			}

			var script = document.createElement('script');
			Array.prototype.slice.call(blockedScript.attributes).forEach(function (attr) {
				if (attr.name === 'type' || attr.name === 'data-cookie-category' || attr.name === 'data-cookie-loaded') {
					return;
				}
				if (attr.name === 'data-src') {
					script.setAttribute('src', attr.value);
				} else {
					script.setAttribute(attr.name, attr.value);
				}
			});

			if (blockedScript.textContent.trim() !== '') {
				script.textContent = blockedScript.textContent;
			}

			blockedScript.setAttribute('data-cookie-loaded', '1');
			blockedScript.parentNode.insertBefore(script, blockedScript.nextSibling);
		});

		document.querySelectorAll('[data-cookie-category][data-consent-src]').forEach(function (element) {
			var category = element.getAttribute('data-cookie-category') || '';
			if (!categoryAllowed(category) || element.getAttribute('data-cookie-loaded') === '1') {
				return;
			}
			element.setAttribute('src', element.getAttribute('data-consent-src') || '');
			element.setAttribute('data-cookie-loaded', '1');
		});

		document.querySelectorAll('link[data-cookie-category][data-consent-href]').forEach(function (link) {
			var category = link.getAttribute('data-cookie-category') || '';
			if (!categoryAllowed(category) || link.getAttribute('data-cookie-loaded') === '1') {
				return;
			}
			link.setAttribute('rel', link.getAttribute('data-consent-rel') || 'stylesheet');
			link.setAttribute('href', link.getAttribute('data-consent-href') || '');
			link.setAttribute('data-cookie-loaded', '1');
		});

		document.querySelectorAll('[data-cookie-placeholder]').forEach(function (placeholder) {
			var category = placeholder.getAttribute('data-cookie-placeholder') || '';
			if (categoryAllowed(category)) {
				placeholder.hidden = true;
			}
		});
	}

	function servicesFor(category) {
		return (config.serviceDetails || []).filter(function (service) {
			return service.category === category;
		});
	}

	function categoryDetails(key, title, text, disabled) {
		var checked = key === 'necessary' || !!config.categories[key];
		var services = servicesFor(key);
		var serviceHtml = services.length
			? '<ul class="b4y-cookie-consent__services">' + services.map(function (service) {
				return '<li><strong>' + escapeHtml(service.name) + '</strong><small>' + escapeHtml(service.description || '') + '</small></li>';
			}).join('') + '</ul>'
			: '<p class="b4y-cookie-consent__empty">Keine Dienste hinterlegt.</p>';

		return '<details class="b4y-cookie-consent__details" open><summary><span><strong>' + escapeHtml(title) + '</strong><small>' + escapeHtml(text) + '</small></span><input type="checkbox" data-b4y-cookie-choice="' + escapeHtml(key) + '" ' + (checked ? 'checked ' : '') + (disabled ? 'disabled ' : '') + '></summary>' + serviceHtml + '</details>';
	}

	function buildBanner() {
		var isNotice = config.mode === 'notice';
		var isBar = config.template === 'bar' || config.position === 'bottom-full';
		var templateClass = isBar ? 'bar' : (config.template || 'compact');
		var text = isBar ? (config.shortDescription || config.description) : config.description;
		var html = '<div class="b4y-cookie-consent b4y-cookie-consent--' + escapeHtml(config.position) + ' b4y-cookie-consent--' + escapeHtml(config.theme) + ' b4y-cookie-consent--template-' + escapeHtml(templateClass) + '" role="dialog" aria-modal="false" aria-labelledby="b4yCookieConsentTitle"><div class="b4y-cookie-consent__box"><div class="b4y-cookie-consent__content">';
		if (!isBar) {
			html += '<div class="b4y-cookie-consent__eyebrow">Datenschutz</div><h2 id="b4yCookieConsentTitle">' + escapeHtml(config.title) + '</h2>';
		} else {
			html += '<h2 id="b4yCookieConsentTitle" class="b4y-cookie-consent__sr-only">' + escapeHtml(config.title) + '</h2>';
		}
		html += '<p class="b4y-cookie-consent__text">' + escapeHtml(text) + ' <a href="' + escapeHtml(config.privacyUrl) + '">Datenschutz</a></p></div>';

		html += '<div class="b4y-cookie-consent__actions b4y-cookie-consent__actions--main">';
		if (isNotice) {
			html += '<button type="button" class="b4y-cookie-consent__button b4y-cookie-consent__button--primary" data-b4y-cookie-action="notice-close">' + escapeHtml(config.closeText) + '</button>';
		} else {
			html += '<button type="button" class="b4y-cookie-consent__button b4y-cookie-consent__button--ghost" data-b4y-cookie-action="necessary">' + escapeHtml(config.necessaryOnlyText) + '</button><button type="button" class="b4y-cookie-consent__button b4y-cookie-consent__button--ghost" data-b4y-cookie-action="toggle-details">Weitere Informationen</button><button type="button" class="b4y-cookie-consent__button b4y-cookie-consent__button--primary" data-b4y-cookie-action="all">' + escapeHtml(config.acceptAllText) + '</button>';
		}
		html += '</div>';

		if (!isNotice) {
			html += '<div class="b4y-cookie-consent__more" hidden>' +
				categoryDetails('necessary', 'Notwendig', 'Erforderlich für Grundfunktionen und Sicherheit.', true) +
				categoryDetails('statistics', 'Statistik', 'Analyse und Verbesserung der Webseite.', false) +
				categoryDetails('marketing', 'Marketing', 'Pixel, Kampagnen und Werbung.', false) +
				categoryDetails('external', 'Externe Medien', 'Karten, Videos, Fonts und Einbettungen.', false) +
				'<div class="b4y-cookie-consent__actions"><button type="button" class="b4y-cookie-consent__button b4y-cookie-consent__button--primary" data-b4y-cookie-action="save">' + escapeHtml(config.saveText) + '</button></div>' +
			'</div>';
		}

		html += '</div></div>';

		var wrapper = document.createElement('div');
		wrapper.innerHTML = html;
		return wrapper.firstElementChild;
	}

	function removeBanner() {
		var existing = document.querySelector('.b4y-cookie-consent');
		if (existing) {
			existing.remove();
		}
	}

	function showBanner() {
		removeBanner();
		var banner = buildBanner();
		document.body.appendChild(banner);
		var firstButton = banner.querySelector('button');
		if (firstButton) {
			firstButton.focus({ preventScroll: true });
		}
	}

	function selectedChoices(banner) {
		var values = { necessary: true, statistics: false, marketing: false, external: false };
		banner.querySelectorAll('[data-b4y-cookie-choice]').forEach(function (input) {
			values[input.getAttribute('data-b4y-cookie-choice')] = input.checked;
		});
		return values;
	}

	function installReopenButton() {
		if (!config.showReopenButton) {
			return;
		}

		if (!config.showFloatingReopenButton) {
			return;
		}

		document.querySelectorAll('.b4y-cookie-consent-reopen[data-cookie-settings]').forEach(function (existingButton) {
			existingButton.remove();
		});

		var existingSettings = document.querySelector('[data-cookie-settings]');
		if (existingSettings && !existingSettings.classList.contains('b4y-cookie-consent-reopen')) {
			return;
		}

		var button = document.createElement('button');
		button.type = 'button';
		button.className = 'b4y-cookie-consent-reopen';
		button.setAttribute('data-cookie-settings', '');
		button.textContent = config.reopenText;
		document.body.appendChild(button);
	}

	document.addEventListener('click', function (event) {
		var actionButton = event.target.closest('[data-b4y-cookie-action]');
		var settingsButton = event.target.closest('[data-cookie-settings]');

		if (settingsButton) {
			event.preventDefault();
			showBanner();
			return;
		}

		if (!actionButton) {
			return;
		}

		var banner = actionButton.closest('.b4y-cookie-consent');
		var action = actionButton.getAttribute('data-b4y-cookie-action');

		if (action === 'notice-close' || action === 'necessary') {
			writeConsent({ necessary: true, statistics: false, marketing: false, external: false });
		} else if (action === 'toggle-details') {
			var more = banner ? banner.querySelector('.b4y-cookie-consent__more') : null;
			if (more) {
				more.hidden = !more.hidden;
			}
			return;
		} else if (action === 'all') {
			writeConsent({ necessary: true, statistics: true, marketing: true, external: true });
		} else if (action === 'save') {
			writeConsent(selectedChoices(banner));
		}

		removeBanner();
		installReopenButton();
	});

	document.addEventListener('DOMContentLoaded', function () {
		document.documentElement.style.setProperty('--b4y-cookie-consent-primary', config.primaryColor || '#6c63ff');
		consent = readConsent();

		if (consent) {
			loadAllowedResources();
			installReopenButton();
			return;
		}

		showBanner();
	});
})();

/*
 * illitools Cookie Consent
 * Copyright: Illya Beverung
 * Datum: 01.04.2026
 * Pfad/Dateiname: /assets/css/cookie-consent.css
 * Beschreibung: Styles fuer Cookie-Consent-Banner und Widerrufsbutton.
 */
:root { --b4y-cookie-consent-primary: #6c63ff; }
.b4y-cookie-consent{position:fixed;z-index:99999;left:16px;right:16px;bottom:16px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.b4y-cookie-consent--bottom-left,.b4y-cookie-consent--bottom-right{max-width:480px}.b4y-cookie-consent--bottom-left{right:auto}.b4y-cookie-consent--bottom-right{left:auto}.b4y-cookie-consent--modal{inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.54)}.b4y-cookie-consent__box{width:min(480px,100%);margin:0 auto;padding:16px;border-radius:12px;box-shadow:0 16px 56px rgba(15,23,42,.2)}.b4y-cookie-consent--dark .b4y-cookie-consent__box{background:#111827;color:#fff}.b4y-cookie-consent--light .b4y-cookie-consent__box{background:#fff;color:#111827;border:1px solid rgba(15,23,42,.12)}.b4y-cookie-consent__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.b4y-cookie-consent__eyebrow{margin-bottom:5px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.68}.b4y-cookie-consent h2{margin:0 0 7px;font-size:1.06rem;line-height:1.25}.b4y-cookie-consent__text{margin:0 0 12px;line-height:1.45;font-size:.91rem;overflow-wrap:anywhere}.b4y-cookie-consent a{color:inherit;font-weight:inherit;text-decoration:underline;text-underline-offset:.12em}.b4y-cookie-consent__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin-top:10px}.b4y-cookie-consent__actions--main{margin-top:12px}.b4y-cookie-consent__button,.b4y-cookie-consent-reopen{border:0;border-radius:8px;padding:8px 11px;font-weight:800;font-size:.9rem;cursor:pointer;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease}.b4y-cookie-consent__button:hover,.b4y-cookie-consent-reopen:hover{transform:translateY(-1px)}.b4y-cookie-consent__button--primary{background:var(--b4y-cookie-consent-primary);color:#fff;box-shadow:0 8px 20px rgba(15,23,42,.16)}.b4y-cookie-consent__button--ghost{background:rgba(148,163,184,.18);color:inherit}.b4y-cookie-consent__more{margin-top:12px;border-top:1px solid rgba(148,163,184,.28);padding-top:8px;max-height:min(46vh,360px);overflow:auto}.b4y-cookie-consent__details{border-bottom:1px solid rgba(148,163,184,.22);padding:7px 0}.b4y-cookie-consent__details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.b4y-cookie-consent__details summary::-webkit-details-marker{display:none}.b4y-cookie-consent__details strong,.b4y-cookie-consent__details small{display:block}.b4y-cookie-consent__details small,.b4y-cookie-consent__empty{opacity:.72;line-height:1.35}.b4y-cookie-consent__details input{width:19px;height:19px;accent-color:var(--b4y-cookie-consent-primary);flex:0 0 auto}.b4y-cookie-consent__services{margin:8px 0 2px;padding:0;list-style:none;display:grid;gap:6px}.b4y-cookie-consent__services li{padding:8px 9px;border-radius:8px;background:rgba(148,163,184,.14)}.b4y-cookie-consent__services small{margin-top:2px}.b4y-cookie-consent-reopen{position:fixed;left:16px;bottom:16px;z-index:99990;background:#111827;color:#fff;font-size:.84rem;box-shadow:0 10px 28px rgba(15,23,42,.18)}[data-cookie-placeholder]{padding:18px;border-radius:14px;background:#f1f5f9;color:#334155;text-align:center;font-weight:700}
.b4y-cookie-consent--bottom-full,.b4y-cookie-consent--template-bar{left:0;right:0;bottom:0;max-width:none}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__box,.b4y-cookie-consent--template-bar .b4y-cookie-consent__box{width:100%;max-width:none;border-radius:0;padding:12px 18px;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:center;gap:10px 18px}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__content,.b4y-cookie-consent--template-bar .b4y-cookie-consent__content{min-width:0}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__text,.b4y-cookie-consent--template-bar .b4y-cookie-consent__text{margin:0;font-size:.9rem;line-height:1.45}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__actions--main,.b4y-cookie-consent--template-bar .b4y-cookie-consent__actions--main{margin:0;justify-content:flex-end}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__button,.b4y-cookie-consent--template-bar .b4y-cookie-consent__button{white-space:nowrap}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__more,.b4y-cookie-consent--template-bar .b4y-cookie-consent__more{grid-column:1/-1;width:100%;max-height:min(62vh,560px);overflow:auto;margin-top:8px;padding:12px;border:1px solid rgba(148,163,184,.26);border-radius:12px;background:rgba(15,23,42,.12)}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__details,.b4y-cookie-consent--template-bar .b4y-cookie-consent__details{padding:10px 0}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__services,.b4y-cookie-consent--template-bar .b4y-cookie-consent__services{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__services li,.b4y-cookie-consent--template-bar .b4y-cookie-consent__services li{min-height:0}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__services small,.b4y-cookie-consent--template-bar .b4y-cookie-consent__services small{display:block}
@media(max-width:980px){.b4y-cookie-consent--bottom-full .b4y-cookie-consent__box,.b4y-cookie-consent--template-bar .b4y-cookie-consent__box{grid-template-columns:1fr}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__actions--main,.b4y-cookie-consent--template-bar .b4y-cookie-consent__actions--main{justify-content:flex-start}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__button,.b4y-cookie-consent--template-bar .b4y-cookie-consent__button{white-space:normal}}
@media(max-width:640px){.b4y-cookie-consent{left:10px;right:10px;bottom:10px}.b4y-cookie-consent__box{padding:14px;border-radius:12px}.b4y-cookie-consent__actions{flex-direction:column}.b4y-cookie-consent__button{width:100%}.b4y-cookie-consent--bottom-full,.b4y-cookie-consent--template-bar{left:0;right:0;bottom:0}.b4y-cookie-consent--bottom-full .b4y-cookie-consent__box,.b4y-cookie-consent--template-bar .b4y-cookie-consent__box{padding:12px;border-radius:0}}

Gut zu wissen

Verfügbarkeit: sofort nutzbar
Kategorie: Webmaster Tools
Nutzung: direkt im Browser

Themen

cookie consent datenschutz dsgvo javascript zip webmaster

Zurück zur Übersicht

Alle Tools ansehen

Cookie Consent Generator

Cookie Consent Generator

Texte

Kategorien

Standarddienste

Live-Vorschau

Deine Seite bleibt im Hintergrund sichtbar.

Dein Cookie-Consent-Paket

Gut zu wissen

Themen

Zurück zur Übersicht