Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

Cookie Consent Banner Generator — GDPR Banner with Google Consent Mode v2

Add a cookie consent banner to any site — Webflow, WordPress, Shopify or plain HTML — without a paid plugin. Choose the layout, text, colors and cookie categories, and get one lightweight snippet with Accept all, Reject all and Settings buttons. It remembers the choice, lets visitors change it later, and sends the right signals to Google Consent Mode v2 for Analytics and Ads.

Aktualisiert am

Preview

1. In the <head>, before your Google tag

2. Before </body> — the banner

3. Block your other tags until consent

Paste the tracking tags you already use — Google Analytics, Meta Pixel, Hotjar, LinkedIn, TikTok, chat widgets, YouTube embeds… Each one is sorted into a category you can change. Necessary tags run as normal (your allow list); all others are blocked until the visitor accepts their category.

Converted tags — use these instead of your originals

In Webflow add an Embed element (or Site settings → Custom code) and paste the code; in WordPress use a Custom HTML block. Link a “Cookie settings” item in your footer to #cookie-settings so visitors can change their choice.

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: Cookie Consent Banner Generator

  1. Choose the layout — a bar, a corner box or a centered dialog — and edit the title, message and button labels.
  2. Keep Settings on to let visitors choose categories (analytics, marketing, preferences), and link your privacy policy.
  3. Leave Google Consent Mode v2 on if you use Google Analytics or Ads: paste snippet 1 in the <head> before your Google tag.
  4. Paste snippet 2 before </body>, and add a “Cookie settings” link to #cookie-settings in your footer.

What the banner does

  • Shows on the first visit and stores the visitor’s choice in localStorage (not a cookie) for the number of days you set.
  • Accept all, Reject all and Settings — rejecting is one click and as visible as accepting, which regulators expect under GDPR.
  • Any link to #cookie-settings reopens the settings, so visitors can change their mind at any time.
  • Blocks your other tags until consent: scripts marked type="text/plain" data-cookie-category="analytics" (or marketing, preferences) and iframes with data-src run only after the visitor accepts that category. Withdrawing consent reloads the page so they stop.
  • It fires a cookie-consent event on document with the choices, so you can load other scripts only after consent.

Google Consent Mode v2

Snippet 1 sets every Google consent signal — ad_storage, ad_user_data, ad_personalization and analytics_storage — to denied before your Google tag loads. When the visitor chooses, the banner updates them: analytics to analytics_storage, marketing to the three ad signals. Google Analytics then records full data only for visitors who agreed, and cookieless pings for the rest. Since March 2024 Google requires Consent Mode v2 for ads measurement of visitors in the European Economic Area.

This is a technical tool, not legal advice: list the cookies you actually use in your privacy policy, and check what your country requires. Related: Tracking Tag Checker, Meta Tag Generator.

Auch gesucht als: cookie banner generator, gdpr cookie banner, cookie consent code, google consent mode v2, cookie popup html, free cookie banner, cookie consent webflow, cookie notice generator.

Passende Tools zu: Cookie Consent Banner Generator

  • CSP Generator — Pick what your site loads — scripts, styles, images, fonts, analytics, embeds — and get a Content-Security-Policy that allows exactly that, with warnings for risky settings.
  • SEO-Check & Website-Audit — Füge eine URL ein, um bis zu 70 On-Page-SEO-Prüfungen sowie ein vollständiges Website-Audit durchzuführen: Lighthouse-Geschwindigkeit, Sicherheits-Header & SSL, strukturierte Daten, defekte Links, robots.txt & KI-Crawler, Grundlagen der Barrierefreiheit, Tracking & Einwilligung, SPF/DKIM/DMARC und Ablauf der Domain – zusammengefasst in einem Website-Score mit priorisierten Korrekturvorschlägen.
  • HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
  • Email Header Analyzer — Paste the raw headers of an email to see its whole journey: every server hop with the time it took, the SPF, DKIM and DMARC results, the originating IP, and warning signs like a mismatched Reply-To or Return-Path.

Häufige Fragen

How do I add a cookie banner to Webflow?
Paste snippet 1 into Site settings → Custom code → Head (before your Google tag) and snippet 2 into the Footer code, then publish. Add a footer link to #cookie-settings so visitors can reopen it.
Does it block Google Analytics until consent?
With Consent Mode v2, Google Analytics loads but stores no cookies until the visitor accepts analytics — it only sends cookieless signals. To keep other scripts off entirely, load them in a listener for the cookie-consent event.
Is a Reject button required?
Under GDPR, refusing must be as easy as accepting, and several EU regulators have fined sites that hid the reject option. The generator puts Reject next to Accept with the same weight by default.
Can it block scripts until visitors consent?
Yes. Paste your tags in step 3: each one gets type="text/plain" and a data-cookie-category, so the browser doesn’t run it. The banner turns it on when the visitor accepts that category, while necessary tags keep running like an allow list. Iframes such as YouTube embeds wait the same way with data-src.
Where is the choice stored?
In the visitor’s browser (localStorage), with a version and a date, so the banner reappears after the period you set or when you change the version.
Kann ich Cookie Consent Banner Generator als Web-App installieren und offline nutzen?
Ja. Cookie Consent Banner Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools