Einwilligungsbanner-Styling anpassen

UniConsent CMP bietet mehrere Möglichkeiten, das Erscheinungsbild Ihres Einwilligungsbanners an Ihr Website-Design anzupassen.

Integrierte Optionen

Der einfachste Weg zur Anpassung über die Dashboard-Projekteinstellungen:

• Theme Color: primäre Markenfarbe festlegen.
• Button Text Color: Button- und Link-Textfarben anpassen.
• Template: aus 10 Banner-Vorlagen wählen.
• Logo: Firmenlogo hochladen.

Benutzerdefiniertes CSS

Für erweiterte Anpassungen fügen Sie CSS im Feld Custom CSS Ihrer Projekteinstellungen hinzu.

Häufige Beispiele

Farbe des Zustimmungsbuttons ändern:

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

Banner-Hintergrund ändern:

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

Schriftgröße ändern:

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

Datenschutz-Badge ausblenden:

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

Verwenden Sie stattdessen einen manuellen Auslöser-Button:

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

Vorlagenauswahl

Konfigurieren Sie die Vorlage im Bereich Template oder über den barmode-Parameter.

API-Only-Integration (Benutzerdefinierte erste Ebene)

Wenn Sie Ihr eigenes Banner erstellen und UniConsent nur für Einwilligungsspeicherung und Compliance nutzen möchten, aktivieren Sie den API-Only-Modus.

Schritt 1: API-Only-Modus aktivieren

In Ihren Dashboard-Projekteinstellungen:

1. Gehen Sie zu Settings > GDPR und aktivieren Sie API-Only Mode (GDPR).
2. Für CCPA: Settings > U.S. Privacy und API-Only Mode (CCPA) aktivieren.
3. Optional Show Privacy Badge auf OFF setzen.

Der CMP-Tag lädt weiterhin im Hintergrund.

Schritt 2: Eigenes Banner erstellen

<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;">Wir verwenden Cookies und ähnliche Technologien.</p>
    <div>
      <button onclick="__unicapi('openOptions')">Einstellungen</button>
      <button onclick="__unicapi('openCookiesList')">Cookie-Liste</button>
      <button onclick="__unicapi('rejectAll')">Alle ablehnen</button>
      <button onclick="__unicapi('agreeAll')">Alle akzeptieren</button>
    </div>
  </div>
</div>

Schritt 3: Banner basierend auf Einwilligungsstatus ein-/ausblenden

<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>

Verfügbare API-Methoden

Vollständige JavaScript-API-Referenz.

CSS-Kompatibilität

Bestehende CSS-Regeln auf Ihrer Seite, die auf .unic-Klassenselektoren abzielen, werden automatisch angewendet.

Tipps

• Verwenden Sie !important beim Überschreiben von Standard-Stilen.
• Testen Sie im Vorschaumodus: ?uniconsent_test=1&uniconsent_reset=1
• CSS-Änderungen werden nach der Veröffentlichung wirksam.