Новости и идеи бизнеса

Как настроить cookies-уведомление на Tilda: шаг за шагом, с затемнением сайта

Tilda Publishing позволяет просто добавить баннер о согласии с cookies, но мы пошли дальше — сделали полную систему уведомления, включая:

  • баннер с согласием (блок T886)
  • страницу с подробной информацией
  • реакции на «не согласен»
  • полное затемнение сайта до согласия
  • разблокировку сайта только после нажатия «Согласен»

👇 Вот как мы это реализовали.

🔹 Шаг 1: Добавляем баннер cookies (блок T886)

Вставьте на любую страницу сайта (обычно на главную или в подвал сайта) блок T886. Блок T886 можно найти в категории “Формы → Cookie banner”.

Это стандартный баннер cookies от Tilda с кнопкой «Согласен»

🔧 Обязательно проверьте:

  • блок имеет ID, например #recXXXXXXX
  • включён автопоказ при загрузке
  • текст адаптирован под ваш стиль (мы добавили ссылку «Подробнее»)

🔹 Шаг 2: Блок с описанием cookies (BF503)

На той же странице добавьте блок BF503 — в нём разместите текст:

  • Что такое cookies
  • Какие типы используются
  • Цели использования
  • Ссылка на политику конфиденциальности
В тексте баннера (T886) ссылка “Подробнее” должна вести на ID блока BF503

🔹 Шаг 3: Обработка отказа — “Не согласен” (ещё один BF503)

Добавьте ещё один блок BF503 ниже, с ID, например #recXXXXXXXX1

В нём — текст:

Вы отказались от использования cookies. Некоторые функции сайта могут работать ограниченно. Если передумаете — нажмите «Согласен» в баннере.


🔹 Шаг 4: Добавляем затемнение сайта (T123) Этот код вставляется в подвал сайта , чтобы он автоматически применялся ко всем страницам.

Создайте HTML-блок T123 в подвале сайта (через настройки сайта → Подвал)
<style>
  /* Блокировка прокрутки только на больших экранах */
  @media (min-width: 769px) {
    body.cookie-lock {
      overflow: hidden;
    }

    #cookie-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9990;
    }
  }

  /* Баннер куки — фиксирован внизу на всех экранах */
  #rec996921256 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 16px;
    width: 100%;
    max-width: 100vw;
  }

  @media (max-width: 768px) {
    #rec996921256 {
      font-size: 16px;
      padding: 16px;
    }
  }
</style>

<!-- Затемнение (только на десктопе) -->
<div id="cookie-overlay"></div>

<script>
  function removeCookieOverlay() {
    const overlay = document.getElementById('cookie-overlay');
    const banner = document.getElementById('recxxxxxxxxxxx');
    if (overlay) overlay.style.display = 'none';
    if (banner) banner.style.display = 'none';
    document.body.classList.remove('cookie-lock');
  }

  document.addEventListener("DOMContentLoaded", function () {
    if (localStorage.getItem('cookieAccepted') === 'true') {
      removeCookieOverlay();
      return;
    }

    // Блокируем прокрутку только на больших экранах
    if (window.innerWidth > 768) {
      document.body.classList.add('cookie-lock');
    }

    const observer = new MutationObserver(() => {
      const acceptBtn = document.querySelector('#recxxxxxxxxxx .t-btn');
      if (acceptBtn) {
        acceptBtn.addEventListener('click', function () {
          localStorage.setItem('cookieAccepted', 'true');
          removeCookieOverlay();
        });
        observer.disconnect();
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>

🔍 Не забудьте заменить #recXXXXXXXXX на ваш ID

Что делает этот код:

  • блокирует прокрутку
  • затемняет сайт до согласия
  • при нажатии “Согласен” — сайт становится активным

✅ Готово! У вас работает система:

  • баннер cookies с кнопкой
  • описание по якорной ссылке
  • реакция на «не согласен»
  • затемнение и разблокировка сайта

Такой подход повышает доверие пользователей и соответствует требованиям по работе с персональными данными.

Пример работы:

💻 Посмотрите, как это работает на нашем сайте

📌 Совет: протестируйте в режиме “Инкогнито”, чтобы увидеть баннер как впервые посетивший пользователь.

💻 На компьютере:

🟢 Google Chrome / Яндекс Браузер / Opera:

  • Нажми: Ctrl + Shift + N

🔵 Mozilla Firefox:

  • Нажми: Ctrl + Shift + P

🟣 Microsoft Edge:

  • Нажми: Ctrl + Shift + N

📱 На телефоне:

🔹 В Chrome:

  1. Открой меню (⋮ в правом верхнем углу)
  2. Выбери «Новая вкладка инкогнито»
🔸 В Safari (iPhone):

  1. Нажми на иконку вкладок (внизу)
  2. Выбери «[x] вкладок» → переключись в режим «Приватный»

🕶️ В инкогнито-режиме:

  • Сайт не видит старые куки
  • Все данные стираются после закрытия вкладки
  • Удобно для проверки баннеров, first-visit-логики, форм и всплывающих окон


💬 Нужна помощь?

Если e вас не получилось или возникли вопросы, наш AI помощник Алекс вам поможет.

2025-06-23 11:41