Banner customization

Every site in Cookiesh has one banner configuration. Each region rule decides which consent experience a visitor gets (opt-in, opt-out or notice), and the banner configuration decides how it looks and reads. Edit it under Banners → Appearance and preview your changes live before you publish.

Layouts

Choose the layout that suits your site. Every layout comes in a light, dark and automatic theme, and the automatic theme follows the visitor’s prefers-color-scheme setting.

Layout	Best for	Behavior
bar	Marketing sites	Full-width bar at the bottom of the viewport
box	Content sites and blogs	Compact card in a corner, does not cover content
modal	Apps that must not run anything before a choice	Centered dialog that blocks the page until the visitor chooses

All layouts reserve their own space and load after your content, so they cause no layout shift. On opt-in banners, Reject all is always shown on the first layer, with the same size and weight as Accept all. Regulators treat a buried reject option as a dark pattern, so this cannot be turned off.

Colors, fonts and branding

Under Appearance → Style, set:

• Brand color. Used for the primary button, toggles and focus rings. Cookiesh checks it against the background and warns you if the contrast is below WCAG AA.
• Font. inherit (the default) uses your site’s font, so the banner looks native without loading extra files.
• Corner radius and shadow, to match your design system.
• Logo. Optional, shown in the preference center.

On Pro and Enterprise plans you can also remove the “Powered by Cookiesh” badge.

Copy and translations

Cookiesh ships reviewed banner copy in more than 40 languages. It picks the language in this order:

1. The data-language attribute on the script tag, if present.
2. The lang attribute of your <html> element.
3. The visitor’s browser language.
4. The default language you set in the dashboard.

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

To change the wording, open Appearance → Copy, pick a language and edit the title, body and button labels. Edits apply only to that language. Keep the copy specific: name the purposes (“measure traffic”, “show personalized ads”) instead of writing “improve your experience”.

Custom CSS

On Pro and Enterprise plans, Appearance → Custom CSS lets you go beyond the built-in options. The banner renders inside a shadow root, so your site’s styles cannot break it, and its styles cannot leak into your site. Style it with CSS custom properties and the exposed ::part() names:

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

Available parts: container, title, body, button-primary, button-secondary, link, toggle and category.

Preferences link

Visitors must be able to change their mind as easily as they gave consent. Add a link to your footer that reopens the preference center. Any element with data-cookiesh-open works:

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

You can also call cookiesh.openPreferences() from your own code (see the JavaScript API). If you prefer not to add a link, enable the floating privacy button under Appearance → Floating button.

Publishing and banner versions

Changes stay in draft until you click Publish. Each publish creates a new banner version, and every consent record stores the version the visitor saw, so you can always show which text someone agreed to.

When you change the categories, vendors or purposes, tick Ask again before publishing. Visitors who chose under an older version then see the banner again on their next visit. Purely visual changes, such as colors or fonts, do not need a new choice.

Published changes reach your site within about a minute. You never need to redeploy your site.