Come personalizzare lo stile del banner di consenso

La CMP di UniConsent offre diversi modi per personalizzare l'aspetto del banner di consenso in modo che corrisponda al design del tuo sito web.

Opzioni integrate

Il modo più semplice per personalizzare il banner è tramite le impostazioni del progetto nella dashboard:

• Theme Color: imposta il colore principale del tuo brand.
• Button Text Color: regola i colori del testo di pulsanti e link.
• Template: scegli tra 10 template di banner nella sezione Template.
• Logo: carica il logo della tua azienda.

CSS personalizzato

Per uno stile avanzato, aggiungi CSS personalizzato nelle impostazioni del progetto, nel campo Custom CSS. Questo CSS viene applicato direttamente al banner di consenso.

Esempi comuni

Cambiare il colore del pulsante di accettazione:

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

Cambiare lo sfondo del banner:

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

Cambiare la dimensione del font:

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

Nascondere l'icona del badge della privacy:

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

In alternativa, usa un pulsante di attivazione manuale nella tua pagina:

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

Selezione del template

UniConsent offre 10 template di banner:

Imposta il template nelle impostazioni del progetto, nella sezione Template, oppure configuralo tramite il parametro barmode.

Integrazione solo API (primo livello personalizzato)

Se vuoi creare il tuo banner di consenso e usare UniConsent solo per l'archiviazione del consenso, l'elenco dei fornitori e la conformità, abilita la modalità API-Only e usa l'API JavaScript per controllare il consenso dalla tua interfaccia.

Passaggio 1: abilita la modalità API-Only

Nelle impostazioni del progetto nella dashboard:

1. Vai alla sezione Settings > GDPR e attiva API-Only Mode (GDPR).
2. Se usi anche il CCPA, vai alla sezione Settings > U.S. Privacy e attiva API-Only Mode (CCPA).
3. Facoltativamente, imposta Show Privacy Badge su OFF nella sezione Display Options.

Il tag della CMP verrà comunque caricato in background, gestendo l'archiviazione del consenso, i segnali IAB TCF e Google Consent Mode, ma il banner predefinito non verrà visualizzato.

Passaggio 2: crea il tuo banner

Crea l'HTML del tuo banner di consenso. Il banner è nascosto per impostazione predefinita e viene mostrato solo quando la CMP è pronta e l'utente non ha ancora espresso il consenso.

<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;">We use cookies and similar technologies.</p>
    <div>
      <button onclick="__unicapi('openOptions')">Preferences</button>
      <button onclick="__unicapi('openCookiesList')">Cookie List</button>
      <button onclick="__unicapi('rejectAll')">Reject All</button>
      <button onclick="__unicapi('agreeAll')">Accept All</button>
    </div>
  </div>
</div>

Passaggio 3: mostra o nascondi in base allo stato del consenso

Aggiungi questo script dopo il tag della CMP. Interroga periodicamente il dataLayer alla ricerca dell'evento unic_data per determinare se l'utente ha già espresso il consenso. Se non viene trovato alcun consenso, viene mostrato il banner personalizzato. Una volta che l'utente ha fatto una scelta, il banner viene nascosto.

<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') {
          // User has already consented - keep banner hidden
          resolved = true
          return
        }
      }
    }
    // CMP loaded but no consent yet - show the banner
    if (typeof window.__unicapi === 'function' && !resolved) {
      banner.style.display = 'block'
    }
    if (!resolved) {
      setTimeout(checkConsent, 200)
    }
  }

  // Listen for new consent actions to hide the banner
  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>

Metodi API disponibili

Questo approccio ti offre il pieno controllo sul design del primo livello, mentre UniConsent gestisce l'archiviazione del consenso, la gestione dell'elenco dei fornitori, la conformità IAB TCF e i segnali di Google Consent Mode.

Consulta il riferimento completo dell'API JavaScript per maggiori dettagli.

Compatibilità con il CSS della pagina

Se nella tua pagina sono presenti regole CSS che usano i selettori di classe .unic, questi stili vengono applicati automaticamente al banner di consenso. Non è necessaria alcuna configurazione aggiuntiva.

Suggerimenti

• Usa !important quando sovrascrivi gli stili predefiniti.
• Testa le modifiche con la modalità di anteprima: aggiungi ?uniconsent_test=1&uniconsent_reset=1 all'URL della pagina.
• Le modifiche al CSS personalizzato hanno effetto dopo la pubblicazione del progetto.