Подробная инструкция по настройке виджета

Cookies — Уведомление о cookies — Genium24

Цель виджета
Показывать ненавязчивое уведомление (баннер/плашку) о использовании cookies на сайте.
Необходим для соответствия требованиям:

• GDPR (Европа)
• ФЗ-152 (Россия)
• ePrivacy Directive
• аналогичным законам других стран

Обязателен для всех сайтов, которые используют:

• аналитику (Google Analytics, Яндекс.Метрика)
• рекламные пиксели (Facebook, VK, TikTok)
• чаты / формы / корзину / авторизацию

Структура настроек (2 вкладки)

• Основное — шаблон дизайна и текст кнопки
• Внешний вид — цвета, размер текста, стили кнопок

1. Основное — шаблон и текст

Шаблон дизайна
Выберите один из предложенных вариантов (обычно 3–5):

• Минималистичный баннер (самый популярный и рекомендуемый)
• Баннер с иконкой печеньки / замка
• Полноэкранное уведомление (редко)
• С двумя кнопками («Принять» + «Настройки» / «Отклонить»)

Текст кнопки

• «Принять» — самый нейтральный и конверсионный
• «Согласен»
• «OK»
• «Понял»
• «Принять все» (если есть расширенные настройки cookies)

Рекомендация по тексту уведомления (добавляется автоматически или редактируется в шаблоне)
Короткий и понятный:
«Мы используем cookies для улучшения работы сайта. Продолжая использовать сайт, вы соглашаетесь с этим.»
или
«Сайт использует файлы cookie. Нажимая «Принять», вы соглашаетесь с политикой использования cookies.»

2. Внешний вид — цвета и стили

Цвет кнопки

• Основной цвет бренда (синий #4F46E5, зелёный #10B981, оранжевый #F59E0B и т.д.)
• Должен выделяться на фоне уведомления

Цвет фона уведомления

• Белый (#FFFFFF) или очень светлый серый (#F9FAFB) — чистый и ненавязчивый
• Полупрозрачный (#00000080 / #FFFFFF80) — если хотите наложить поверх контента

Цвет текста

• Тёмный (#000000 или #111111) — для светлого фона
• Белый (#FFFFFF) — для тёмного фона

Цвет кнопки «Отклонить» / «Настройки» (если шаблон с двумя кнопками)

• Серый (#6B7280, #9CA3AF, #D1D5DB) — чтобы не конкурировала с основной кнопкой «Принять»

Цвет крестика закрытия

• Тёмно-серый (#4B5563 или #6B7280)
• Должен быть заметным, но не слишком ярким

Размер текста (px)

• 12–16 px
• Рекомендуется: 14 px — идеальный баланс читаемости и компактности

Проверка после сохранения

1. Нажмите Сохранить
2. Откройте сайт в режиме инкогнито (Ctrl+Shift+N)
3. Проверьте:
   • появляется ли уведомление сразу после загрузки страницы
   • читаем ли текст на мобильном и десктопе
   • после нажатия «Принять» баннер исчезает навсегда (проверьте повторный вход)
   • если есть «Отклонить» — проверяйте, что она тоже закрывает уведомление
   • нет ли перекрытия важных элементов (чат, кнопки, корзина)

ТОП-ошибки, которых следует избегать

• слишком большой / яркий баннер → повышает отток
• отсутствие кнопки «Принять» или крестика → нарушение закона
• низкий контраст текста и фона → плохо читается → штрафы
• размер текста меньше 12 px → проблемы с доступностью
• нет перевода на другие языки (если сайт мультиязычный)

Лучшая практика 2026 года

• Шаблон: Минималистичный баннер внизу экрана
• Текст уведомления: короткий и понятный (1–2 предложения)
• Кнопка: «Принять» (цвет бренда)
• Кнопка «Отклонить» / «Настройки» — серого цвета (если есть)
• Размер текста: 14 px
• Фон: белый или светло-серый
• Крестик закрытия: тёмно-серый

Удачной настройки и полного соответствия требованиям законодательства! 🚀