Ce générateur suffit-il à rendre mon site conforme au RGPD ?

La bannière donne au visiteur un choix clair entre accepter et refuser et conserve sa préférence, ce qui couvre la partie interface de consentement. Il vous faut tout de même une page politique de confidentialité, et bloquer réellement les scripts des catégories refusées.

Comment empêcher Google Analytics de se charger tant que le visiteur n'a pas consenti ?

De deux façons. La plus simple est de cocher la case Mode de consentement Google v2 : le script généré émet alors les signaux de consentement gtag, refusés au départ et accordés uniquement après que le visiteur accepte la catégorie correspondante. Sinon, conditionnez vous-même la balise gtag avec une vérification qui lit le cookie posé par la bannière, afin que le script ne soit jamais inséré tant que le consentement n'est pas donné.

Puis-je modifier les textes une fois la bannière en production ?

Oui. Rouvrez le générateur avec des réglages proches, régénérez et remplacez les chaînes dans le div de la bannière. Les visiteurs existants conservent leur choix car le nom du cookie ne change pas.

Quelle est la différence entre opt-in et opt-out ?

En opt-in toutes les catégories non essentielles démarrent désactivées et ne s'activent qu'après acceptation. En opt-out elles démarrent actives, ce que la CCPA tolère mais que le RGPD n'autorise pas. Si vos visiteurs sont en UE, choisissez opt-in.

La bannière va-t-elle réapparaître à chaque visite ?

Non. Une fois le choix enregistré, le cookie dure aussi longtemps que l'expiration que vous définissez (six mois par défaut). La bannière ne revient qu'à l'expiration, après suppression du cookie, ou si vous incrémentez le numéro de version du consentement dans le fichier JS.

Générateur de Consentement aux Cookies

Générer le code d'une bannière de consentement aux cookies

Paramètres

Style de la bannière

Texte de la bannière

Texte du bouton Accepter

Texte du bouton Refuser

Texte de gestion des préférences

URL de la politique de confidentialité

Texte du lien

Mode de consentement

Expiration du cookie

jours

NécessairesAnalytiqueMarketingFonctionnels

Mode de consentement Google v2Ajoute les signaux de consentement gtag (ad_storage, analytics_storage, ad_user_data, ad_personalization) pour Google Ads et GA4.

Couleurs

Thèmes prédéfinis

Fond

Texte

Texte du bouton Accepter

Texte du bouton Accepter Texte

Texte du bouton Refuser

Texte du bouton Refuser Texte

Aperçu

Nous utilisons des cookies pour améliorer votre expérience. En continuant à visiter ce site, vous acceptez notre utilisation des cookies.

Résultat

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">Nous utilisons des cookies pour améliorer votre expérience. En continuant à visiter ce site, vous acceptez notre utilisation des cookies.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Tout accepter</button>
      <button id="cc-reject-btn">Tout refuser</button>
      <button id="cc-manage-btn">Gérer les préférences</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Préférences des cookies">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Préférences des cookies</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Nécessaires</div>
          <div class="cc-pref-desc">Indispensables au fonctionnement du site. Ils ne peuvent pas être désactivés.</div>
        </div>
        <span class="cc-pref-always">Toujours actifs</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Analytiques</div>
          <div class="cc-pref-desc">Nous aident à comprendre comment les visiteurs utilisent le site afin de l’améliorer.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Analytiques"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Enregistrer les préférences</button>
      <button id="cc-prefs-cancel">Annuler</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) +
      ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

Qu'est-ce que Générateur de Consentement aux Cookies ?

Crée une bannière de consentement aux cookies conforme au RGPD et vous remet le HTML, le CSS et le JavaScript à ajouter à votre site. Choisissez un style, définissez les catégories de cookies et réglez la façon dont le consentement est enregistré.

La sortie est un fragment autonome : du HTML pour la bannière, du CSS pour le style et un petit JavaScript qui enregistre le choix du visiteur dans un cookie et ne charge que les scripts des catégories acceptées. Vous pouvez le coller dans votre site ou télécharger les trois fichiers dans un zip.

Comment utiliser

Choisissez un style de bannière (barre supérieure, barre inférieure, fenêtre modale ou pop-up de coin) et personnalisez les couleurs, les textes et les libellés des boutons.
Configurez les catégories de cookies (nécessaires, analytiques, marketing, fonctionnels), la durée de mémorisation du consentement et le mode de consentement (opt-in ou opt-out).
Copiez ou téléchargez le code HTML/CSS/JS généré et intégrez-le à votre site web.

Quand l'utiliser

Ajouter un avis RGPD ou loi cookies à un site statique ou à une landing marketing.
Remplacer une plateforme de consentement qui charge 200 Ko avant le moindre clic du visiteur.
Prototyper l'allure de la bannière avant de remettre la spécification à l'équipe technique.

Résultat

Le propriétaire d'un blog souhaitant se conformer au RGPD sélectionne une bannière en barre inférieure avec les boutons Tout accepter et Gérer les préférences, active les catégories analytiques et marketing, et télécharge le snippet de code à coller avant la balise de fermeture body.

FAQ

Ce générateur suffit-il à rendre mon site conforme au RGPD ?: La bannière donne au visiteur un choix clair entre accepter et refuser et conserve sa préférence, ce qui couvre la partie interface de consentement. Il vous faut tout de même une page politique de confidentialité, et bloquer réellement les scripts des catégories refusées.
Comment empêcher Google Analytics de se charger tant que le visiteur n'a pas consenti ?: De deux façons. La plus simple est de cocher la case Mode de consentement Google v2 : le script généré émet alors les signaux de consentement gtag, refusés au départ et accordés uniquement après que le visiteur accepte la catégorie correspondante. Sinon, conditionnez vous-même la balise gtag avec une vérification qui lit le cookie posé par la bannière, afin que le script ne soit jamais inséré tant que le consentement n'est pas donné.
Puis-je modifier les textes une fois la bannière en production ?: Oui. Rouvrez le générateur avec des réglages proches, régénérez et remplacez les chaînes dans le div de la bannière. Les visiteurs existants conservent leur choix car le nom du cookie ne change pas.
Quelle est la différence entre opt-in et opt-out ?: En opt-in toutes les catégories non essentielles démarrent désactivées et ne s'activent qu'après acceptation. En opt-out elles démarrent actives, ce que la CCPA tolère mais que le RGPD n'autorise pas. Si vos visiteurs sont en UE, choisissez opt-in.
La bannière va-t-elle réapparaître à chaque visite ?: Non. Une fois le choix enregistré, le cookie dure aussi longtemps que l'expiration que vous définissez (six mois par défaut). La bannière ne revient qu'à l'expiration, après suppression du cookie, ou si vous incrémentez le numéro de version du consentement dans le fichier JS.

Générateur de Consentement aux Cookies

Paramètres

Couleurs

Aperçu

Résultat

Qu'est-ce que Générateur de Consentement aux Cookies ?

Comment utiliser

Quand l'utiliser

Résultat

FAQ

Outils similaires

Générateur de données structurées

Page web en PDF

Générateur de politique de confidentialité

Générateur de conditions d'utilisation

Minificateur CSS

Minificateur HTML

Générateur de Consentement aux Cookies

Paramètres

Couleurs

Aperçu

Résultat