Генератор баннера cookie

Сгенерируйте HTML-, CSS- и JavaScript-код простого баннера согласия на использование cookie, который можно скопировать на свой сайт: выбор «Принять / Отклонить» с запоминанием решения в браузере посетителя. Весь код создаётся локально, без сервера.

Сообщение

Текст кнопки «Принять»

Текст кнопки «Отклонить»

Текст ссылки

URL ссылки (политика конфиденциальности)

Позиция

Цвет фона

Цвет текста

Цвет кнопки «Принять»

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

Код для копирования

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="Согласие на использование cookie">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

Как это работает

Настройте сообщение, подписи кнопок и цвета, посмотрите результат, а затем скопируйте полный блок HTML/CSS/JS на свой сайт: вставьте его непосредственно перед закрывающим тегом </body> вашей страницы. Скрипт запоминает выбор посетителя в локальном хранилище его браузера, чтобы больше не показывать баннер после ответа.

Достаточно ли этого баннера для соответствия GDPR?

Генератор даёт работающую техническую основу (показ, выбор, запоминание), но реальное соответствие зависит и от того, что вы фактически делаете с cookie: необязательные cookie (аналитика, реклама) должны оставаться отключёнными, пока пользователь не нажмёт «Принять». Отредактируйте комментарий «TODO» в сгенерированном JavaScript-коде, чтобы подключать ваши скрипты только после получения согласия, и обратитесь к юристу, если ваш сайт обрабатывает конфиденциальные данные.

Можно ли изменять сгенерированный код после копирования?

Да, код — это стандартная отправная точка без внешних зависимостей и фреймворков: вы можете свободно адаптировать его под оформление вашего сайта или встроить в существующий компонент.

Код генерируется полностью в вашем браузере: никакие ваши данные не отправляются на внешний сервер.