Уведомление о cookie на Тильде: готовый код баннера с настройками

Инструкции

Если на сайте стоит Яндекс Метрика, Google Analytics или рекламный пиксель — посетителя нужно уведомить о том, что сайт использует cookie. В Тильде для этого есть штатные блоки, но они не всегда вписываются в дизайн. Ниже — готовый код баннера с отдельным окном настроек: вставляется в один блок, работает на всех страницах и запоминает выбор посетителя.Так же вы можете использовать онлайн генератор:https://av-five.ru/instrumenty/cookie-generator

Сначала — что уже умеет сама Тильда

Прежде чем вставлять чужой код, честно проверьте: возможно, вам хватит штатного блока. Все они лежат в Библиотеке блоков → категория «Другое».

T657, T886, T887 — простое уведомление. Посетитель видит плашку и кнопку «Ок». Выбирать или отключать cookie нельзя.
T972 — полноценный виджет с четырьмя видами cookie: обязательные, аналитические, рекламные и собственные. Главное отличие — он реально управляет счётчиками: пока человек не дал согласие, код Метрики, Google Analytics и пикселей не запускается.

Если задача формулируется как «нужно соблюсти закон» — берите T972. Он делает не только вид, но и техническую часть. Свой код имеет смысл ставить в другом случае: когда нужен полный контроль над внешним видом — свои цвета, свои отступы, свой текст, своё расположение на экране. Как раз для этого и написан код ниже.

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

Плашка внизу экрана. Заголовок, короткий текст, ссылка на политику и три кнопки: «Принять все», «Принять необходимые», «Настроить параметры». Плюс крестик, чтобы закрыть.
Окно настроек. Открывается по кнопке «Настроить параметры». Четыре категории с галочками: строго необходимые (всегда включены, отключить нельзя), производительности, функциональные, аналитические.
Запоминает выбор. Решение сохраняется в браузере посетителя, при следующем визите плашка уже не появляется.
Подхватывает стиль сайта. Шрифты и цвета кнопок берутся из настроек проекта Тильды, а если их нет — из запасных значений прямо в коде.
Адаптивный. На телефоне кнопки становятся в столбик, отступы уменьшаются.
Закрывается по клавише Esc и уважает системную настройку «уменьшить анимацию».

Как добавить на сайт: пошагово

Баннер нужен на всех страницах сразу, поэтому ставим его не на конкретную страницу, а в подвал сайта — тогда он автоматически появится везде.

Шаг 1. Найдите страницу подвала

Откройте Настройки сайта → Шапка и подвал и посмотрите, какая страница назначена подвалом. Если подвала ещё нет — создайте обычную новую страницу и назовите её, например, «Подвал».

Шаг 2. Добавьте блок для кода

Зайдите в редактирование этой страницы: Библиотека блоков → Другое → блок T123 «HTML-код». Поставьте его в самый низ страницы.

Шаг 3. Вставьте код

Нажмите «Контент» у блока T123 и вставьте туда КОД целиком.

КОД:

<!--
  ============================================================
  Cookie-баннер с настройками для сайта av-five.ru
  ============================================================
  Автор:    Виктор Андряшин — веб-дизайнер, разработка сайтов на Tilda
  Сайт:     https://av-five.ru
  Связь:    Telegram @Vian_web · info@av-five.ru
  Версия:   1.1 (октябрь 2026)

  Состав:
    1. Баннер — появляется внизу экрана при первом визите
    2. Окно настроек — выбор категорий cookie тумблерами
    3. Стили (CSS)
    4. Логика (JavaScript) — запоминает выбор посетителя

  Как установить на Tilda:
    Блок T123 («Другое» → «HTML-код») → вставить весь код.
    Чтобы баннер был на всех страницах — разместить блок
    в общем подвале: «Настройки сайта → Хедер и футер».
  ============================================================
-->


