Banner anpassen

Jede Website in Cookiesh hat genau eine Banner-Konfiguration. Die Regionsregeln legen fest, welche Einwilligungsabfrage ein Besucher erhält (Opt-in, Opt-out oder Hinweis), und die Banner-Konfiguration bestimmt, wie sie aussieht und formuliert ist. Sie bearbeiten sie unter Banners → Appearance und sehen Ihre Änderungen vor dem Veröffentlichen in einer Live-Vorschau.

Layouts

Wählen Sie das Layout, das zu Ihrer Website passt. Jedes Layout gibt es in einem hellen, einem dunklen und einem automatischen Design. Das automatische Design folgt der Einstellung prefers-color-scheme des Besuchers.

Layout	Geeignet für	Verhalten
bar	Marketing-Websites	Leiste über die volle Breite am unteren Rand des Viewports
box	Content-Websites und Blogs	Kompakte Karte in einer Ecke, verdeckt keine Inhalte
modal	Apps, die vor einer Entscheidung nichts ausführen dürfen	Zentrierter Dialog, der die Seite bis zur Entscheidung des Besuchers sperrt

Alle Layouts reservieren ihren eigenen Platz und laden nach Ihren Inhalten, sodass sie keinen Layout-Shift verursachen. Bei Opt-in-Bannern erscheint Alle ablehnen immer auf der ersten Ebene, in derselben Größe und Gewichtung wie Alle akzeptieren. Aufsichtsbehörden werten eine versteckte Ablehnungsoption als Dark Pattern, deshalb lässt sich das nicht abschalten.

Farben, Schriften und Branding

Unter Appearance → Style legen Sie Folgendes fest:

• Markenfarbe. Wird für den primären Button, Schalter und Fokusrahmen verwendet. Cookiesh prüft sie gegen den Hintergrund und warnt Sie, wenn der Kontrast unter WCAG AA liegt.
• Schrift. inherit (die Standardeinstellung) übernimmt die Schrift Ihrer Website. So wirkt das Banner wie ein Teil der Seite, ohne zusätzliche Dateien zu laden.
• Eckenradius und Schatten, passend zu Ihrem Designsystem.
• Logo. Optional, wird im Präferenz-Center angezeigt.

In den Tarifen Pro und Enterprise können Sie außerdem das Badge „Powered by Cookiesh“ entfernen.

Texte und Übersetzungen

Cookiesh liefert geprüfte Bannertexte in über 40 Sprachen. Die Sprache wird in dieser Reihenfolge bestimmt:

1. Das Attribut data-language am Script-Tag, falls vorhanden.
2. Das Attribut lang Ihres <html>-Elements.
3. Die Browsersprache des Besuchers.
4. Die Standardsprache, die Sie im Dashboard festgelegt haben.

<script
  src="https://sdk.cookiesh.eu/v1/consent.js"
  data-site-id="ck_live_8f2a91"
  data-language="de"
  async
></script>

Um die Formulierungen zu ändern, öffnen Sie Appearance → Copy, wählen eine Sprache und bearbeiten Titel, Text und Button-Beschriftungen. Änderungen gelten nur für diese Sprache. Formulieren Sie konkret: Nennen Sie die Zwecke („Besuche messen“, „personalisierte Werbung anzeigen“), statt „Ihr Erlebnis verbessern“ zu schreiben.

Eigenes CSS

In den Tarifen Pro und Enterprise können Sie unter Appearance → Custom CSS über die integrierten Optionen hinausgehen. Das Banner wird in einem Shadow Root gerendert: Die Styles Ihrer Website können es nicht beschädigen, und seine Styles wirken sich nicht auf Ihre Website aus. Gestalten Sie es mit CSS Custom Properties und den bereitgestellten ::part()-Namen:

cookiesh-banner {
  --ck-color-primary: #4f46e5;
  --ck-color-background: #0a0b10;
  --ck-color-text: #ededf2;
  --ck-radius: 12px;
  --ck-font-family: inherit;
}

cookiesh-banner::part(button-primary) {
  text-transform: none;
  letter-spacing: 0;
}

cookiesh-banner::part(title) {
  font-weight: 600;
}

Verfügbare Parts: container, title, body, button-primary, button-secondary, link, toggle und category.

Link zu den Einstellungen

Besucher müssen ihre Entscheidung genauso einfach ändern können, wie sie sie getroffen haben. Fügen Sie Ihrem Footer einen Link hinzu, der das Präferenz-Center erneut öffnet. Jedes Element mit data-cookiesh-open funktioniert:

<button type="button" data-cookiesh-open="preferences">Privacy settings</button>

Sie können auch cookiesh.openPreferences() aus Ihrem eigenen Code aufrufen (siehe JavaScript-API). Wenn Sie keinen Link einbauen möchten, aktivieren Sie den schwebenden Datenschutz-Button unter Appearance → Floating button.

Veröffentlichen und Banner-Versionen

Änderungen bleiben ein Entwurf, bis Sie auf Publish klicken. Jede Veröffentlichung erzeugt eine neue Banner-Version, und jeder Einwilligungsnachweis speichert die Version, die der Besucher gesehen hat. So können Sie jederzeit belegen, welchem Text jemand zugestimmt hat.

Wenn Sie Kategorien, Anbieter oder Zwecke ändern, aktivieren Sie vor dem Veröffentlichen Ask again. Besucher, die unter einer älteren Version entschieden haben, sehen das Banner dann bei ihrem nächsten Besuch erneut. Rein optische Änderungen wie Farben oder Schriften erfordern keine neue Entscheidung.

Veröffentlichte Änderungen erreichen Ihre Website innerhalb von etwa einer Minute. Ein erneutes Deployment Ihrer Website ist nie nötig.