Das ist der direkteste Weg, ein DSGVO-konformes Banner in wenigen Minuten online zu stellen. Alle optionalen Einstellungen lassen wir aus: Die Feinabstimmung können Sie später erledigen.
1. Registrieren
Gehen Sie zu app.flowconsent.com und erstellen Sie ein Konto. Der Free-Tarif deckt 1 Banner ab, gehostet in Ihrem eigenen Cloudflare-Konto, bis zu 25.000 Sitzungen pro Monat und ohne Kreditkarte.
2. Banner anlegen
Klicken Sie auf der Seite Banners auf + Neues Banner. Geben Sie ein:
- Einen Namen (beliebig, z. B.
acme-website) - Ihre Website-URL (
https://acme.com)
FlowConsent scannt die Seite und befüllt die Tabs Services und Cookie list automatisch mit den erkannten Drittanbieter-Skripten. Die Standardeinstellungen sind DSGVO-konform: gleich große Buttons zum Akzeptieren und Ablehnen, vorheriges Blockieren, granulare Kategorien.
3. Bereitstellen
Öffnen Sie den Tab Deployment.
Im Free-Tarif werden Sie aufgefordert, ein Cloudflare-Konto zu verbinden, damit wir einen Worker in Ihrer Infrastruktur bereitstellen. Folgen Sie der Cloudflare-Anleitung: Diese Verbindung richten Sie nur einmal ein.
In den Tarifen Pro und Enterprise erfolgt die Bereitstellung mit einem Klick: Das Banner liegt unter https://IHR-WORKSPACE.consent.flowconsent.com.
Nach der Bereitstellung zeigt der Tab Deployment Ihren Installationscode:
<!-- FlowConsent CMP -->
<script src="https://IHR-WORKSPACE.consent.flowconsent.com/cookie-manager.js?code=IHR_LICENSE_CODE"></script>4. Code einfügen
Fügen Sie den Code in den <head> jeder Seite Ihrer Website ein, so weit oben wie möglich, idealerweise direkt nach <head> und vor jedem anderen <script>. Das ist die Voraussetzung für das vorherige Blockieren: Jedes Tracking-Skript unterhalb des Codes wird zurückgehalten, bis die Einwilligung erteilt ist.
Bei einer statischen HTML-Website fügen Sie ihn ins Template ein. Bei einem CMS:
- WordPress:
header.phpdes Themes oder ein Plugin wie Insert Headers and Footers - Shopify: Online-Shop → Themes → Code bearbeiten →
theme.liquid→ in<head> - Webflow: Project Settings → Custom Code → Head Code
- Framer: Site Settings → Custom Code → End of
<head> - Next.js / Nuxt / SvelteKit:
<head>des Root-Layouts. Für clientseitiges Routing aktivieren Sie zusätzlich den SPA-Modus: siehe Leitfaden für Next.js und React-SPAs
5. Prüfen
Öffnen Sie Ihre Website in einem privaten Fenster. Sie sollten sehen:
- Das Banner beim ersten Besuch
- Keine Anfragen an Drittanbieter im Tab Netzwerk vor dem Klick auf Akzeptieren
- Einen neuen Eintrag unter Analytics → Sessions im FlowConsent-Dashboard, nach kurzer Zeit
Falls das Banner nicht erscheint, prüfen Sie, ob der Code im <head> (nicht im <body>) steht und nicht von einer CSP blockiert wird.
Fertig
Das ist die Minimalinstallation. Sobald Sie Zeit haben: