S SMOLNIKOV / ACADEMY Полезное / 152-ФЗ Кабинет →
← Все шаблоны
/ Шаблон · 152-ФЗ

Cookie-баннер. Минимальный и не бесит.

Не блокирует сайт, не закрывает контент, не требует от пользователя 5 кликов «принять/отклонить/настроить». Один раз показал — пользователь согласился — больше не показывается.

HTML

Вставляешь перед закрывающим тегом </body>.

<div id="cookie-banner" class="cookie-banner">
  <div class="cookie-banner__text">
    Этот сайт использует cookies для улучшения работы.
    Продолжая использовать сайт, вы соглашаетесь с
    <a href="/privacy/" target="_blank">Политикой обработки персональных данных</a>.
  </div>
  <button class="cookie-banner__btn" onclick="acceptCookies()">Принять</button>
</div>

CSS

Вставляешь в общий стайл-файл сайта или в <style> в head. Цвета — твои.

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 18px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  display: none;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
.cookie-banner.show {
  display: flex;
}
.cookie-banner__text {
  flex: 1;
}
.cookie-banner__text a {
  color: #b6ff3c;
  text-decoration: underline;
}
.cookie-banner__btn {
  flex-shrink: 0;
  padding: 8px 18px;
  background: #b6ff3c;
  color: #000;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cookie-banner__btn:hover {
  background: #d5ff6e;
}
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__btn {
    width: 100%;
  }
}

JavaScript

Показывает баннер один раз, запоминает выбор в localStorage. Вставляешь в <script> внизу страницы.

(function() {
  var KEY = 'cookies_accepted';
  var banner = document.getElementById('cookie-banner');
  if (!banner) return;
  if (!localStorage.getItem(KEY)) {
    setTimeout(function() {
      banner.classList.add('show');
    }, 800);
  }
  window.acceptCookies = function() {
    localStorage.setItem(KEY, '1');
    banner.classList.remove('show');
  };
})();

Что делать

  1. Скопируй HTML и вставь перед </body>.
  2. Скопируй CSS в стайл-файл (или в <style> в head).
  3. Скопируй JS и вставь в <script> внизу страницы.
  4. Меняешь ссылку /privacy/ на свою страницу политики.
  5. Проверяешь: при первом заходе баннер появляется через 0.8 секунды снизу. После клика «Принять» — пропадает и больше не показывается. Если очистишь localStorage — появится снова.
Без фанатизма Жирные европейские GDPR-баннеры с тремя кнопками («Принять всё», «Отклонить», «Настроить cookies») — это для евросайтов. По 152-ФЗ достаточно уведомления и ссылки на политику. Не насилуй пользователя выбором, который ему не нужен.

Используется в курсе