Cookie Banner - Anpassung für Entwickler

Geändert am Mi, 24 Jul um 11:51 VORMITTAGS

Dokumentation ltBanner API

Mit Hilfe dieser API ist es möglich mit dem auf der Seite geladenen Consent Banner zu interagieren. Das ltBanner Objekt ist dabei im window Scope der jeweiligen Seite zu finden.

Beispiel Nutzung:

<script>
   ltBanner.show();
   // or 
   window.ltBanner.show();
</script>

Methoden

show()

Zeigt das Banner wieder an, falls es geschlossen wurde.

Beispiel Nutzung:

<script>
   ltBanner.show();
</script>

hide()

Schließt das Banner bzw. verhindert, dass das Banner auf einer Seite angezeigt wird.

Beispiel Nutzung:

<script>
   ltBanner.hide();
</script>

Eigenschaften

consent.essential

Gibt an, ob eine Einwilligung für essentielle Cookies und ggf. Webdienste vorliegt. Ist generell true, da für Inhalte diese Kategorie keine Einwilligung erforderlich ist.

consent.optionalFunctionality

Gibt an, ob eine Einwilligung für Optionale Funktionalität Cookies und ggf. Webdienste vorliegt.

Beispiel Nutzung:

<script>
   if(ltBanner.consent.optionalFunctionality){
        // do something that requires optionalFunctionality consent
   }
</script>

consent.analytics

Gibt an, ob eine Einwilligung für Analytics Cookies und ggf. Webdienste vorliegt.

Beispiel Nutzung:

<script>
   if(ltBanner.consent.analytics){
        // do something that requires analytics consent
   }
</script>

consent.marketing

Gibt an, ob eine Einwilligung für Werbungs Cookies und ggf. Webdienste vorliegt.

Beispiel Nutzung:

<script>
   if(ltBanner.consent.marketing){
        // do something that requires marketing consent
   }
</script>

Events

ltBanner:ConsentChanged

Das folgende Event wird ausgelöst, wenn der Nutzer erfolgreich mit dem Banner interagiert hat. z.B. durch das geben einer Einwilligung mittels "Alles akzeptieren" aber auch bei einer Nicht-Einwilligung z.B. mittels "Ablehnen"

Beispiel Nutzung:

<script>
  window.addEventListener('ltBanner:ConsentChanged', function () {
      if(ltBanner.consent.analytics){
          // do something that requires analytics consent
      }
  })
</script>

Dokumentation CSS-Overrides

In den Designeinstellungen des Cookie-Banners ist es möglich das Banner nach belieben mittels CSS anzupassen.

ACHTUNG!

Durch stilistische Änderungen am Banner kann dieser nicht rechtskonform werden! (z.B. starke Reduzierung des Kontrastes des Ablehnen Buttons um eine Einwilligung zu forcieren) Im Zweifel wende dich gerne an unseren Rechtssupport für eine individuelle Prüfung durch einen Anwalt.

ACHTUNG!

CSS-Variablen

CSS-Variablen können verwendet werden um das Design des Banners einfach anzupassen. Füge dafür einfach folgenden Code ein und passe diesen an:

:root,
:host {
  --banner-bg: white;

  --primary-color: #242424;
  --primary-btn-color: var(--primary-color);
  --primary-btn-text-color: #fff;
  --primary-btn-hover-color: #404040;
  --primary-btn-text-hover-color: var(--primary-btn-text-color);

  --secondary-color: #fff;
  --btn-color: var(--secondary-color);
  --btn-text-color: #000;
  --btn-hover-color: #ccc;
  --btn-text-hover-color: var(--primary-btn-text-color);

  --text-color: #242424;
  --link-color: black;

  --border-radius: 11px;
  --border-radius-button: calc(var(--border-radius) * 2);
  --border-radius-checkbox: calc(var(--border-radius) * 50);
}