Оформление баннера

У каждого сайта в Cookiesh одна конфигурация баннера. Региональные правила определяют, какой сценарий согласия получит посетитель (предварительное согласие, отказ или уведомление), а конфигурация баннера — как он выглядит и что в нем написано. Редактируйте ее в разделе Banners → Appearance и смотрите изменения в предпросмотре в реальном времени до публикации.

Макеты

Выберите макет, который подходит вашему сайту. У каждого макета есть светлая, темная и автоматическая тема. Автоматическая тема следует настройке prefers-color-scheme посетителя.

Макет	Лучше всего подходит	Поведение
bar	Маркетинговые сайты	Полоса на всю ширину внизу окна браузера
box	Контентные сайты и блоги	Компактная карточка в углу, не перекрывает контент
modal	Приложения, в которых ничего не должно запускаться до выбора	Диалог по центру, блокирует страницу, пока посетитель не сделает выбор

Все макеты заранее резервируют себе место и загружаются после вашего контента, поэтому не вызывают смещения макета. В баннерах с предварительным согласием кнопка Отклонить все всегда показывается на первом уровне, того же размера и веса, что и Принять все. Регуляторы считают спрятанную кнопку отказа манипулятивным дизайном (dark pattern), поэтому эту настройку отключить нельзя.

Цвета, шрифты и брендинг

В разделе Appearance → Style задайте:

• Цвет бренда. Используется для основной кнопки, переключателей и рамки фокуса. Cookiesh проверяет его контраст с фоном и предупреждает, если он ниже уровня WCAG AA.
• Шрифт. Значение inherit (по умолчанию) берет шрифт вашего сайта, поэтому баннер выглядит родным и не загружает дополнительных файлов.
• Скругление углов и тень — под вашу дизайн-систему.
• Логотип. Необязателен, показывается в центре настроек.

На тарифах Pro и Enterprise можно также убрать значок «Powered by Cookiesh».

Тексты и переводы

Cookiesh поставляет проверенные тексты баннера более чем на 40 языках. Язык выбирается в таком порядке:

1. Атрибут data-language в теге script, если он указан.
2. Атрибут lang элемента <html>.
3. Язык браузера посетителя.
4. Язык по умолчанию, заданный в панели управления.

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

Чтобы изменить формулировки, откройте Appearance → Copy, выберите язык и отредактируйте заголовок, основной текст и подписи кнопок. Изменения применяются только к этому языку. Пишите конкретно: называйте цели («измерять трафик», «показывать персонализированную рекламу») вместо «улучшить ваш опыт».

Собственный CSS

На тарифах Pro и Enterprise раздел Appearance → Custom CSS позволяет выйти за рамки встроенных настроек. Баннер отрисовывается внутри shadow root, поэтому стили вашего сайта не могут его сломать, а его стили не просачиваются на ваш сайт. Оформляйте его с помощью пользовательских свойств CSS и открытых имен ::part():

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

Доступные части: container, title, body, button-primary, button-secondary, link, toggle и category.

Ссылка на настройки

Посетитель должен иметь возможность передумать так же легко, как дал согласие. Добавьте в подвал сайта ссылку, которая снова открывает центр настроек. Подойдет любой элемент с атрибутом data-cookiesh-open:

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

Можно также вызвать cookiesh.openPreferences() из собственного кода (см. JavaScript API). Если не хотите добавлять ссылку, включите плавающую кнопку конфиденциальности в разделе Appearance → Floating button.

Публикация и версии баннера

Изменения остаются черновиком, пока вы не нажмете Publish. Каждая публикация создает новую версию баннера, а каждая запись о согласии хранит версию, которую видел посетитель. Так вы всегда можете показать, с каким текстом человек согласился.

Если вы меняете категории, поставщиков или цели, перед публикацией отметьте Ask again. Тогда посетители, которые сделали выбор в старой версии, при следующем визите снова увидят баннер. Чисто визуальные изменения, например цвета или шрифты, не требуют нового выбора.

Опубликованные изменения появляются на сайте примерно через минуту. Повторно развертывать сайт не нужно.