MeDo

KI-Cookie-Banner-Generator.

Beschreiben Sie das Cookie-Consent-Erlebnis, das Sie benötigen — Banner-Stil, Button-Beschriftungen, Rechtstexte, Farbschema — und MeDo generiert sofort produktionsreifen Code. Veröffentlichen Sie einen konformen, markenkonsistenten Cookie-Banner ohne Boilerplate.

Cookie-Banner
Cookie-Banner

Cookie-Banner sind gesetzlich vorgeschrieben — und meist schrecklich.

DSGVO, CCPA und ePrivacy-Verordnungen verlangen eine informierte Einwilligung vor dem Setzen nicht notwendiger Cookies, und Behörden setzen dies aktiv durch. Doch die meisten Cookie-Banner sind manipulativ, hässlich oder fehlerhaft. Ein gut gestalteter Consent-Banner stärkt das Nutzervertrauen, reduziert Absprünge durch aufdringliche Popups und hält Ihre Website konform, ohne das Nutzererlebnis zu beeinträchtigen. MeDo hilft Ihnen, einen zu generieren, der absichtsvoll wirkt — nicht wie ein nachträglicher Gedanke.

6 Vorlagen

Cookie-Banner-Vorlagen, die Sie generieren können

Jede Vorlage ist ein echter Prompt, kein Screenshot. Kopieren Sie ihn in einen KI-Editor oder führen Sie ihn in MeDo aus und erhalten Sie React- und Tailwind-Code zurück.

Bottom barBaseline

Accept and Reject Bottom Bar

One line of copy, two buttons of equal weight, a policy link. The smallest banner that still gives a genuine choice rather than a dismiss disguised as one.

Create a cookie consent bar fixed to the bottom of the viewport: a short line explaining that non-essential cookies are used for analytics, a link to the cookie policy, and two buttons — Accept all and Reject non-essential — rendered with identical size, contrast and padding so neither is visually demoted. Render it in a region with role="region" and an accessible name, do not trap focus, and place it last in the DOM so it does not sit ahead of the page content in tab order. Persist the decision under a versioned key in localStorage with a timestamp, and keep the bar hidden on every later visit until that version changes. Load no analytics script before a decision exists.

In MeDo testen
CategoriesGranular

Per-Category Consent Panel

Four categories, three of them off until someone turns them on. The version to build when tags actually differ in purpose rather than all being one analytics script.

Create a cookie consent panel with four categories: Necessary (locked on, with a note explaining it cannot be disabled), Functional, Analytics and Marketing, each a labelled switch with a one-sentence description of what it enables. Every non-essential switch defaults to off. Provide Accept all, Reject all and Save preferences, with Accept all and Reject all identical in weight. Store the result as an object keyed by category alongside a schema version and timestamp, and emit a consent-changed event so tag loading can react without a page reload. Keep the switches keyboard operable with visible focus rings and expose state through aria-checked rather than colour alone.

In MeDo testen
ModalGate

Centered Consent Modal

Blocks the page until a choice is made. Highest completion rate, highest bounce rate — reach for it only when a decision genuinely has to precede the first render.

Create a centered cookie consent modal with a dimmed backdrop: heading, two sentences of explanation, a cookie policy link, and Accept all, Reject all and Manage preferences buttons with the first two given equal visual weight. Use role="dialog" with aria-modal="true", label it by its heading, move focus to the heading on open, cycle Tab within the dialog, and do not close on Escape or backdrop click since either would leave consent undecided. Persist the choice in a versioned localStorage record with a timestamp and render nothing on subsequent visits. Do not pre-tick any non-essential category, and gate every non-essential script behind the stored value.

In MeDo testen
ToastCorner

Corner Card Consent Toast

A small card in the bottom corner that leaves the page usable. Least disruptive and least answered — expect a large share of visitors to simply ignore it.

Create a cookie consent card anchored to the bottom-left corner, roughly 360px wide, with a cookie icon, a two-line explanation, a policy link and stacked Accept all and Reject all buttons of matching width and contrast. It must not overlap other fixed UI, so offset it above any support launcher. Do not include a bare X dismiss control — a close button that leaves consent unrecorded means the banner returns on every navigation. Render it after the main landmark in the DOM, keep it out of any focus trap, and persist the decision in a versioned localStorage entry with a timestamp so it stays hidden once answered.

In MeDo testen
Persistent accessReopen

Banner With a Preferences Trigger

The banner plus a permanent footer link that reopens it. Consent that cannot be changed later is the most common defect in a shipped banner, and the fix is one link.

