¿Este generador deja mi sitio conforme al RGPD por sí solo?

El banner da al visitante una opción clara de aceptar o rechazar y guarda su preferencia, lo cual cubre la parte de la interfaz de consentimiento. Sigues necesitando una página de política de privacidad y debes bloquear de verdad los scripts de las categorías que rechace.

¿Cómo bloqueo Google Analytics hasta que el visitante consienta?

De dos formas. La más sencilla es marcar la casilla del Modo de consentimiento de Google v2: entonces el script generado emite las señales de consentimiento de gtag, que empiezan denegadas y pasan a concedidas solo cuando el visitante acepta la categoría correspondiente. La otra es condicionar tú mismo la etiqueta gtag con una comprobación que lea la cookie que pone el banner, de modo que el script no se inserte hasta que se dé el consentimiento.

¿Puedo cambiar los textos una vez publicado el banner?

Sí. Vuelve a abrir el generador con ajustes parecidos, regéneralo y reemplaza las cadenas dentro del div del banner. Los visitantes existentes mantienen su elección porque el nombre de la cookie no cambia.

¿Cuál es la diferencia entre modo opt-in y opt-out?

El opt-in arranca con todas las categorías no esenciales desactivadas y solo las activa cuando el usuario acepta. El opt-out empieza con ellas activas, lo cual permite CCPA pero no RGPD. Si tienes visitantes en la UE, usa opt-in.

¿Volverá a aparecer el banner cada vez que entre el visitante?

No. Cuando el visitante guarda una elección, la cookie dura lo que indique la caducidad que fijes (seis meses por defecto). El banner solo reaparece cuando esa cookie caduca, si se borra, o si tú cambias la versión de consentimiento dentro del fichero JS.

Generador de Consentimiento de Cookies

Genera código para banners de consentimiento de cookies

Ajustes

Estilo del banner

Texto del banner

Texto del botón Aceptar

Texto del botón Rechazar

Texto de gestión de preferencias

URL de la política de privacidad

Texto del enlace

Modo de consentimiento

Caducidad de la cookie

días

NecesariasAnalíticaMarketingFuncionales

Modo de consentimiento de Google v2Añade las señales de consentimiento de gtag (ad_storage, analytics_storage, ad_user_data, ad_personalization) para Google Ads y GA4.

Colores

Temas predefinidos

Fondo

Texto

Texto del botón Aceptar

Texto del botón Aceptar Texto

Texto del botón Rechazar

Texto del botón Rechazar Texto

Vista previa

Usamos cookies para mejorar tu experiencia. Si sigues navegando por este sitio, aceptas nuestro uso de cookies.

Resultado

<!-- 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">Usamos cookies para mejorar tu experiencia. Si sigues navegando por este sitio, aceptas nuestro uso de cookies.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Aceptar todo</button>
      <button id="cc-reject-btn">Rechazar todo</button>
      <button id="cc-manage-btn">Gestionar preferencias</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Preferencias de cookies">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Preferencias de cookies</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Necesarias</div>
          <div class="cc-pref-desc">Imprescindibles para que el sitio funcione. No se pueden desactivar.</div>
        </div>
        <span class="cc-pref-always">Siempre activas</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Analíticas</div>
          <div class="cc-pref-desc">Nos ayudan a entender cómo usan el sitio los visitantes para poder mejorarlo.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Analíticas"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Guardar preferencias</button>
      <button id="cc-prefs-cancel">Cancelar</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é es Generador de Consentimiento de Cookies?

Crea un banner de consentimiento de cookies conforme al RGPD y te entrega el HTML, CSS y JavaScript para añadirlo a tu sitio. Elige un estilo, define las categorías de cookies y ajusta cómo se guarda el consentimiento.

El resultado es un fragmento autónomo: HTML para el banner, CSS para los estilos y un pequeño JavaScript que guarda la decisión del visitante en una cookie y solo carga los scripts de las categorías aceptadas. Puedes pegarlo directamente en tu sitio o descargar los tres ficheros en un zip.

Cómo usar

Elige un estilo de banner (barra superior, barra inferior, modal o ventana emergente de esquina) y personaliza los colores, el texto y las etiquetas de los botones.
Configura las categorías de cookies (necesarias, analíticas, marketing, funcionales), cuánto tiempo se recuerda el consentimiento y el comportamiento de consentimiento (opt-in vs. opt-out).
Copia o descarga el código HTML/CSS/JS generado y añádelo a tu sitio web.

Cuándo usar

Añadir un aviso GDPR o LOPD a un sitio estático o a una landing de marketing.
Sustituir una plataforma de consentimiento que carga 200 KB antes de que el usuario haga clic.
Prototipar el diseño del banner antes de pasarle la especificación al equipo de desarrollo.

Resultado

El propietario de un blog que busca cumplir con el RGPD selecciona un banner de barra inferior con los botones 'Aceptar todo' y 'Gestionar preferencias', activa las categorías de analíticas y marketing, y descarga el fragmento de código para añadirlo antes de la etiqueta de cierre del cuerpo.

Preguntas frecuentes

¿Este generador deja mi sitio conforme al RGPD por sí solo?: El banner da al visitante una opción clara de aceptar o rechazar y guarda su preferencia, lo cual cubre la parte de la interfaz de consentimiento. Sigues necesitando una página de política de privacidad y debes bloquear de verdad los scripts de las categorías que rechace.
¿Cómo bloqueo Google Analytics hasta que el visitante consienta?: De dos formas. La más sencilla es marcar la casilla del Modo de consentimiento de Google v2: entonces el script generado emite las señales de consentimiento de gtag, que empiezan denegadas y pasan a concedidas solo cuando el visitante acepta la categoría correspondiente. La otra es condicionar tú mismo la etiqueta gtag con una comprobación que lea la cookie que pone el banner, de modo que el script no se inserte hasta que se dé el consentimiento.
¿Puedo cambiar los textos una vez publicado el banner?: Sí. Vuelve a abrir el generador con ajustes parecidos, regéneralo y reemplaza las cadenas dentro del div del banner. Los visitantes existentes mantienen su elección porque el nombre de la cookie no cambia.
¿Cuál es la diferencia entre modo opt-in y opt-out?: El opt-in arranca con todas las categorías no esenciales desactivadas y solo las activa cuando el usuario acepta. El opt-out empieza con ellas activas, lo cual permite CCPA pero no RGPD. Si tienes visitantes en la UE, usa opt-in.
¿Volverá a aparecer el banner cada vez que entre el visitante?: No. Cuando el visitante guarda una elección, la cookie dura lo que indique la caducidad que fijes (seis meses por defecto). El banner solo reaparece cuando esa cookie caduca, si se borra, o si tú cambias la versión de consentimiento dentro del fichero JS.

Generador de Consentimiento de Cookies

Ajustes

Colores

Vista previa

Resultado

¿Qué es Generador de Consentimiento de Cookies?

Cómo usar

Cuándo usar

Resultado

Preguntas frecuentes

Herramientas relacionadas

Generador de datos estructurados

Página web a PDF

Generador de política de privacidad

Generador de términos de servicio

Minificador CSS

Minificador de HTML

Generador de Consentimiento de Cookies

Ajustes

Colores

Vista previa

Resultado