Generador de banner de cookies

Genere el código HTML, CSS y JavaScript de un banner de consentimiento de cookies sencillo, para copiar y pegar en su sitio y ofrecer una opción «Aceptar / Rechazar» que se recuerda en el navegador del visitante. Todo el código se compone localmente, sin servidor.

Mensaje

Etiqueta del botón «Aceptar»

Etiqueta del botón «Rechazar»

Etiqueta del enlace

URL del enlace (política de privacidad)

Posición

Color de fondo

Color del texto

Color del botón «Aceptar»

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

Código para copiar y pegar

<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="Consentimiento de 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>

Cómo funciona

Personalice el mensaje, las etiquetas de los botones y los colores, previsualice el resultado y copie el bloque HTML/CSS/JS completo en su sitio: péguelo justo antes de la etiqueta de cierre </body> de su página. El script guarda la elección del visitante en el almacenamiento local de su navegador para no volver a mostrar el banner una vez que ha respondido.

¿Basta este banner para cumplir el RGPD?

Este generador proporciona una base técnica funcional (visualización, elección, memorización), pero el cumplimiento real depende también de lo que haga en la práctica con las cookies: las cookies no esenciales (analítica, publicidad) deben permanecer desactivadas mientras el usuario no haya hecho clic en «Aceptar». Adapte el comentario «TODO» del código JavaScript generado para activar sus scripts únicamente tras el consentimiento, y consulte a un profesional del derecho si su sitio trata datos sensibles.

¿Puedo modificar el código generado después de copiarlo?

Sí, el código es un punto de partida estándar, sin dependencias externas ni frameworks: puede adaptarlo libremente a la identidad gráfica de su sitio o integrarlo en un componente existente.

El código se genera íntegramente en su navegador: ninguno de sus datos se envía a un servidor externo.