Cookie Consent Banner Générateur

Bannière de consentement cookies construite à partir d'un court questionnaire - gratuite, privée et modifiable

100 % gratuit. Fonctionne entièrement dans votre navigateur : vos fichiers et données ne quittent jamais votre appareil et rien n'est envoyé à un serveur.

Modèle, pas un avis juridique. This generates working code, not legal advice. It gives you a compliant mechanism; whether your site is compliant also depends on what you connect to it. Two things it cannot do for you: tag every third-party script so the blocker can hold it back, and keep a record of consents if your regulator expects one. Test it with your browser developer tools open - if a tracking cookie appears before you click Accept, something is still loading outside the blocker.

Partir d’un exemple

Remplit chaque réponse d’un exemple travaillé que vous pouvez modifier. Choisissez celui le plus proche de votre activité.

0 of 3 details filled
Your site
Which consent model

Opt-in is required in the UK and EU. If you have any European visitors at all, choose it.

Opt-in is required in the UK and EU. If you have any European visitors at all, choose it.
Apparence
Recommended. A single Accept-or-Reject is legal but converts worse than letting people keep analytics on and turn advertising off.
Signals and behaviour
Needed if you use Google Analytics or Google Ads and have EEA or UK visitors. Without it Google stops modelling data for those users.
Required in California and several other US states. The browser sends it automatically; this treats it as a rejection.
Consent has to be as easy to withdraw as it was to give, so there must be a way back to this after the banner is gone.

Cookie Consent Banner

5 sections · 1111 words · updates as you type

Cookie Consent Banner

Last updated: 19 September 2026

Paste this into your site

<!-- Cookie consent banner. Put the <style> and <script> in <head>,
     and the markup just before </body>. -->
<style>
#cc-banner{position:fixed;z-index:2147483000;right:16px;bottom:16px;max-width:420px;width:calc(100% - 32px);
  box-sizing:border-box;padding:20px;background:#fff;color:#0f172a;border:1px solid #e2e8f0;
  border-radius:14px;box-shadow:0 10px 40px rgba(2,6,23,.18);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#cc-banner h2{margin:0 0 8px;font-size:1rem;font-weight:650}
#cc-banner p{margin:0 0 14px;color:#475569}
#cc-banner a{color:#4f46e5;text-decoration:underline}
#cc-actions{display:flex;gap:10px;flex-wrap:wrap}
#cc-banner button{flex:1 1 auto;min-width:120px;padding:11px 16px;border-radius:9px;
  font:inherit;font-weight:600;cursor:pointer;border:1px solid #4f46e5}