Create a cookie consent bar plus a persistent Cookie preferences button for the site footer that reopens the same panel with the stored values pre-loaded, so a visitor can withdraw consent as easily as they gave it. The panel lists Necessary, Functional, Analytics and Marketing switches with non-essential ones reflecting whatever was saved, and offers Accept all, Reject all and Save preferences. On reopen, move focus to the panel heading and return focus to the footer button on close. Write changes to the same versioned localStorage key with a fresh timestamp and emit a consent-changed event so already-loaded tags can be told to stop.

In MeDo testen
Geo-awareRegional

Region-Conditional Consent Banner

Shows the full category panel where prior consent is expected and a lighter notice elsewhere, driven by a server-supplied region hint. The requirements vary by jurisdiction, so confirm the rules for each region with counsel.

Create a consent component that takes a region prop resolved server-side from the request and renders one of two variants: a full category panel with all non-essential switches defaulting to off and Accept all, Reject all and Save preferences of equal weight, or a lighter notice with an acknowledge action and a link to a cookie settings page. Never pre-tick a non-essential category in either variant. Store the decision with the region and a schema version so the record explains which variant produced it, and re-prompt when the version changes. Keep the region check server-side so no tracking script loads before the variant is known.

In MeDo testen

So passen Sie Ihre Cookie-Banner an

Zum Design-System Ihrer Website passen

Geben Sie Ihre Markenfarben, den Border-Radius und die Schriftart im Prompt an, damit der Banner nativ wirkt — nicht wie ein Drittanbieter-Widget. Nutzer interagieren eher mit einem Banner, der wie ein Teil der Seite aussieht.

Banner-Position und Animation wählen

Untere Leiste, zentriertes Modal und Corner-Toast sind die drei Hauptmuster. Teilen Sie MeDo mit, was Sie bevorzugen und ob Sie einen Slide-up, Fade-in oder sofortiges Erscheinen möchten. Untere Leisten sind am wenigsten störend; Modals bieten die höchste Compliance für strenge Gerichtsbarkeiten.

Button-Hierarchie anpassen

Dark Patterns (den Ablehnen-Button verstecken) ziehen Bußgelder nach sich. Bitten Sie MeDo, „Akzeptieren" und „Ablehnen" gleiches visuelles Gewicht zu geben, oder einen neutralen „Einstellungen verwalten"-CTA zu verwenden, der zu einem detaillierten Consent-Modal führt.

Ein Einstellungs-Panel hinzufügen

Für umfassendere Compliance bitten Sie MeDo, ein umschaltbares Einstellungs-Panel mit kategoriespezifischen Toggles einzufügen (Analyse, Marketing, Funktional). Dies ist der Goldstandard für DSGVO-Compliance und Nutzervertrauen.

Wer die Cookie-Banner-Komponente nutzt

SaaS-Produkt

Leichter unterer Banner mit Akzeptieren/Ablehnen und einem Link zur Cookie-Richtlinie. Nicht aufdringlich, aber konform — hält die App-Oberfläche im Vordergrund und erfüllt gleichzeitig die DSGVO-Anforderungen.

E-Commerce-Shop

Vollständiger Consent-Banner mit Einstellungs-Modal für Analyse-, Personalisierungs- und Marketing-Cookies. Entscheidend für Shops, die Ad-Pixel und Retargeting nutzen.

Marketing- oder Blog-Website

Einfacher Cookie-Hinweis mit einem einzelnen „Akzeptieren"-Button und einem Textlink zu den Cookie-Einstellungen. Minimale Reibung für inhaltsorientierte Seiten mit nur Analytics-Cookies.

Unternehmen oder regulierte Branche

Granulares Consent-Modal mit anbieterweisen Toggles, einem vollständigen Audit-Log der Einwilligungsentscheidungen und einer prominenten „Alle ablehnen"-Option — entwickelt, um strenge DPA-Anforderungen zu erfüllen.

Cookie-Banner-Muster für verschiedene Websites

Dieselbe cookie-banner-Komponente, abgestimmt auf die Art der Website, auf der sie läuft.

01 / 06

SaaS Product Consent

A bottom bar with equal-weight accept and reject, and the reject path wired to skip product analytics rather than just hiding the bar. The failure here is a banner on the marketing site and none inside the authenticated app, where most of the event tracking actually happens.

Cookie-Banner-Stile und -Varianten

Wählen Sie die Variante, die zum Rest der Seite passt, und generieren Sie sie.

01 / 06

Bottom Bar Banner

