MeDo

Generatore di Banner dei Cookie con IA.

Descrivi l'esperienza di consenso ai cookie di cui hai bisogno — stile del banner, etichette dei pulsanti, testo legale, schema colori — e MeDo genera istantaneamente codice pronto per la produzione. Pubblica un banner cookie conforme e in linea con il tuo brand senza boilerplate.

Banner dei Cookie
Banner dei Cookie

I banner dei cookie sono legalmente obbligatori — e di solito terribili.

Il GDPR, il CCPA e le normative ePrivacy richiedono il consenso informato prima di impostare cookie non essenziali, e i regolatori lo applicano attivamente. Ma la maggior parte dei banner cookie usa dark pattern, è brutta o non funziona. Un banner di consenso ben progettato costruisce la fiducia degli utenti, riduce il rimbalzo causato da popup invadenti e mantiene il sito conforme senza sacrificare l'esperienza. MeDo ti aiuta a generarne uno che sembra intenzionale, non aggiunto all'ultimo momento.

6 modelli

Modelli di Banner dei Cookie che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice React + Tailwind.

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.

Prova in MeDo
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.

Prova in MeDo
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.

Prova in MeDo
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.

Prova in MeDo
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.

Prova in MeDo
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.

Prova in MeDo

Come personalizzare il tuo Banner dei Cookie

Adattarsi al design system del sito

Specifica i colori del brand, il raggio dei bordi e il font nel prompt così il banner appare nativo — non come un widget di terze parti. Gli utenti interagiscono più facilmente con un banner che sembra appartenere al sito.

Scegliere posizione e animazione del banner

Barra inferiore, modal centrato e toast ad angolo sono i tre pattern principali. Indica a MeDo quale preferisci e se desideri uno slide-up, fade-in o apparizione istantanea. Le barre inferiori sono le meno invasive; i modal sono i più conformi per giurisdizioni severe.

Regolare la gerarchia dei pulsanti

I dark pattern (nascondere il pulsante rifiuta) attirano sanzioni normative. Chiedi a MeDo di dare ad "Accetta" e "Rifiuta" uguale peso visivo, oppure di usare un CTA neutro "Gestisci preferenze" che porta a un modal di consenso granulare.

Aggiungere un pannello delle preferenze

Per una conformità più completa, chiedi a MeDo di includere un pannello delle preferenze espandibile con toggle per categoria (Analisi, Marketing, Funzionali). Questo è lo standard d'oro per la conformità GDPR e la fiducia degli utenti.

Chi usa il componente Banner dei Cookie

Prodotto SaaS

Banner inferiore leggero con accetta/rifiuta e un link alla policy sui cookie. Non invasivo ma conforme — mantiene l'interfaccia dell'app in primo piano rispettando gli obblighi GDPR.

Negozio e-commerce

Banner di consenso completo con modal delle preferenze che copre cookie di analisi, personalizzazione e marketing. Fondamentale per negozi che usano pixel pubblicitari e retargeting.

Sito marketing o blog

Avviso cookie semplice con un singolo pulsante "Accetta" e un link testuale alle impostazioni cookie. Frizione minima per siti orientati ai contenuti con solo cookie di analisi.

Enterprise o settore regolamentato

Modal di consenso granulare con toggle per fornitore, un registro di audit completo delle decisioni di consenso e un'opzione "Rifiuta tutto" prominente — costruito per soddisfare i requisiti DPA rigorosi.

Pattern di Banner dei Cookie per siti web diversi

Lo stesso componente banner dei cookie, calibrato sul tipo di sito su cui viene pubblicato.

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.

Stili e varianti di Banner dei Cookie

Scegli la variante che si adatta al resto della pagina, poi generala.

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.

Banner dei Cookie in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso banner dei cookie, sei modi per integrarlo.

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>
  )
}

Come aggiungere il tuo Banner dei Cookie a un progetto

Quattro passaggi, dalla scelta di un modello di banner dei cookie alla messa in produzione.

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.

Domande comuni su Banner dei Cookie

Come creo un banner dei cookie con l'IA?

In MeDo, descrivi il banner di consenso ai cookie di cui hai bisogno — la sua posizione, le etichette dei pulsanti, quali cookie usi e il tuo stile visivo. MeDo genera il codice completo del componente, che puoi copiare nel tuo progetto o continuare a perfezionare con prompt successivi. Niente più ricerca di boilerplate.

Qual è il miglior generatore di banner cookie con IA?

MeDo è progettato appositamente per generare componenti web pronti per la produzione, inclusi i banner dei cookie. A differenza degli strumenti IA generici, MeDo produce codice pulito e semantico con markup accessibile e valori predefiniti sensati per l'etichettatura conforme al GDPR — non solo un template grezzo da sistemare.

L'IA può generare un banner dei cookie conforme al GDPR?

MeDo può generare banner cookie che seguono le best practice del GDPR: pulsanti accetta/rifiuta di uguale peso visivo, un link alla policy sui cookie e toggle opzionali di consenso per categoria. Tuttavia, la vera conformità legale dipende dalle tue specifiche pratiche sui dati e dalla giurisdizione — fai sempre revisionare l'implementazione finale dal tuo team legale.

Come aggiungo un pulsante "Rifiuta tutto" al mio banner cookie?

Includilo semplicemente nel tuo prompt — ad esempio, "aggiungi un pulsante Rifiuta tutto con lo stesso peso visivo del pulsante Accetta". MeDo genererà entrambi i pulsanti con stili corrispondenti e collegherà i placeholder di logica appropriati.

Posso generare un modal delle preferenze cookie con l'IA?

Sì. Chiedi a MeDo di includere un pannello delle preferenze con toggle per categoria (es. Analisi, Marketing, Cookie funzionali). MeDo genererà un modal completo con interruttori, descrizioni delle categorie e azioni salva/conferma.

Il banner cookie IA funziona con Google Analytics e Meta Pixel?

MeDo genera l'interfaccia utente e la logica di consent-gate. Puoi chiedere di includere hook placeholder per bloccare o caricare script di analisi in base al consenso dell'utente. Il collegamento al tuo tag manager o SDK di analisi specifico richiede un piccolo passaggio di integrazione dopo la generazione.