Banner-Anpassung & Design

1. Überblick

Das Barefoot CMP Cookie-Banner ist vollständig anpassbar, ohne dass Sie den Quellcode Ihrer Website ändern müssen. Alle visuellen und funktionalen Einstellungen können Sie bequem über das Dashboard oder per JavaScript-Konfiguration vornehmen.

1

Dashboard-Konfiguration: Alle Einstellungen visuell im Dashboard anpassen

2

JavaScript-Config: Erweiterte Anpassungen per Code-Objekt

3

CSS-Isolation: Kein Konflikt mit Ihrer Website-Styles

4

ARIA & Accessibility: Barrierefreiheit von Anfang an eingebaut

Tipp: Die meisten Anpassungen können direkt im Dashboard vorgenommen werden. Für erweiterte Anpassungen nutzen Sie die JavaScript-Konfiguration.

2. Themes

Barefoot CMP bietet drei Theme-Modi, damit sich das Banner nahtlos in das Design Ihrer Website einfügt.

2.1 Light Mode (Standard)

Der Light Mode zeigt das Banner mit hellem Hintergrund und dunklem Text. Er eignet sich optimal für Websites mit hellem Design. Die primaryColor bestimmt die Farbe der Buttons und Akzente.

2.2 Dark Mode

Der Dark Mode verwendet einen dunklen Hintergrund (#1e293b) mit hellem Text. Er eignet sich ideal für Websites mit dunklem Design oder wenn das Banner weniger auffallen soll. Buttons und Akzente werden ebenfalls in der konfigurierten primaryColor dargestellt.

2.3 Auto Mode

Im Auto Mode erkennt das Banner automatisch die Systemeinstellung des Nutzers (prefers-color-scheme). Je nach Betriebssystem- oder Browser-Einstellung wechselt das Banner zwischen Light und Dark Mode. So passt sich das Banner perfekt an die Präferenz des Besuchers an.

          JAVASCRIPT
          // Theme-Konfiguration
window.ConsentManagerConfig = {
  theme: 'dark' // 'light' | 'dark' | 'auto'
};
        

Alternativ kann das Theme auch als URL-Parameter gesetzt werden:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID&theme=dark" async></script>
        

3. Farben

Mit der primaryColor-Einstellung bestimmen Sie die Hauptfarbe des Banners. Diese Farbe wird für Buttons, Akzente und Toggle-Switches verwendet. Die Standardfarbe ist #2563eb (Blau). Sie akzeptiert jeden gültigen CSS-Farbwert (Hex, RGB, HSL).

          JAVASCRIPT
          window.ConsentManagerConfig = {
  primaryColor: '#e11d48' // Rot
};
        

Beispiel-Farbpaletten

Hier sind einige bewährte Farben, die sich gut als Akzentfarbe eignen:

#2563eb Blau (Standard)

#10b981 Grün

#8b5cf6 Violett

#f59e0b Orange

#e11d48 Rot

#06b6d4 Türkis

#000000 Schwarz

Custom Jede beliebige Farbe

Barrierefreiheit beachten: Wählen Sie eine Farbe, die zu Ihrem Markenauftritt passt, aber gleichzeitig genug Kontrast für Barrierefreiheit bietet (WCAG AA Standard). Helle Farben wie Gelb oder Hellgrau sind als Button-Farbe oft nicht ausreichend kontrastreich.

4. Positionen

Das Banner kann an verschiedenen Positionen auf der Seite angezeigt werden. Die Position beeinflusst, wie und wo das Banner erscheint.

Position	Config-Wert	Beschreibung
Unten (Standard)	`bottom`	Banner am unteren Bildschirmrand. Klassische, unauffällige Variante.
Oben	`top`	Banner am oberen Bildschirmrand. Wird sofort gesehen.
Mitte (Modal)	`center`	Zentriertes Overlay-Modal mit abgedunkeltem Hintergrund. Maximale Aufmerksamkeit.

          JAVASCRIPT
          window.ConsentManagerConfig = {
  position: 'center' // 'bottom' | 'top' | 'center'
};
        

Oder als URL-Parameter:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID&position=top" async></script>
        

5. Border-Radius

Der Border-Radius bestimmt, wie abgerundet die Ecken des Banners, der Buttons und der Toggle-Switches erscheinen. Der Standardwert beträgt 12px.

0px: Vollständig eckiges, kantenklares Design
6px: Leicht abgerundet, modernes Erscheinungsbild
12px (Standard): Deutlich abgerundet, freundlicher Look
20px+: Stark abgerundet, sehr weicher Look

          JAVASCRIPT
          window.ConsentManagerConfig = {
  borderRadius: 0 // Eckiges Design
};
        

6. Layout-Varianten

Barefoot CMP bietet verschiedene Banner-Layouts, die je nach Anwendungsfall unterschiedlich geeignet sind.

K

Kompaktes Banner

Einzeilige Nachricht mit Buttons. Platzsparend und unaufdringlich.

S

Standard-Banner

Titel, Beschreibung und Buttons. Die empfohlene Variante für die meisten Websites.

E

Einstellungs-Panel

Detaillierte Ansicht mit Kategorie-Toggles und Cookie-Details.

Kompaktes Banner

Das kompakte Banner zeigt eine kurze Nachricht mit den wichtigsten Buttons in einer Zeile. Es nimmt nur wenig Platz ein und ist ideal, wenn das Banner möglichst unauffällig sein soll.

Standard-Banner

Das Standard-Banner enthält einen Titel, einen Beschreibungstext sowie die Buttons "Alle akzeptieren", "Alle ablehnen" und "Einstellungen". Dies ist die empfohlene Variante, da sie eine gute Balance zwischen Information und Benutzerfreundlichkeit bietet.

Einstellungs-Panel

Das Einstellungs-Panel öffnet sich, wenn der Nutzer auf "Einstellungen" klickt. Es zeigt eine detaillierte Ansicht mit Toggle-Switches für jede Cookie-Kategorie (Notwendig, Statistik, Marketing, Funktional). Zu jeder Kategorie werden die zugehörigen Cookies mit Name, Anbieter, Zweck und Laufzeit angezeigt.

7. Floating Button

Der Floating Button ist ein kleiner, persistenter Button am unteren linken Bildschirmrand. Er ermöglicht es Nutzern, ihre Cookie-Einstellungen jederzeit erneut zu öffnen und anzupassen, ohne die Seite neu laden zu müssen.

Standard: Aktiviert (showFloatingButton: true)
Position: Links unten am Bildschirmrand
Erscheint: Sobald der Nutzer eine Consent-Entscheidung getroffen hat
Funktion: Öffnet das Banner / die Einstellungen bei Klick

          JAVASCRIPT
          window.ConsentManagerConfig = {
  showFloatingButton: false // Floating Button ausblenden
};
        

DSGVO-Hinweis: Der Floating Button ist wichtig für die DSGVO-Compliance, da Nutzer ihre Einstellungen jederzeit ändern können müssen. Wenn Sie den Floating Button deaktivieren, müssen Sie eine Alternative bereitstellen, z.B. einen "Cookie-Einstellungen" Link im Footer Ihrer Website.

Einen Footer-Link können Sie einfach mit der JavaScript-API umsetzen:

          HTML
          <!-- Im Footer Ihrer Website -->
<a href="#" onclick="BarefootCMP.show(); return false;">Cookie-Einstellungen</a>
        

8. Multi-Sprach-Support

Barefoot CMP unterstützt 12 Sprachen. Das Banner erkennt automatisch die Browsersprache des Besuchers und zeigt den passenden Text an. Wenn die Sprache nicht unterstützt wird, wird Deutsch als Fallback verwendet.

Sprache	Code	Beispiel "Alle akzeptieren"
Deutsch	`de`	Alle akzeptieren
Englisch	`en`	Accept all
Französisch	`fr`	Accepter tout
Spanisch	`es`	Aceptar todo
Italienisch	`it`	Accetta tutti
Niederländisch	`nl`	Alles accepteren
Polnisch	`pl`	Zaakceptuj wszystkie
Portugiesisch	`pt`	Aceitar todos
Schwedisch	`sv`	Acceptera alla
Dänisch	`da`	Accepter alle
Finnisch	`fi`	Hyväksy kaikki
Tschechisch	`cs`	Přijmout vše

Automatische Erkennung

Standardmäßig erkennt das Banner die Browsersprache des Besuchers über navigator.language. Wenn die erkannte Sprache zu den 12 unterstützten Sprachen gehört, wird sie automatisch verwendet. Andernfalls wird Deutsch als Fallback angezeigt.

Sprache manuell setzen

Sie können die Sprache auch manuell festlegen, um die automatische Erkennung zu überschreiben:

          JAVASCRIPT
          window.ConsentManagerConfig = {
  language: 'en'
};
        

Oder als URL-Parameter: ?lang=en

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID&lang=en" async></script>
        

9. Eigene Texte überschreiben

Jeder Text im Banner kann individuell überschrieben werden, unabhängig von der gewählten Sprache. So können Sie das Banner perfekt an Ihren Markenauftritt und Ihre Kommunikation anpassen.

          JAVASCRIPT
          window.ConsentManagerConfig = {
  customTranslations: {
    bannerTitle: 'Cookie-Hinweis',
    bannerText: 'Wir verwenden Cookies, um Ihnen die beste Erfahrung zu bieten.',
    acceptAll: 'OK, verstanden',
    rejectAll: 'Nein, danke',
    settings: 'Mehr erfahren',
    saveSettings: 'Meine Auswahl speichern',
    necessary: 'Technisch notwendig',
    analytics: 'Analyse & Statistik',
    marketing: 'Werbung & Marketing',
    functional: 'Zusatzfunktionen',
    privacyPolicy: 'Datenschutz',
    imprint: 'Impressum'
  }
};
        

Alle überschreibbaren Text-Keys

Key	Standard (DE)	Beschreibung
`bannerTitle`	Wir respektieren Ihre Privatsphäre	Titel des Banners
`bannerText`	Wir verwenden Cookies...	Beschreibungstext
`acceptAll`	Alle akzeptieren	Accept-All Button
`rejectAll`	Alle ablehnen	Reject-All Button
`settings`	Einstellungen	Einstellungen-Button
`saveSettings`	Auswahl speichern	Speichern-Button
`settingsTitle`	Cookie-Einstellungen	Titel der Einstellungsansicht
`necessary`	Notwendig	Kategorie-Name
`analytics`	Statistik	Kategorie-Name
`marketing`	Marketing	Kategorie-Name
`functional`	Funktional	Kategorie-Name
`privacyPolicy`	Datenschutzerklärung	Link-Text
`imprint`	Impressum	Link-Text
`poweredBy`	Cookie-Verwaltung	Powered-by Text
`alwaysActive`	Immer aktiv	Bei notwendigen Cookies
`floatingBtnLabel`	Cookie-Einstellungen öffnen	Floating Button Tooltip

10. CSS-Isolation

Barefoot CMP wurde so entwickelt, dass es zu keinen CSS-Konflikten mit Ihrer Website kommt. Dies ist besonders wichtig, wenn Sie CSS-Frameworks wie Bootstrap, Tailwind CSS oder individuelle Styles verwenden.

Inline-Styles: Alle Banner-Styles werden inline oder über spezifische CSS-Klassen mit einem eindeutigen Prefix eingefügt
Keine externen Stylesheets: Das Banner lädt keine zusätzlichen CSS-Dateien
Kein Einfluss auf Ihre Styles: Die Styles des Banners überschreiben keine bestehenden Regeln
Z-Index: 999999: Das Banner wird immer über allen anderen Elementen angezeigt
Framework-kompatibel: Keine Konflikte mit Bootstrap, Tailwind, Foundation, Bulma oder Material UI

Garantie: Das Barefoot CMP Banner beeinflusst das Design Ihrer Website nicht. Alle Styles sind vollständig gekapselt und isoliert.

11. Accessibility (Barrierefreiheit)

Barefoot CMP ist so konzipiert, dass es den WCAG 2.1 AA Standard erfüllt. Dies ist besonders wichtig für öffentliche Einrichtungen, barrierefreie Websites und generell für eine inklusive Nutzererfahrung.

ARIA-Labels: Alle interaktiven Elemente (Buttons, Toggles, Links) haben beschreibende ARIA-Labels für Screen Reader
Keyboard-Navigation: Alle Buttons und Toggles sind per Tab-Taste erreichbar und bedienbar
Focus-Trap: Wenn das Banner geöffnet ist, bleibt der Fokus innerhalb des Banners. Nutzer können nicht versehentlich hinter das Banner tabben
Screen Reader kompatibel: Banner-Texte, Kategorien und Status werden korrekt vorgelesen
Kontrastverhältnis: Alle Texte und Buttons erfüllen den WCAG AA Kontraststandard (mindestens 4.5:1 für normalen Text)
Escape-Taste: Die Einstellungsansicht kann mit der Escape-Taste geschlossen werden

WCAG 2.1 AA: Barefoot CMP ist so konzipiert, dass es den WCAG 2.1 AA Standard erfüllt. Dies ist besonders wichtig für öffentliche Einrichtungen und barrierefreie Websites, die gesetzlich dazu verpflichtet sein können.

12. Cookie-Declaration Widget

Das Cookie-Declaration Widget ist ein eigenständiges, einbettbares Element für Ihre Datenschutzseite. Es zeigt alle auf Ihrer Website verwendeten Cookies mit vollständigen Details an: Name, Anbieter, Zweck, Kategorie und Laufzeit.

Eigenständig: Funktioniert unabhängig vom Cookie-Banner
Automatisch aktualisiert: Die Daten werden direkt aus Ihrer Cookie-Datenbank im Barefoot CMP Dashboard geladen
Kategorisiert: Cookies werden nach Kategorie (Notwendig, Statistik, Marketing, Funktional) gruppiert
Responsive: Passt sich an alle Bildschirmgrößen an
DSGVO-konform: Erfüllt die Informationspflichten der DSGVO

Einbindung

Fügen Sie folgendes HTML-Snippet auf Ihrer Datenschutzseite ein, an der Stelle, wo die Cookie-Tabelle erscheinen soll:

          HTML
          <!-- Auf Ihrer Datenschutzseite -->
<div id="barefoot-cookie-declaration"></div>
<script src="https://cmp.barefoot-performance.com/v1/declaration.js?id=DEINE_CMP_ID" async></script>
        

Das Widget wird automatisch im <div>-Container gerendert und zeigt alle Cookies übersichtlich in einer Tabelle an. Es passt sich farblich an das Design Ihrer Website an.

Vollständige Beispiel-Konfiguration

Hier ist ein vollständiges Beispiel, das mehrere Anpassungen kombiniert:

          HTML
          <script>
// Konfiguration VOR dem Loader-Script definieren
window.ConsentManagerConfig = {
  theme: 'auto',
  primaryColor: '#8b5cf6',
  position: 'center',
  borderRadius: 8,
  language: 'de',
  showFloatingButton: true,
  customTranslations: {
    bannerTitle: 'Datenschutz ist uns wichtig',
    acceptAll: 'Alles klar!',
    rejectAll: 'Nur Notwendige'
  }
};
</script>
<script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID" async></script>
        

Wichtig: Das ConsentManagerConfig-Objekt muss immer VOR dem Loader-Script definiert werden. Andernfalls wird die Standard-Konfiguration verwendet.

Banner-Anpassung & Design

1. Überblick

2. Themes

2.1 Light Mode (Standard)

2.2 Dark Mode

2.3 Auto Mode

3. Farben

Beispiel-Farbpaletten

4. Positionen

5. Border-Radius

6. Layout-Varianten

Kompaktes Banner

Standard-Banner

Einstellungs-Panel

Kompaktes Banner

Standard-Banner

Einstellungs-Panel

7. Floating Button

8. Multi-Sprach-Support

Automatische Erkennung

Sprache manuell setzen

9. Eigene Texte überschreiben

Alle überschreibbaren Text-Keys

10. CSS-Isolation

11. Accessibility (Barrierefreiheit)

12. Cookie-Declaration Widget

Einbindung

Vollständige Beispiel-Konfiguration

Banner nach Ihren Wünschen gestalten