#cc-accept{background:#4f46e5;color:#fff}
#cc-reject{background:transparent;color:#4f46e5}
#cc-prefs{flex:0 0 auto;min-width:0;background:transparent;color:#475569;border-color:transparent;text-decoration:underline}
#cc-banner button:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}
#cc-options{display:none;margin:0 0 14px;padding:12px 0 0;border-top:1px solid #e2e8f0}
#cc-options.cc-open{display:block}
#cc-options label{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;cursor:pointer}
#cc-options input{margin-top:3px;width:18px;height:18px;accent-color:#4f46e5}
#cc-options small{display:block;color:#64748b}
#cc-reopen{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (prefers-color-scheme:dark){
  #cc-banner{background:#0f172a;color:#e2e8f0;border-color:#1e293b}
  #cc-banner p{color:#94a3b8}
  #cc-prefs{color:#94a3b8}
  #cc-options{border-top-color:#1e293b}#cc-options small{color:#94a3b8}
}
@media (prefers-reduced-motion:reduce){#cc-banner{transition:none}}
</style>

<div id="cc-banner" role="dialog" aria-modal="false" aria-labelledby="cc-title" aria-describedby="cc-desc" hidden>
  <h2 id="cc-title">Cookies on this site</h2>
  <p id="cc-desc">We use cookies to run this site and, with your permission, to understand how it is used.
    Nothing optional is set until you choose.
    <a href="/cookie-policy">Read our cookie policy</a>.</p>
  <div id="cc-options">
    <label><input type="checkbox" checked disabled>
      <span>Essential<small>Needed for the site to work. Always on.</small></span></label>
    <label><input type="checkbox" id="cc-analytics">
      <span>Analytics<small>Counts visits so we can see what is used.</small></span></label>
    <label><input type="checkbox" id="cc-marketing">
      <span>Marketing<small>Measures advertising and allows targeted ads.</small></span></label>
  </div>
  <div id="cc-actions">
    <button type="button" id="cc-accept">Accept all</button>
    <button type="button" id="cc-reject">Reject all</button>
    <button type="button" id="cc-prefs">Choose</button>
  </div>
</div>

<script>
(function () {
  var KEY = "cc-consent-v1";
  var el = function (id) { return document.getElementById(id); };
  var banner = el("cc-banner");

  function read() {
    try { return JSON.parse(localStorage.getItem(KEY) || "null"); } catch (e) { return null; }
  }
  function write(state) {
    try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {}
  }

  // Google Consent Mode v2. Must run BEFORE the Google tag loads,
  // which is why this snippet goes in the head.
  window.dataLayer = window.dataLayer || [];
  function gtag() { window.dataLayer.push(arguments); }
  function signal(state) {
    gtag("consent", "update", {
      analytics_storage: state.analytics ? "granted" : "denied",
      ad_storage: state.marketing ? "granted" : "denied",
      ad_user_data: state.marketing ? "granted" : "denied",
      ad_personalization: state.marketing ? "granted" : "denied"
    });
  }
  gtag("consent", "default", {
    analytics_storage: "denied",
    ad_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500
  });

  // Turns every blocked script tag of a granted category into a real one.
  // Scripts are written as: <script type="text/plain" data-consent="analytics" src="...">
  function unblock(state) {
    var nodes = document.querySelectorAll("script[type='text/plain'][data-consent]");
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      var want = node.getAttribute("data-consent");
      if (!state[want]) continue;
      var live = document.createElement("script");
      for (var j = 0; j < node.attributes.length; j++) {
        var at = node.attributes[j];
        if (at.name !== "type" && at.name !== "data-consent") live.setAttribute(at.name, at.value);
      }
      live.text = node.text;
      node.parentNode.replaceChild(live, node);
    }
  }

  function apply(state) {
    write(state);
    signal(state);
    unblock(state);
    document.dispatchEvent(new CustomEvent("cc:consent", { detail: state }));
    hide();
  }

  function show() {
    banner.hidden = false;
    banner.querySelector("button").focus();
  }
  function hide() {
    banner.hidden = true;
  }

  el("cc-accept").addEventListener("click", function () {
    apply({ essential: true, analytics: true, marketing: true, at: Date.now() });
  });
  el("cc-reject").addEventListener("click", function () {
    apply({ essential: true, analytics: false, marketing: false, at: Date.now() });
  });
  el("cc-prefs").addEventListener("click", function () {
    var panel = el("cc-options");
    if (!panel.classList.contains("cc-open")) {
      panel.classList.add("cc-open");
      this.textContent = "Save choices";
      return;
    }
    apply({
      essential: true,
      analytics: el("cc-analytics").checked,
      marketing: el("cc-marketing").checked,
      at: Date.now()
    });
  });

  // Withdrawing consent has to be as easy as giving it, so this
  // reopens the banner from anywhere: <button id="cc-reopen">Cookie settings</button>
  var reopen = el("cc-reopen");
  if (reopen) reopen.addEventListener("click", show);

  var saved = read();
  // Global Privacy Control: a browser-level opt-out that US state law
  // requires you to honour. Treated as a rejection, recorded so the
  // banner does not then ask a question it has already answered.
  if (!saved && (navigator.globalPrivacyControl === true)) {
    apply({ essential: true, analytics: false, marketing: false, gpc: true, at: Date.now() });
    return;
  }
  if (saved) {
    signal(saved);
    unblock(saved);
    if (el("cc-analytics")) el("cc-analytics").checked = !!saved.analytics;
    if (el("cc-marketing")) el("cc-marketing").checked = !!saved.marketing;
  } else {
    show();
  }
})();
</script>

How to install it

1. Copy the block above into your page. The style and script can go in the head; the markup goes just before the closing body tag. On WordPress, a "header and footer scripts" plugin is the usual place; on Shopify it is theme.liquid.

2. Find every tracking script on your site - analytics, pixels, chat widgets, heatmaps.

3. Change each one from type="text/javascript" to type="text/plain" and add data-consent="analytics" or data-consent="marketing". That is what holds them back until someone agrees; a script you forget to tag will keep loading regardless of what the banner says.

4. Leave the Google tag itself in place and untagged. Consent Mode signals handle it: the tag loads, but it stores nothing until the consent update grants it.

5. Add a button with id="cc-reopen" to your footer, labelled something like "Cookie settings". Consent must be as easy to withdraw as it was to give, and that button is how.

6. Test it. Open a private window with developer tools on the Application tab, load the site, and look at Cookies before you click anything. If a tracker has already written one, it is not tagged properly.

What a blocked script looks like

<!-- BEFORE - runs immediately, sets cookies before anyone agrees -->
<script src="https://example-analytics.com/tag.js"></script>

<!-- AFTER - held back until consent for its category exists -->
<script type="text/plain" data-consent="analytics"
        src="https://example-analytics.com/tag.js"></script>

<!-- Inline scripts work the same way -->
<script type="text/plain" data-consent="marketing">
  /* pixel code here */
</script>

Reacting to a choice in your own code

