Générateur de bandeau cookies

Générez le code HTML, CSS et JavaScript d'un bandeau de consentement aux cookies simple, à copier-coller sur votre site pour proposer un choix "Accepter / Refuser" avec mémorisation du choix dans le navigateur du visiteur. Tout le code est composé localement, sans serveur.

Message

Libellé bouton "Accepter"

Libellé bouton "Refuser"

Libellé du lien

URL du lien (politique de confidentialité)

Position

Couleur de fond

Couleur du texte

Couleur bouton "Accepter"

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

Code à copier-coller

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="Consentement aux cookies">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

Comment ça marche

Personnalisez le message, les libellés des boutons et les couleurs, prévisualisez le rendu, puis copiez le bloc HTML/CSS/JS complet dans votre site : collez-le juste avant la balise de fermeture </body> de votre page. Le script mémorise le choix du visiteur dans le stockage local de son navigateur pour ne plus réafficher le bandeau une fois qu'il a répondu.

Ce bandeau suffit-il à être conforme au RGPD ?

Ce générateur fournit une base technique fonctionnelle (affichage, choix, mémorisation), mais la conformité réelle dépend aussi de ce que vous faites concrètement avec les cookies : les cookies non essentiels (analytics, publicité) doivent rester désactivés tant que l'utilisateur n'a pas cliqué sur "Accepter". Adaptez le commentaire "TODO" dans le code JavaScript généré pour activer vos scripts uniquement après consentement, et consultez un professionnel du droit si votre site traite des données sensibles.

Puis-je modifier le code généré après l'avoir copié ?

Oui, le code est un point de départ standard, sans dépendance externe ni framework requis : vous pouvez librement l'adapter à la charte graphique de votre site ou l'intégrer dans un composant existant.

Le code est généré entièrement dans votre navigateur : aucune de vos informations n'est envoyée à un serveur externe.