Как добавить плашку cookies в конструкторе Craftum

Зачем нужна cookie-плашка?

В 2023–2024 годах в российское законодательство были внесены изменения, касающиеся обработки персональных данных и использования файлов cookies.

Теперь сайты, которые собирают и используют cookies (например, для аналитики, маркетинга или персонализации), обязаны уведомлять пользователей об этом и получать их согласие.

Это связано с:

• Федеральным законом «О персональных данных» (№152-ФЗ),

• обновлениями требований Роскомнадзора,

• тенденцией гармонизации российского регулирования с европейской практикой (GDPR).

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

Шаг 1. Добавляем HTML-блок

1. В конструкторе Craftum откройте страницу, где хотите разместить уведомление.

2. Вставьте HTML-блок.

3. Вставьте в него код плашки cookies (см. ниже).

Шаг 2. Код плашки cookies

Ниже приведён готовый пример. В код добавлены комментарии, чтобы вам и коллегам было проще адаптировать дизайн и тексты под ваш сайт.

<style>
  /* === Стили плашки cookies === */
  #cookie-consent {
    position: fixed; /* фиксируем плашку поверх сайта */
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: #111; /* фон (можно изменить под бренд) */
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    z-index: 9999; /* всегда поверх */
  }
  #cookie-consent p {
    margin: 0;
    font-size: 14px;
    color: #ddd;
  }
  /* === Ссылка на политику === */
  #cookie-consent a {
    color: #84cc16; /* салатовый цвет */
    text-decoration: underline;
    transition: color 0.2s ease;
  }
  #cookie-consent a:hover {
    color: #a3e635; /* ярче при наведении */
  }
  /* === Кнопки === */
  .cc-btn {
    border: 0;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .cc-accept {
    background: #84cc16; /* салатовый фон */
    color: #000; /* чёрный текст */
  }
  .cc-accept:hover {
    background: #65a30d; /* темнее при наведении */
    color: #000;
  }
  .cc-decline {
    background: transparent;
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, .15);
  }
  .cc-decline:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
  }
  .hidden {
    display: none !important;
  }
  @media(max-width:520px) {
    #cookie-consent {
      flex-direction: column;
      align-items: stretch;
    }
  }
</style>

<!-- === HTML плашки === -->
<div id="cookie-consent" role="dialog" aria-live="polite" data-shown="true">
  <p>
    Мы используем cookies для улучшения работы сайта. 
    Оставаясь на нашем сайте, Вы соглашаетесь с 
    <!-- замените ссылку ниже на свою страницу политики -->
    <a href="/privacy-policy" target="_blank" rel="noopener">Политикой конфиденциальности</a>.
  </p>
  <div>
    <!-- здесь можно поменять текст кнопок -->
    <button type="button" class="cc-btn cc-decline" id="cc-decline">Отклонить</button>
    <button type="button" class="cc-btn cc-accept" id="cc-accept">Принять</button>
  </div>
</div>

<script>
(function(){
  const NAME = 'site_cookies_v1'; // имя cookie, где хранится выбор пользователя
  const el = document.getElementById('cookie-consent');
  const acceptBtn = document.getElementById('cc-accept');
  const declineBtn = document.getElementById('cc-decline');

  if (!el || !acceptBtn || !declineBtn) {
    console.error('Cookie banner: отсутствуют элементы в DOM');
    return;
  }

  // === Установка cookie ===
  function setCookie(name, val, days = 365) {
    const d = new Date(); 
    d.setTime(d.getTime() + days*24*60*60*1000);
    document.cookie = name + "=" + encodeURIComponent(val) + ";path=/;expires=" + d.toUTCString() + ";SameSite=Lax";
  }

  // === Чтение cookie ===
  function getCookie(name) {
    return document.cookie.split('; ').reduce((res, part) => {
      const [k, v] = part.split('=');
      return k === name ? decodeURIComponent(v || '') : res;
    }, null);
  }

  // Если выбор уже сделан — скрываем плашку
  if (getCookie(NAME)) {
    el.classList.add('hidden');
  }

  // Сохраняем выбор и скрываем баннер
  function hideAndSave(val) {
    try {
      setCookie(NAME, val);
    } catch (e) {
      console.warn('Не удалось сохранить cookie:', e);
    }
    el.classList.add('hidden');
    el.setAttribute('aria-hidden', 'true');
    console.log('cookie choice:', val);
  }

  // Обработка кнопки "Принять"
  acceptBtn.addEventListener('click', function(e){
    e.preventDefault();
    hideAndSave('accepted');
    // Здесь можно запускать аналитику (например, Яндекс.Метрика или GA)
  });

  // Обработка кнопки "Отклонить"
  declineBtn.addEventListener('click', function(e){
    e.preventDefault();
    hideAndSave('declined');
  });

  // Предотвращаем возможные конфликты с формами
  [acceptBtn, declineBtn].forEach(btn => btn.addEventListener('click', ev => ev.stopPropagation()));

  // Escape также закрывает плашку
  document.addEventListener('keydown', e => { 
    if (e.key === 'Escape') el.classList.add('hidden'); 
  });
})();
</script>

Шаг 3. Что можно поменять

• Дизайн (цвета, размеры, шрифты) — в <style>.

• Текст уведомления — в блоке <p>.

• Ссылку на политику — в теге <a href="...">.

• Текст кнопок — внутри <button>.

• Действия при согласии — в обработчике "Принять" (например, запуск аналитики).

Таким образом вы добавите на свой сайт, сделанный на конструкторе Craftum плашку cookies. И ваш сайт будет соответствовать требованиям законодательства РФ и поможет снизить вероятность претензий со стороны регуляторов.

Мой Craftum тут.

Заходите в мой тг канал Дизайн дилетант, пишу о своих коммерческих проектах.