Iubenda logo
Generator starten

Anleitungen

INHALTSÜBERSICHT

Wie man das Aussehen und Verhalten des Cookie-Banners anpasst (Anleitung für Anfänger)

Haben Sie es eilig? Klicken Sie hier, um die Video-Anleitung zu Cookie Solution Basis-Anpassungen anzusehen.

Sie können die Standardgrafiken und -funktionalität des Cookie-Banners (auf Englisch) auf Ihrer Website leicht ändern – dazu gehören Hintergrundfarbe, Maße, Inhalt, Position, die Buttons „Akzeptieren“ und „Anpassen“ sowie grundlegende Funktionen.

Dieser Beitrag befasst sich damit, wie man grundlegende Änderungen am Aussehen und an der Position des Cookie-Hinweises vornehmen kann.

Für einen tieferen Einblick in die gesamten Einstellungen und Anpassungsmöglichkeiten siehe diese vollständige Anleitung zur Installation und vollständigen Anpassung unserer Cookie-Verwaltungslösung (beinhaltet, wie man die Banner-Grafiken, das allgemeine Verhalten der Cookie Solution und die Einwilligungseinholung umfassend modifiziert).

Um mit der Anpassung Ihres Cookie-Hinweises zu beginnen, gehen Sie zu Dashboard > [Ihre Website/App] und klicken Sie dann auf Bearbeiten unter dem Bereich Cookie Solution. Dadurch gelangen Sie direkt zum Anpassungsfeld:

iubenda Cookie Banner - Basic Customization

Hier können Sie folgendes gleich tun:

  • Ändern Sie die Bannerposition (oben, unten, oben links/rechts fließend, unten links/rechts fließend, Mitte fließend oder oben/unten Mitte fließend).
  • Fügen Sie einen optionalen „Lightbox“-Effekt über die Hintergrund-Overlay-Funktion hinzu.
  • Personalisieren Sie das Datenschutz-Widget (siehe unten).
  • Ändern Sie grundlegende Bannervisualisierungen wie die Motivfarbe (dunkel, hell oder benutzerdefiniert).
  • Gestalten Sie den Header mit Ihren Firmenfarben und Ihrem Logo (siehe unten).
  • Entfernen Sie das iubenda-Branding aus dem zweiten Layer (die 2. Ebene des Hinweises), indem Sie das Kontrollkästchen White label aktivieren.
  • Aktivieren/Deaktivieren Sie die Buttons „Zustimmen“ und „Anpassen“.
  • Aktivieren/Deaktivieren Sie den Button „Ablehnen“ (siehe unten).
  • Aktivieren/Deaktivieren Sie den Button zum Schließen des Banners (“x”).
  • Aktivieren/Deaktivieren der Einwilligung durch weiteren Gebrauch. Deaktivieren Sie sie, wenn Sie die Einwilligung nicht durch Scrollen und weiteres Surfen einholen möchten. Wenn diese Option deaktiviert ist, werden Einwilligungen nur dann registriert, wenn der Nutzer das Banner/Modal explizit schließt oder auf den Button „Weiter surfen“ (innerhalb des Modals) klickt.
  • Einwilligung durch Scrollen aktivieren/deaktivieren. Deaktivieren Sie sie, wenn Sie die Einwilligung nicht durch Scrollen einholen wollen (Details in Cookies und die DSGVO: Was ist wirklich erforderlich?)
  • Aktivieren/Deaktivieren der Einwilligung durch Seiteninteraktion. Deaktivieren Sie diese Option, wenn Sie die Einwilligung nicht durch Klicken auf einen Button/Link auf der Seite einholen möchten.
  • Aktivieren/Deaktivieren der Einwilligung nach Kategorien. Wählen Sie diese Option, wenn Sie Nutzern eine genauere Kontrolle darüber geben wollen, in welche Kategorien von Cookies oder andere Identifikatoren sie ihre Einwilligung geben sollen. Lesen Sie diese Dokumentation zur korrekten Einrichtung.
  • Aktivieren Sie das IAB-Transparenz- und Einwilligungs-Framework, das empfohlen wird, wenn Sie ein Erstanbieter sind, der mit Drittanbietern (wie Google Ads) zusammenarbeitet.

Datenschutz-Widget

Diese optionale Funktion ermöglicht es Ihren Nutzern, jederzeit auf die Tracking-Einstellungen zuzugreifen und diese zu bearbeiten, nachdem sie ihre anfänglichen Einstellungen vorgenommen haben.

Sofern Sie nicht manuell die Option zur Bearbeitung von Einwilligungseinstellungen als Link im Footer hinzufügen, wird diese Funktion bei Aktivierung des IAB Transparenz- und Einwilligungs-Framework automatisch als kleines Widget angezeigt, das auf der Seite schwebt.

Zum Anpassen klicken Sie auf das Hinweis-Dropdown-Menü

und wählen Sie Ihre bevorzugten Optionen unter „Datenschutz-Widget“:

Benutzerdefinierte Branding-Optionen

Sie können den Header des Cookie-Banners mit Ihren Markenfarben und Ihrem Logo anpassen. Beispielsweise haben wir für unsere Website die Farben und das Logo unseres Unternehmens verwendet:

Um diese Funktion zu aktivieren, aktivieren Sie die Option Eigenes Logo und Farben im Konfigurator:

Sobald Sie Ihr Logo hinzugefügt und Ihre Text- und Hintergrundfarben ausgewählt haben, werden die Parameter brandTextColor, brandBackgroundColor und logo zu Ihrem Cookie Solution Code-Snippet hinzugefügt.

💡 Logo-Tipp: Verwenden Sie ein weißes SVG auf transparentem Hintergrund für das beste Ergebnis.

Sehen Sie sich die Demo zu CodePen an oder lesen Sie unseren Leitfaden für Fortgeschrittene, um mehr über die Optionen für benutzerdefiniertes Branding zu erfahren.

Ablehnen-Button

Sobald diese Funktion aktiviert ist, können Ihre Nutzer die Einwilligung zu Cookies verweigern, indem sie auf den eindeutigen Button ”Ablehnen” anstatt auf das übliche Schließsymbol klicken. Diese Option ist besonders relevant für Nutzer, die im Vereinigten Königreich tätig sind, da das ICO jetzt die Anzeige eines Ablehnungs-Buttons verlangt.

Um diese Funktion zu aktivieren, kreuzen Sie die Option des „Expliziter Ablehnungs-Button“ im Konfigurator an:

Als Ergebnis wird "rejectButtonDisplay": true zu Ihrem Cookie Solution-Code-Snippet hinzugefügt.

*Bitte beachten Sie, dass sobald diese Option aktiviert ist, das Schließsymbol in der oberen rechten Ecke des Cookie-Banners deaktiviert wird.

Wie bei den meisten anderen Elementen in der Cookie Solution sind Farbe und Text der Buttons vollständig anpassbar. Sehen Sie sich die Demo auf CodePen an oder lesen Sie unseren Anleitung für Fortgeschrittene, um mehr über Anpassung und Rückrufe zu erfahren.

Erweiterte Ansicht

Wenn Sie auf Erweiterte Ansicht klicken, öffnet sich eine vollständige Liste mit erweiterten Optionen, mit denen Sie alles von Banner-Animation, dem Linktext für die Cookie-Richtlinie, den Buttons und dem Bannerinhalt bis hin zu Banner-CSS, Cookie-Ablaufzeit und Rückrufen anpassen können.

Verwalten der Cookie-Einwilligungen mit der Cookie Solution

Einen Cookie-Banner erstellen

Siehe auch