<!-- ===================== 1. БАННЕР ===================== -->
<section class="ck-banner" aria-labelledby="ck-banner-title" aria-hidden="true">
  <div class="ck-banner__inner">

    <!-- Крестик: закрывает баннер (считается как «Только необходимые») -->
    <button class="ck-banner__close" type="button" aria-label="Закрыть уведомление">
      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
        <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
    </button>

    <!-- Заголовок баннера -->
    <h2 class="ck-banner__title t-name t-name_sm" id="ck-banner-title">Сайт использует cookie</h2>

    <!-- Текст баннера + ссылка на политику (адрес /policy можно заменить) -->
    <p class="ck-banner__text t-text t-text_sm">
      Cookie нужны, чтобы сайт, формы заявки и корзина в магазине работали правильно, а ещё — чтобы через Яндекс Метрику и Google видеть обезличенную статистику посещений и делать сайт удобнее. Вы можете принять все cookie, оставить только необходимые или выбрать сами. Подробнее — в
      <a class="ck-banner__link" href="/policy" data-action="open-policy" target="_blank">Политике обработки персональных данных.</a>
    </p>

    <!-- Кнопки баннера. data-action — что делает кнопка (обрабатывается в скрипте) -->
    <div class="ck-banner__actions">
      <div class="ck-banner__row">
        <button class="ck-banner__btn t-btnflex t-btnflex_sm" type="button" data-action="accept-all">
          <span class="t-btnflex__text">Принять все</span>
        </button>
        <button class="ck-banner__btn t-btnflex t-btnflex_sm" type="button" data-action="accept-necessary">
          <span class="t-btnflex__text">Только необходимые</span>
        </button>
      </div>
      <!-- Открывает окно настроек с тумблерами -->
      <button class="ck-banner__btn t-btnflex t-btnflex_sm" type="button" data-action="open-settings">
        <span class="t-btnflex__text">Выбрать самостоятельно</span>
      </button>
    </div>
  </div>
</section>


<!-- ===================== 2. ОКНО НАСТРОЕК ===================== -->
<section class="ck-settings" aria-labelledby="ck-settings-title" aria-hidden="true">
  <div class="ck-settings__inner" role="dialog" aria-modal="true" aria-labelledby="ck-settings-title">

    <!-- Крестик: закрывает настройки и возвращает баннер -->
    <button class="ck-settings__close" type="button" aria-label="Закрыть окно настроек">
      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
        <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
      </svg>
    </button>

    <!-- Заголовок окна настроек -->
    <h2 class="ck-settings__title t-name t-name_sm" id="ck-settings-title">Настройки cookie</h2>

    <!-- Пояснение: что такое cookie и зачем они сайту -->
    <p class="ck-settings__text t-text t-text_sm">
      Cookie — это небольшие файлы, которые сайт сохраняет в вашем браузере. Они не используются, чтобы узнать, кто вы. На av-five.ru они нужны для трёх задач: чтобы сайт работал без сбоев, чтобы запоминать товары в корзине и введённые в формы данные, и чтобы собирать обезличенную статистику — какие страницы читают, откуда приходят посетители. Необходимые cookie отключить нельзя: без них сайт не будет работать. Остальные включайте по желанию.
    </p>

    <!--
      Тумблеры категорий.
      data-ck — служебное имя категории, по нему скрипт сохраняет выбор:
        necessary  — необходимые (всегда включены, нельзя выключить)
        functional — функциональные (корзина, формы)
        analytics  — аналитические (Яндекс Метрика, Google)
    -->
    <ul class="ck-settings__options" role="list">

      <!-- Необходимые — включены и заблокированы (disabled) -->
      <li class="ck-settings__option">
        <label class="ck-settings__opt-label">
          <input type="checkbox" class="ck-settings__checkbox" data-ck="necessary" checked disabled aria-label="Необходимые cookie (всегда включены)">
          <span class="ck-settings__switch" aria-hidden="true"><span class="ck-settings__knob"></span></span>
          <span class="ck-settings__opt-name t-text t-text_xs">Необходимые</span>
        </label>
      </li>

      <!-- Функциональные -->
      <li class="ck-settings__option">
        <label class="ck-settings__opt-label">
          <input type="checkbox" class="ck-settings__checkbox" data-ck="functional" aria-label="Функциональные cookie: корзина и формы">
          <span class="ck-settings__switch" aria-hidden="true"><span class="ck-settings__knob"></span></span>
          <span class="ck-settings__opt-name t-text t-text_xs">Функциональные (корзина, формы)</span>
        </label>
      </li>

      <!-- Аналитические -->
      <li class="ck-settings__option">
        <label class="ck-settings__opt-label">
          <input type="checkbox" class="ck-settings__checkbox" data-ck="analytics" aria-label="Аналитические cookie: Яндекс Метрика и Google">
          <span class="ck-settings__switch" aria-hidden="true"><span class="ck-settings__knob"></span></span>
          <span class="ck-settings__opt-name t-text t-text_xs">Аналитические (Яндекс Метрика, Google)</span>
        </label>
      </li>
    </ul>

    <!-- Кнопки окна настроек -->
    <div class="ck-settings__actions">
      <!-- Сохраняет то, что посетитель выбрал тумблерами -->
      <button class="ck-settings__btn t-btnflex t-btnflex_sm" type="button" data-action="confirm">
        <span class="t-btnflex__text">Сохранить выбор</span>
      </button>
      <button class="ck-settings__btn t-btnflex t-btnflex_sm" type="button" data-action="accept-all">
        <span class="t-btnflex__text">Принять все</span>
      </button>
      <button class="ck-settings__btn t-btnflex t-btnflex_sm" type="button" data-action="accept-necessary">
        <span class="t-btnflex__text">Только необходимые</span>
      </button>
    </div>
  </div>
</section>


<!-- ===================== 3. СТИЛИ ===================== -->



<!-- ===================== 4. ЛОГИКА ===================== -->

Шаг 4. Назначьте страницу подвалом

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

Шаг 5. Опубликуйте

Опубликуйте страницу подвала, а затем переопубликуйте все страницы сайта. Без этого баннер не появится — это самая частая причина «я всё сделал, но ничего не работает».

Важно: в режиме редактирования и в предпросмотре код показывается простым текстом. Это нормально. Проверять нужно только на опубликованном сайте.

Что обязательно поменять под себя

1. Ссылку на политику cookie

В коде стоит заглушка href="/policy". Замените её на адрес своей страницы с политикой. Найти строку просто: ищите по слову ck-banner__link.

2. Тексты

Заголовки «Файлы cookie» и «Настройки файлов cookie», описания и названия категорий — обычный текст внутри тегов, меняйте прямо в коде. Не трогайте только атрибуты data-action и aria-label у чекбоксов: на них завязана логика скрипта.

3. Цвета

Цвета записаны так: var(--uc-button-bgcolor-zQYsuSY, #3e563e). Первое значение — переменная из настроек стилей вашего проекта, второе (после запятой) — запасной цвет, который применится, если переменной нет. Самый простой путь: найти в коде шестизначные коды и заменить на свои.

#ffffff — фон плашки и окна настроек;
#1f2a1f — цвет заголовков;
#2c3530 — цвет основного текста;
#3e563e — фон кнопок;
#000000 — фон кнопок при наведении;
#618c61 — акцентный цвет: рамки галочек, крестик, обводка при фокусе.

4. Положение и ширину

В самом начале стилей есть строка --ck-w: min(820px, 100%) — это максимальная ширина плашки. Рядом bottom: 16px — отступ от нижнего края экрана. Если хотите прижать баннер к левому краю, замените justify-content: center на justify-content: flex-start.

Важно: баннер не отключает счётчики

Это нужно понимать честно. Код показывает уведомление и запоминает выбор посетителя — но сам по себе он не мешает Яндекс Метрике или пикселю собирать данные. Если вам нужна именно техническая сторона (счётчики не работают до согласия) — тут выигрывает штатный блок T972, он умеет это из коробки.

Свой код с этим тоже можно подружить. После выбора посетителя скрипт отправляет событие cookie:notice:resolved — за него можно зацепить подключение своих счётчиков:

КОД 2:

<script>
document.addEventListener('cookie:notice:resolved', function (e) {
  var d = e.detail || {};
  var c = d.choices || {};
  var all = d.action === 'accept-all';

  if (all || c.analytics) {
    // сюда переносим код Яндекс Метрики / Google Analytics
    console.log('Аналитика разрешена');
  }

  if (all || c.performance) {
    // сюда то, что относится к производительности
    console.log('Куки производительности разрешены');
  }
});
</script>

Счётчики в этом случае нельзя ставить обычным способом через настройки сайта — их код переносят внутрь этого обработчика, чтобы он срабатывал только после согласия.

Как проверить, что всё работает

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

Чтобы показать баннер заново и проверить ещё раз, откройте консоль браузера (Ctrl+Shift+J или ⌘+Option+J) и выполните:

CookieNotice.reset()

Эта же команда пригодится, когда вы правите тексты и хотите посмотреть результат. А команда CookieNotice.openSettings() откроет окно настроек — её удобно повесить на ссылку в подвале, чтобы посетитель мог изменить решение позже.

Частые ошибки

Код виден на странице как текст. Страница не опубликована. В предпросмотре так и должно быть.
Баннер есть только на одной странице. Код лежит не в подвале, либо остальные страницы не переопубликованы.
Ссылка ведёт на чужой сайт. Не заменили заглушку в href.
Баннер больше не показывается, а нужно проверить. Выбор уже сохранён в браузере — используйте CookieNotice.reset().
На сайте два баннера. Остался включённым штатный блок T657, T886, T887 или T972 — отключите лишний.
Вставили только часть кода. Копировать нужно целиком: разметку, стили и скрипт. Без скрипта плашка просто не появится.

Коротко

Один блок T123 в подвале сайта, один кусок кода, пять минут работы — и на всех страницах появляется аккуратное уведомление о cookie с настройками, которое выглядит как часть вашего дизайна, а не как чужой виджет. Если нужна не только форма, но и реальное управление счётчиками — ставьте штатный блок T972 или перенесите коды счётчиков в обработчик события, как показано выше.

Андряшин Виктор

2026-09-18 23:44