// Fires every time a decision is made or restored on load.
document.addEventListener("cc:consent", function (e) {
  if (e.detail.analytics) {
    // start something that needs analytics consent
  }
});

// Read the stored decision anywhere:
var consent = JSON.parse(localStorage.getItem("cc-consent-v1") || "null");

What this banner does and does not do

What it does

  • Sets nothing before a choice. Tagged scripts stay inert until someone accepts, which is what the UK and EU rules require and what most free snippets get wrong.
  • Gives Reject the same weight as Accept. Same size, same prominence, one click. A greyed-out or hidden reject option is a dark pattern that has attracted fines.
  • Remembers the decision in localStorage under a versioned key, so changing the key re-asks everyone when your cookies change.
  • Works with a keyboard and a screen reader. It is a labelled dialog, focus moves into it, and the controls are real buttons.
  • Honours Global Privacy Control. Browsers that send the signal are treated as having rejected, without being asked - which is what California and several other states require.
  • Sends Google Consent Mode v2 signals , so Google Analytics and Google Ads behave correctly for EEA and UK visitors instead of silently dropping them.

What it does not do

  • It does not keep a server-side record of who consented and when. If your regulator or your DPO expects an audit trail, you need to post the decision to your own endpoint - the cc:consent event is where to do it.
  • It does not scan your site for trackers. Anything you do not tag keeps loading.
  • It does not write your cookie policy. The banner links to it; you still need the page.

Généré à partir d’un modèle. Pas un avis juridique - lisez-le avant de le publier ou de le signer.

Autres documents que vous pouvez générer

La plupart des sites ont besoin de plus d’un. Une politique de confidentialité sans CGU, ou des CGU sans politique de remboursement, laisse le vide évident.

Privacy PolicyA privacy policy written from what your site actually does - GDPR and CCPA sections included only where they apply.Terms and ConditionsTerms of service built around what you actually sell - goods, subscription, downloads or services.Cookie PolicyA cookie policy with a real table - each cookie named, with its purpose and how long it lasts.Refund and Return PolicyA refund policy customers can follow and payment processors accept - windows, exclusions and statutory rights in plain words.Website DisclaimerA disclaimer that names the actual risk your site carries, plus affiliate and sponsorship disclosures.Accessibility StatementA WCAG accessibility statement that states what you actually meet, names known issues, and gives people a route to report problems.Non-Disclosure AgreementA mutual or one-way NDA with a real purpose clause, standard carve-outs and a defined term.Freelance ContractAn independent contractor agreement that pins down scope, revisions, IP ownership and what happens when payment is late.Data Processing AgreementA GDPR Article 28 processor agreement with the eight mandatory clauses and a filled-in processing schedule.W-9 FormFills a substitute Form W-9 in your browser - your TIN is never uploaded, stored or sent anywhere.1099-NEC Contractor SummaryPrepares a 1099-NEC recipient statement and a payer summary - with a straight answer about what you can and cannot print yourself.Shipping PolicyA shipping policy Shopify and Amazon sellers can publish - origin, times, tracking, duties and who pays.DSAR Form GeneratorA data-delete and access request page you can host - GDPR and CCPA wording, no upload, no signup.

Jump to the next useful tool without leaving your flow.

See more

À propos de cet outil

Répondez à une poignée de questions et la bannière s'écrit toute seule. Elle existe pour les développeurs et propriétaires de sites qui ont besoin d'un mécanisme de consentement fonctionnel plutôt que d'une autre page de politique, et le jour même où vous ajoutez des analytics ou un pixel publicitaire, pas après, est le moment où cela vaut vingt minutes. C'est le seul outil de l'ensemble qui produit du code plutôt que de la prose, car une politique de cookies décrit ce que vous déposez tandis qu'une bannière est ce qui vous empêche de le déposer. La plupart des extraits gratuits déposent le cookie d'abord et affichent un avis ensuite, ce qui est précisément le comportement que la directive ePrivacy interdit. Le questionnaire n'est pas décoratif. Les clauses apparaissent et disparaissent selon ce que vous lui dites, c'est pourquoi deux personnes utilisant cette page obtiennent des bannières matériellement différentes plutôt que le même texte avec un nom différent en tête. Tout s'exécute dans votre navigateur. Ce que vous tapez n'est jamais téléversé, jamais stocké, et disparaît lorsque vous fermez l'onglet - ce qui compte ici plus que sur la plupart des outils, car ces documents portent des informations d'entreprise, des noms de clients et parfois des identifiants fiscaux.

Comment utiliser cet outil

  1. Répondez aux questionsNom du site. Lien vers votre politique de cookies. De quel modèle de consentement avez-vous besoin ?. Rien de ce que vous tapez ne quitte le navigateur.
  2. Regardez-le se construireLes clauses apparaissent et disparaissent au fil de vos réponses, donc la bannière correspond à ce que vous faites réellement plutôt qu'à un modèle générique.
  3. Copier ou téléchargerCopiez le code, ou téléchargez le fichier HTML et collez-le dans votre site.

