Cookie Banner

Sistema completo de gestión de cookies conforme a la legislación española (RGPD y LSSI-CE) con diseño moderno y funcionalidad avanzada.

RGPD Compliant LSSI-CE Bootstrap 5 Responsive

Banner Básico

El banner aparece en la parte inferior con opciones para aceptar, rechazar o configurar cookies.

Demo en Vivo

<!-- Cookie Banner -->
<div id="cookieBanner" class="cookie-banner">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h6 class="fw-bold mb-2">
                    <i class="fas fa-cookie-bite text-primary me-2"></i>
                    Configuración de Cookies
                </h6>
                <p class="mb-0 small">
                    Utilizamos cookies propias y de terceros para mejorar nuestros servicios.
                    Puedes obtener más información en nuestra
                    <a href="/politica-cookies" class="text-primary">Política de Cookies</a>.
                </p>
            </div>
            <div class="col-lg-4 text-end mt-3 mt-lg-0">
                <button class="btn btn-outline-secondary btn-sm me-2" onclick="openCookieSettings()">
                    Configurar
                </button>
                <button class="btn btn-secondary btn-sm me-2" onclick="rejectAllCookies()">
                    Rechazar
                </button>
                <button class="btn btn-primary btn-sm" onclick="acceptAllCookies()">
                    Aceptar todo
                </button>
            </div>
        </div>
    </div>
</div>

Modal de Configuración

Permite al usuario elegir qué tipos de cookies acepta, cumpliendo con el consentimiento granular del RGPD.

Cookies Técnicas

Necesarias para el funcionamiento, siempre activas

Cookies de Análisis

Google Analytics, métricas de uso

Cookies de Publicidad

Anuncios personalizados y remarketing

Cookies de Personalización

Preferencias del usuario, idioma

<!-- Cookie Settings Modal -->
<div class="modal fade" id="cookieSettingsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-cog text-primary me-2"></i>
                    Configuración de Cookies
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="cookie-category">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="fw-bold">Cookies Técnicas</h6>
                            <p class="small text-muted mb-0">
                                Necesarias para el funcionamiento básico del sitio web.
                            </p>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox"
                                   id="technicalCookies" checked disabled>
                        </div>
                    </div>
                </div>
                <!-- Más categorías... -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-primary" onclick="saveCustomCookieSettings()">
                    Guardar Configuración
                </button>
            </div>
        </div>
    </div>
</div>

Funcionalidad JavaScript

Clase completa para gestionar el consentimiento, almacenar preferencias y aplicar configuraciones.

Características Principales
🎯 Consentimiento

Guarda las preferencias en localStorage por 365 días

🔄 Gestión de Estado

Verifica y aplica configuraciones automáticamente

📊 Integración Analytics

Activa/desactiva Google Analytics según consentimiento

🎨 Interfaz Fluida

Animaciones suaves y feedback visual

// Clase principal CookieBanner
class CookieBanner {
    constructor() {
        this.COOKIE_NAME = 'mbe_cookie_consent';
        this.COOKIE_DURATION = 365; // días
        this.banner = document.getElementById('cookieBanner');
        this.modal = new bootstrap.Modal(document.getElementById('cookieSettingsModal'));
        this.init();
    }

    init() {
        if (!this.hasConsent()) {
            this.showBanner();
        }
        this.loadSavedSettings();
    }

    saveConsent(settings) {
        const consentData = {
            timestamp: Date.now(),
            settings: settings,
            version: '1.0'
        };

        localStorage.setItem(this.COOKIE_NAME, JSON.stringify(consentData));
        this.hideBanner();
        this.applyCookieSettings(settings);
    }

    applyCookieSettings(settings) {
        if (settings.analytics) {
            this.enableAnalytics();
        } else {
            this.disableAnalytics();
        }
        // Más configuraciones...
    }
}

Requisitos Legales

Importante - Advertencia Legal

Esta implementación proporciona una base técnica, pero siempre debes consultar con un asesor legal para asegurar el cumplimiento total en tu caso específico.

📊 RGPD (Reglamento General de Protección de Datos)
  • Consentimiento libre, específico e informado
  • Posibilidad de retirar el consentimiento
  • Información clara sobre el tratamiento
  • Registro del consentimiento
📝 LSSI-CE (Ley de Servicios de la Sociedad de la Información)
  • Información sobre el uso de cookies
  • Consentimiento previo del usuario
  • Excepciones para cookies técnicas
  • Derecho a rechazar cookies no esenciales

Páginas Legales Obligatorias

Para cumplir completamente con la ley española, necesitas estas páginas adicionales:

📋 Aviso Legal

Obligatorio por LSSI-CE. Identificación del responsable, datos de contacto, actividad.

🔒 Política de Privacidad

Obligatorio por RGPD. Qué datos recoges, cómo los usas, derechos del usuario.

🍪 Política de Cookies

Obligatorio por LSSI-CE. Tipos de cookies, finalidades, cómo gestionarlas.

Templates incluidos

Integración con Google Analytics 

enableAnalytics() {
    // Solo cargar GA si el usuario acepta cookies de análisis
    window.gtag = window.gtag || function(){dataLayer.push(arguments);};
    window.dataLayer = window.dataLayer || [];

    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX', {
        anonymize_ip: true,
        cookie_flags: 'SameSite=None;Secure'
    });

    // Cargar el script de GA4
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    document.head.appendChild(script);
}

disableAnalytics() {
    // Desactivar GA y eliminar cookies
    window['ga-disable-G-XXXXXXXXXX'] = true;
    this.deleteCookie('_ga');
    this.deleteCookie('_ga_XXXXXXXXXX');
    this.deleteCookie('_gid');
}

💡 Mejores Prácticas

🎯 UX/UI
⚡ Performance
🔧 Personalización Avanzada
// Variables CSS personalizables
:root {
    --cookie-banner-bg: rgba(255, 255, 255, 0.98);
    --cookie-primary-color: #667eea;
    --cookie-border-radius: 12px;
    --cookie-transition: all 0.3s ease;
}

// Configuración personalizada
const cookieConfig = {
    duration: 365,
    showDelay: 1000,
    texts: {
        title: 'Configuración de Cookies',
        acceptAll: 'Aceptar todo',
        rejectAll: 'Rechazar'
    },
    urls: {
        cookiePolicy: '/politica-cookies',
        privacyPolicy: '/politica-privacidad'
    }
};

Instalación Completa

Paso a paso
  1. HTML: Copia el banner y modal al final de tu página
  2. JavaScript: Incluye la clase CookieBanner antes de </body>
  3. CSS: Añade los estilos personalizados (opcional)
  4. Páginas legales: Crea Aviso Legal, Política de Privacidad y Cookies
  5. Enlaces: Actualiza URLs a tus páginas legales
  6. Analytics: Configura tu ID de Google Analytics
  7. Pruebas: Verifica funcionamiento en diferentes navegadores

Estado actual del consentimiento:

Verificando...