Como personalizar el estilo del banner de consentimiento

UniConsent CMP ofrece multiples formas de personalizar la apariencia de su banner de consentimiento para que coincida con el diseno de su sitio web.

Opciones integradas

La forma mas sencilla de personalizar su banner es a traves de la configuracion del proyecto en el panel:

• Theme Color: establecer el color primario de su marca.
• Button Text Color: ajustar colores de texto de botones y enlaces.
• Template: elegir entre 10 plantillas de banner.
• Logo: cargar el logotipo de su empresa.

CSS personalizado

Para estilos avanzados, agregue CSS personalizado en el campo Custom CSS de la configuracion de su proyecto.

Ejemplos comunes

Cambiar el color del boton de aceptar:

.unic-btn-accept {
  background-color: #2563eb !important;
  border-radius: 8px !important;
}

Cambiar el fondo del banner:

.unic-bar {
  background-color: #1a1a2e !important;
}

Cambiar el tamano de fuente:

.unic-bar-text {
  font-size: 13px !important;
}

Ocultar el icono de privacidad:

.unic-icon {
  display: none !important;
}

Use un boton de activacion manual en su pagina:

<button onclick='__unicapi("openunic");return false;'>Consent Settings</button>

Seleccion de plantilla

Configure la plantilla en la seccion Template o mediante el parametro barmode.

Integracion solo API (Primera capa personalizada)

Si desea construir su propio banner y usar UniConsent solo para almacenamiento de consentimiento y cumplimiento, active el modo solo API.

Paso 1: Activar modo solo API

En la configuracion del proyecto:

1. Vaya a Settings > GDPR y active API-Only Mode (GDPR).
2. Para CCPA: Settings > U.S. Privacy y active API-Only Mode (CCPA).
3. Opcionalmente, desactive Show Privacy Badge.

La etiqueta CMP seguira cargando en segundo plano.

Paso 2: Construir su propio banner

<div id="my-consent-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; padding:16px; box-shadow:0 -2px 10px rgba(0,0,0,0.1); z-index:9999;">
  <div style="display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto;">
    <p style="margin:0; font-size:14px;">Utilizamos cookies y tecnologias similares.</p>
    <div>
      <button onclick="__unicapi('openOptions')">Preferencias</button>
      <button onclick="__unicapi('openCookiesList')">Lista de cookies</button>
      <button onclick="__unicapi('rejectAll')">Rechazar todo</button>
      <button onclick="__unicapi('agreeAll')">Aceptar todo</button>
    </div>
  </div>
</div>

Paso 3: Mostrar u ocultar segun el estado del consentimiento

<script>
;(function initConsentBanner() {
  var banner = document.getElementById('my-consent-banner')
  var resolved = false

  function checkConsent() {
    if (resolved) return
    if (window['dataLayer']) {
      for (var i = 0; i < window['dataLayer'].length; i++) {
        if (window['dataLayer'][i]['event'] === 'unic_data') {
          resolved = true
          return
        }
      }
    }
    if (typeof window.__unicapi === 'function' && !resolved) {
      banner.style.display = 'block'
    }
    if (!resolved) {
      setTimeout(checkConsent, 200)
    }
  }

  var origPush = (window['dataLayer'] = window['dataLayer'] || []).push
  window['dataLayer'].push = function () {
    var result = origPush.apply(this, arguments)
    for (var i = 0; i < arguments.length; i++) {
      if (arguments[i] && arguments[i]['event'] === 'unic_data') {
        banner.style.display = 'none'
        resolved = true
      }
    }
    return result
  }

  checkConsent()
})()
</script>

Metodos API disponibles

Referencia completa de la API JavaScript.

Compatibilidad CSS

Las reglas CSS existentes en su pagina que apunten a selectores de clase .unic se aplican automaticamente al banner.

Consejos

• Use !important al sobrescribir estilos predeterminados.
• Pruebe en modo vista previa: ?uniconsent_test=1&uniconsent_reset=1
• Los cambios de CSS se aplican despues de publicar su proyecto.