MeDo

Générateur de Bannière de Cookies IA.

Décrivez l'expérience de consentement aux cookies souhaitée — style de bannière, libellés des boutons, texte juridique, palette de couleurs — et MeDo génère instantanément du code prêt pour la production. Publiez une bannière de cookies conforme et à votre image sans boilerplate.

Bannière de Cookies
Bannière de Cookies

Les bannières de cookies sont légalement obligatoires — et généralement affreuses.

Le RGPD, le CCPA et les réglementations ePrivacy exigent un consentement éclairé avant de déposer des cookies non essentiels, et les régulateurs l'appliquent activement. Mais la plupart des bannières de cookies utilisent des dark patterns, sont laides ou dysfonctionnelles. Une bannière de consentement bien conçue renforce la confiance des utilisateurs, réduit le rebond causé par les popups intrusifs et maintient votre site en conformité sans sacrifier l'expérience. MeDo vous aide à en générer une qui semble intentionnelle, pas ajoutée après coup.

6 modèles

Modèles de Bannière de Cookies que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code 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.

Tester dans 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.

Tester dans 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.

Tester dans 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.

Tester dans 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.

Tester dans 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.

Tester dans MeDo

Comment personnaliser votre Bannière de Cookies

S'accorder avec votre système de design

Spécifiez vos couleurs de marque, rayons de bordure et police dans le prompt pour que la bannière paraisse native — pas comme un widget tiers. Les utilisateurs sont plus enclins à interagir avec une bannière qui semble appartenir au site.

Choisir la position et l'animation de la bannière

Barre inférieure, modal centré et toast de coin sont les trois principaux modèles. Indiquez à MeDo lequel vous préférez et si vous souhaitez un slide-up, un fade-in ou une apparition instantanée. Les barres inférieures sont les moins intrusives ; les modals sont les plus conformes pour les juridictions strictes.

Adapter la hiérarchie des boutons

Les dark patterns (masquer le bouton refuser) attirent les amendes réglementaires. Demandez à MeDo de donner à « Accepter » et « Refuser » un poids visuel égal, ou d'utiliser un CTA neutre « Gérer les préférences » menant à un modal de consentement granulaire.

Ajouter un panneau de préférences

Pour une conformité plus complète, demandez à MeDo d'inclure un panneau de préférences dépliable avec des toggles par catégorie (Analytique, Marketing, Fonctionnel). C'est le standard d'excellence pour la conformité RGPD et la confiance utilisateur.

Qui utilise le composant Bannière de Cookies

Produit SaaS

Bannière inférieure légère avec accepter/refuser et un lien vers la politique de cookies. Non intrusive mais conforme — garde l'interface de l'application au premier plan tout en respectant les obligations RGPD.

Boutique e-commerce

Bannière de consentement complète avec modal de préférences couvrant les cookies d'analyse, de personnalisation et de marketing. Essentiel pour les boutiques utilisant des pixels publicitaires et le retargeting.

Site marketing ou blog

Avis de cookies simple avec un unique bouton « Accepter » et un lien texte vers les paramètres de cookies. Friction minimale pour les sites axés sur le contenu avec uniquement des cookies d'analyse.

Entreprise ou industrie réglementée

Modal de consentement granulaire avec des toggles par fournisseur, un journal d'audit complet des décisions de consentement et une option « Tout refuser » proéminente — conçu pour satisfaire les exigences strictes des DPA.

Modèles de Bannière de Cookies pour différents sites web

Le même composant bannière de cookies, adapté au type de site sur lequel il est publié.

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.

Styles et variantes de Bannière de Cookies

Choisissez la variante qui correspond au reste de la page, puis générez-la.

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.

Bannière de Cookies en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même bannière de cookies, six façons de l'intégrer.

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

Comment ajouter votre Bannière de Cookies à un projet

Quatre étapes, du choix d'un modèle de bannière de cookies à sa mise en production.

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.

Questions fréquentes à propos de Bannière de Cookies

Comment créer une bannière de cookies avec l'IA ?

Dans MeDo, décrivez la bannière de consentement aux cookies souhaitée — sa position, les libellés des boutons, les cookies que vous utilisez et votre style visuel. MeDo génère le code complet du composant, que vous pouvez copier dans votre projet ou continuer à affiner avec des prompts de suivi. Plus besoin de chercher du boilerplate.

Quel est le meilleur générateur de bannières de cookies IA ?

MeDo est spécialement conçu pour générer des composants de sites web prêts pour la production, y compris les bannières de cookies. Contrairement aux outils IA génériques, MeDo produit un code propre et sémantique avec un balisage accessible et des valeurs par défaut sensées pour l'étiquetage conforme au RGPD — pas juste un template brut à corriger.

L'IA peut-elle générer une bannière de cookies conforme au RGPD ?

MeDo peut générer des bannières de cookies suivant les bonnes pratiques RGPD : boutons accepter/refuser de poids visuel égal, un lien vers votre politique de cookies et des toggles optionnels de consentement par catégorie. Cependant, la conformité juridique réelle dépend de vos pratiques de données spécifiques et de votre juridiction — faites toujours réviser l'implémentation finale par votre équipe juridique.

Comment ajouter un bouton « Tout refuser » à ma bannière de cookies ?

Incluez-le simplement dans votre prompt — par exemple, « ajoute un bouton Tout refuser avec le même poids visuel que le bouton Accepter ». MeDo génèrera les deux boutons avec des styles assortis et câblera les placeholders de logique appropriés.

Puis-je générer un modal de préférences de cookies avec l'IA ?

Oui. Demandez à MeDo d'inclure un panneau de préférences avec des toggles par catégorie (ex. : Analytique, Marketing, Cookies fonctionnels). MeDo génèrera un modal complet avec des interrupteurs, des descriptions de catégories et des actions sauvegarder/confirmer.

La bannière de cookies IA fonctionne-t-elle avec Google Analytics et Meta Pixel ?

MeDo génère l'interface utilisateur et la logique de consent-gate. Vous pouvez lui demander d'inclure des hooks placeholder pour bloquer ou charger des scripts d'analyse selon le consentement de l'utilisateur. Le raccordement à votre gestionnaire de tags ou SDK d'analyse spécifique nécessite une petite étape d'intégration après la génération.