Full-width strip pinned to the bottom, one line of copy, two buttons. The least disruptive pattern and the safest default. Watch the mobile height — a three-line bar covering a sticky Add to cart button is a conversion bug, not a design detail.

Cookie-Banner in React, Next.js, Vue und Svelte

React, Next.js, Vue 3, SvelteKit, Astro oder reines HTML — dieselbe cookie-banner, sechs Wege zur Einbindung.

01 / 06

React Cookie Banner

Consent belongs in a context provider at the app root, not in the banner — the banner is one reader of that state and every gated feature is another. Read localStorage in an effect so the first render matches the server.

src/components/ConsentProvider.tsx

const KEY = 'consent.v2'

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(null)

  useEffect(() => {
    setConsent(JSON.parse(localStorage.getItem(KEY) ?? 'null'))
  }, [])

  return (
    <Ctx.Provider value={{ consent, setConsent }}>{children}</Ctx.Provider>
  )
}

So fügen Sie Ihre Cookie-Banner einem Projekt hinzu

Vier Schritte, von der Auswahl einer cookie-banner-Vorlage bis zum Einsatz in der Produktion.

01~30s

Pick a Consent Pattern

Choose by how many distinct cookie purposes you actually have — a bottom bar for one analytics script, a category panel once marketing and functional tags are separate concerns.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the category descriptions with the tags you really run, since that list is what your policy page has to agree with.

03~1min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "give reject all the same weight as accept", "expand preferences in place", "add a footer trigger that reopens it".

04~2min

Gate Your Scripts and Verify

Wire analytics and pixel loading to the stored value, then load the site fresh and confirm no non-essential request fires before a choice. Specific consent obligations vary by jurisdiction — have counsel review what you ship.

Häufige Fragen zu Cookie-Banner

Wie erstelle ich einen Cookie-Banner mit KI?

In MeDo beschreiben Sie den Cookie-Consent-Banner, den Sie benötigen — seine Position, Button-Beschriftungen, welche Cookies Sie verwenden und Ihren visuellen Stil. MeDo generiert den vollständigen Komponenten-Code, den Sie in Ihr Projekt kopieren oder mit Follow-up-Prompts weiter verfeinern können. Kein lästiges Suchen nach Boilerplate.

Was ist der beste KI-Cookie-Banner-Generator?

MeDo ist speziell für die Generierung von produktionsreifen Website-Komponenten, einschließlich Cookie-Banner, entwickelt. Im Gegensatz zu generischen KI-Tools gibt MeDo sauberen, semantischen Code mit barrierefreiem Markup und sinnvollen Standards für DSGVO-konforme Beschriftungen aus — kein grobes Template, das Sie noch reparieren müssen.

Kann KI einen DSGVO-konformen Cookie-Banner generieren?

MeDo kann Cookie-Banner generieren, die Best-Practice-Mustern der DSGVO folgen: gleichgewichtete Akzeptieren/Ablehnen-Buttons, ein Link zu Ihrer Cookie-Richtlinie und optionale kategoriespezifische Consent-Toggles. Wahre rechtliche Compliance hängt jedoch von Ihren spezifischen Datenpraktiken und Ihrer Jurisdiktion ab — lassen Sie die endgültige Implementierung immer von Ihrem Rechtsteam prüfen.

Wie füge ich meinem Cookie-Banner einen „Alle ablehnen"-Button hinzu?

Fügen Sie es einfach in Ihren Prompt ein — zum Beispiel: „Füge einen Alle-ablehnen-Button mit gleichem visuellem Gewicht wie der Akzeptieren-Button hinzu." MeDo generiert beide Buttons mit übereinstimmenden Styles und verdrahtet die entsprechenden Logik-Platzhalter.

Kann ich mit KI ein Cookie-Einstellungs-Modal generieren?

Ja. Bitten Sie MeDo, ein Einstellungs-Panel mit kategoriespezifischen Toggles einzufügen (z.B. Analyse, Marketing, Funktionale Cookies). MeDo generiert ein vollständiges Modal mit Toggle-Schaltern, Kategoriebeschreibungen und Speichern/Bestätigen-Aktionen.

Funktioniert der KI-Cookie-Banner mit Google Analytics und Meta Pixel?

MeDo generiert die Benutzeroberfläche und die Consent-Gate-Logik. Sie können es auffordern, Platzhalter-Hooks für das Blockieren oder Laden von Analytics-Skripten basierend auf der Nutzereinwilligung einzufügen. Die Verdrahtung mit Ihrem spezifischen Tag-Manager oder Analytics-SDK erfordert nach der Generierung einen kleinen Integrationsschritt.