Pourquoi l’utiliser

  • Produit du code fonctionnel que vous pouvez coller, pas des instructions pour l'implémenter vous-même.
  • Construit à partir de vos réponses, donc les clauses dont vous n'avez pas besoin sont omises plutôt qu'ajoutées pour faire du volume.
  • Gratuit, sans filigrane, sans barrière e-mail et sans limite par document.
  • Dit clairement ce qu'il est et n'est pas, au-dessus de l'aperçu plutôt que dans un pied de page.
  • S'exécute entièrement dans votre navigateur. Rien n'est téléversé, rien n'est stocké, pas de compte.

Usages courants

  • Remplacer une bannière copiée qui décrit une autre entreprise.
  • Donner un brouillon à un avocat pour relecture plutôt que de le payer pour partir de zéro.
  • Développeurs et propriétaires de sites qui ont besoin d'un mécanisme de consentement fonctionnel plutôt que d'une autre page de politique.
  • Mettre quelque chose en place le jour même où vous ajoutez des analytics ou un pixel publicitaire, pas après.
  • Préparer ce qu'un client, une boutique d'applications ou un prestataire de paiement a demandé à voir.

Conseils pour de meilleurs résultats

  • Remplissez les champs de texte libre plutôt que de les sauter. Les listes nommées - sous-traitants, exclusions, livrables - sont ce qui le fait sonner comme le vôtre plutôt que copié.
  • Installer la bannière et laisser les scripts de suivi intacts. La bannière ne bloque rien à elle seule - chaque script doit être retagué pour que le bloqueur puisse le retenir, et un pixel non tagué continue de se déclencher pendant que la bannière demande poliment la permission.
  • Testez avec les outils développeur ouverts. Si un cookie de suivi apparaît avant que vous cliquiez sur Accepter, un script se charge encore hors du bloqueur.
  • Lisez-le avant de le publier. C'est un brouillon construit à partir de clauses types, et vous seul savez si chaque ligne est vraie pour vous.

Erreurs à éviter

  • Installer la bannière et laisser les scripts de suivi intacts. La bannière ne bloque rien à elle seule - chaque script doit être retagué pour que le bloqueur puisse le retenir, et un pixel non tagué continue de se déclencher pendant que la bannière demande poliment la permission.
  • La publier et ne plus jamais y regarder. Elles deviennent obsolètes - vous ajoutez un outil, changez de sous-traitant, commencez à vendre ailleurs, et la bannière décrit encore l'année dernière.
  • Traiter un brouillon généré comme un texte relu. C'est un point de départ, et lorsque les enjeux sont réels, une relecture professionnelle en vaut la peine.
  • Laisser le texte de substitution. Tout ce qui est entre crochets est un champ que vous avez sauté, et les lecteurs le voient tout de suite.

Questions fréquentes

Répondez aux questions à gauche. La bannière se construit au fur et à mesure, et vous pouvez la copier, ou la télécharger en PDF, Word ou texte brut lorsqu'elle vous convient.

Non. Il assemble un brouillon à partir de clauses types, et chaque page l'indique au-dessus de l'aperçu. Les plus lourdes amendes cookies de l'UE n'ont pas concerné des bannières manquantes. Elles visaient des bannières où refuser était plus difficile qu'accepter, ou où les traceurs tournaient quel que soit la réponse.

Non. Tout se passe sur votre appareil - rien n'est envoyé à un serveur, rien n'est stocké, et fermer l'onglet l'efface.

Installer la bannière et laisser les scripts de suivi intacts. La bannière ne bloque rien à elle seule - chaque script doit être retagué pour que le bloqueur puisse le retenir, et un pixel non tagué continue de se déclencher pendant que la bannière demande poliment la permission.

Oui. Téléchargez la version Word et modifiez ce que vous voulez - c'est un .docx normal, sans protection.

La plupart des personnes ont aussi besoin de la politique de cookies et la politique de confidentialité. Ils couvrent les lacunes que celui-ci ne couvre pas.

De façon générale, les développeurs et propriétaires de sites qui ont besoin d'un mécanisme de consentement fonctionnel plutôt que d'une autre page de politique. Le meilleur moment pour le faire est le jour même où vous ajoutez des analytics ou un pixel publicitaire, pas après.

Les gens recherchent aussi

  • générateur de bannière de consentement cookies sans inscription
  • générateur de bannière de consentement cookies pour petite entreprise
  • générateur de bannière de consentement cookies usa
  • générateur de bannière de consentement cookies uk
  • générateur de bannière de consentement cookies gratuit
  • modèle de générateur de bannière de consentement cookies
  • générateur de bannière de consentement cookies

Related guides