Уведомление о 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. СТИЛИ ===================== -->
<style>
/*
  Cookie-баннер av-five.ru — стили
  Автор: Виктор Андряшин, https://av-five.ru

  Основные цвета (меняются поиском и заменой):
    #3e563e — фон кнопок
    #618c61 — акцент: крестики, тумблеры, обводка фокуса
    #1f2a1f — заголовки
    #2c3530 — основной текст
*/

/* Чтобы отступы и рамки не увеличивали размеры элементов */
.ck-banner, .ck-banner *, .ck-settings, .ck-settings * { box-sizing: border-box; }
.ck-banner input, .ck-settings input { font: inherit; }

/* ---------- Общая оболочка: оба окна прижаты к низу экрана ---------- */
.ck-banner,
.ck-settings {
  font-family: var(--t-text-font, Arial); /* шрифт текста из настроек Tilda */
  position: fixed;
  z-index: 850;
  --ck-w: min(820px, 100%);               /* максимальная ширина окна */
  left: 16px;
  right: 16px;
  bottom: 16px;                           /* отступ от низа экрана */
  display: flex;
  justify-content: center;
  pointer-events: none;                   /* пока скрыт — не мешает кликам по сайту */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease; /* плавное появление */
}
.ck-settings { z-index: 900; }            /* настройки поверх баннера */

/* Видимое состояние (класс is-open добавляет скрипт) */
.ck-banner.is-open,
.ck-settings.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Белые карточки ---------- */
.ck-banner__inner,
.ck-settings__inner {
  position: relative;
  width: var(--ck-w);
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid rgba(97, 140, 97, 0.22);
  box-shadow: 0 12px 28px -14px rgba(20, 14, 8, 0.25), 0 2px 8px -4px rgba(20, 14, 8, 0.12);
}
/* Если окно настроек не влезает по высоте — появится прокрутка */
.ck-settings__inner {
  max-height: calc(100vh - 32px);
  overflow: auto;
}

/* ---------- Заголовки ---------- */
.ck-banner__title,
.ck-settings__title {
  font-family: var(--t-headline-font, Arial); /* шрифт заголовков из настроек Tilda */
  color: #1f2a1f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 28px 6px 0;                   /* справа место под крестик */
}

/* ---------- Текст ---------- */
.ck-banner__text,
.ck-settings__text {
  color: #2c3530;
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 12px;
  text-wrap: pretty;                      /* аккуратный перенос строк */
}

/* ---------- Ссылка на политику ---------- */
.ck-banner__link {
  color: #3e563e;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.ck-banner__link:hover { color: #000; }

/* ---------- Крестики закрытия ---------- */
.ck-banner__close,
.ck-settings__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #618c61;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ck-banner__close:hover,
.ck-settings__close:hover {
  background-color: rgba(97, 140, 97, 0.12);
  color: #3e563e;
}

/* ---------- Кнопки ---------- */
.ck-banner__actions { display: flex; flex-direction: column; gap: 8px; }
.ck-banner__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* две кнопки в ряд */
.ck-settings__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ck-banner__btn,
.ck-settings__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  cursor: pointer;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #ffffff;
  background-color: #3e563e;
  text-transform: uppercase;              /* текст кнопок заглавными */
  letter-spacing: 0.05em;
  transition: background-color .2s ease, transform .2s ease;
}
.ck-settings__btn { flex: 1 1 140px; width: auto; min-width: 110px; }
.ck-banner__btn:hover,
.ck-settings__btn:hover { background-color: #000000; }   /* цвет при наведении */
.ck-banner__btn:active,
.ck-settings__btn:active { transform: translateY(1px); } /* лёгкое «нажатие» */
.ck-banner__btn:focus-visible,
.ck-settings__btn:focus-visible { outline: 2px solid #618c61; outline-offset: 2px; } /* рамка при управлении с клавиатуры */

/* ---------- Список тумблеров ---------- */
.ck-settings__options {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;                        /* на ПК — в строку */
  gap: 6px 16px;
}
.ck-settings__opt-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;                              /* расстояние между тумблером и подписью */
  cursor: pointer;
  padding: 3px 4px;
  transition: background-color .2s ease;
}
.ck-settings__opt-label:hover { background-color: rgba(97, 140, 97, 0.06); }

/* Настоящий чекбокс спрятан — вместо него рисуется тумблер */
.ck-settings__checkbox { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* Корпус тумблера — прямые углы */
.ck-settings__switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #618c61;
  border-radius: 0;
  background-color: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
/* Ползунок — квадрат */
.ck-settings__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 0;
  background-color: #618c61;
  transition: transform .2s ease, background-color .2s ease;
}
/* Включено: корпус заливается, ползунок белеет и уезжает вправо */
.ck-settings__checkbox:checked + .ck-settings__switch { background-color: #618c61; }
.ck-settings__checkbox:checked + .ck-settings__switch .ck-settings__knob {
  transform: translateX(16px);
  background-color: #ffffff;
}
.ck-settings__checkbox:focus-visible + .ck-settings__switch { outline: 2px solid #618c61; outline-offset: 2px; }
/* Заблокированный тумблер («Необходимые») — бледнее */
.ck-settings__checkbox:disabled + .ck-settings__switch { opacity: 0.6; }
.ck-settings__opt-label:has(.ck-settings__checkbox:disabled) { cursor: not-allowed; }

/* Подписи тумблеров */
.ck-settings__opt-name { color: #1f2a1f; font-size: 12px; line-height: 1.4; white-space: nowrap; }

/* ---------- Адаптив ---------- */
/* Планшет */
@media (max-width: 960px) {
  .ck-banner, .ck-settings { --ck-w: 100%; }
}
/* Телефон: кнопки и тумблеры встают в столбик */
@media (max-width: 640px) {
  .ck-banner, .ck-settings { left: 10px; right: 10px; bottom: 10px; }
  .ck-banner__inner, .ck-settings__inner { padding: 14px 16px; }
  .ck-banner__row { grid-template-columns: 1fr; }
  .ck-settings__btn { flex: 1 1 100%; }
  .ck-settings__options { flex-direction: column; gap: 4px; }
  .ck-settings__opt-name { white-space: normal; }
}
/* Маленький телефон */
@media (max-width: 480px) {
  .ck-banner, .ck-settings { left: 8px; right: 8px; bottom: 8px; }
  .ck-banner__inner, .ck-settings__inner { padding: 12px 14px; }
  .ck-banner__title { font-size: 13px; }
}
/* Если у посетителя в системе отключена анимация — убираем её */
@media (prefers-reduced-motion: reduce) {
  .ck-banner, .ck-settings, .ck-banner *, .ck-settings * { transition: none !important; }
}
</style>


<!-- ===================== 4. ЛОГИКА ===================== -->
<script>
/*
  Cookie-баннер av-five.ru — логика
  Автор: Виктор Андряшин, https://av-five.ru

  Что делает:
    - показывает баннер, если посетитель ещё не делал выбор;
    - сохраняет выбор в браузере (localStorage), чтобы не спрашивать повторно;
    - после выбора отправляет событие «cookie:notice:resolved» —
      к нему можно привязать запуск Яндекс Метрики и других счётчиков.
*/
(function () {
  'use strict';

  // Имя записи в браузере. Если поменять (например, на _v2) —
  // баннер снова увидят все посетители.
  var STORAGE_KEY = 'avfive_cookie_choice_v1';

  // Находим оба окна на странице
  var banner = document.querySelector('.ck-banner');
  var settings = document.querySelector('.ck-settings');
  if (!banner || !settings) return;

  // Читаем сохранённый выбор (если посетитель уже был на сайте)
  var saved = null;
  try { saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); } catch (e) {}

  // Показать / скрыть окно
  function show(el)  { el.classList.add('is-open');    el.setAttribute('aria-hidden', 'false'); }
  function hide(el)  { el.classList.remove('is-open'); el.setAttribute('aria-hidden', 'true'); }

  // Открыть окно настроек вместо баннера
  function openSettings() {
    hide(banner); show(settings);
    var first = settings.querySelector('.ck-settings__btn');
    if (first) first.focus();
  }

  // Все тумблеры в окне настроек
  function boxes() { return settings.querySelectorAll('.ck-settings__checkbox'); }

  // Считать, какие тумблеры включены
  function readBoxes() {
    var sel = { necessary: true, functional: false, analytics: false };
    boxes().forEach(function (b) {
      var key = b.getAttribute('data-ck');
      if (key && key !== 'necessary') sel[key] = b.checked;
    });
    return sel;
  }

  // Выставить тумблеры по сохранённому выбору
  function setBoxes(sel) {
    boxes().forEach(function (b) {
      var key = b.getAttribute('data-ck');
      if (key && key !== 'necessary') b.checked = !!sel[key];
    });
  }

  // Сохранить выбор, закрыть окна и сообщить сайту о решении посетителя
  function save(action, choices) {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ action: action, choices: choices, ts: Date.now() })); } catch (e) {}
    setBoxes(choices);
    hide(settings); hide(banner);
    document.dispatchEvent(new CustomEvent('cookie:notice:resolved', { detail: { action: action, choices: choices } }));
  }

  // Готовые наборы: «всё включено» и «только необходимые»
  var ALL  = { necessary: true, functional: true,  analytics: true  };
  var NONE = { necessary: true, functional: false, analytics: false };

  // Что делает каждая кнопка (по атрибуту data-action)
  function handle(action) {
    if (action === 'accept-all')            save(action, ALL);
    else if (action === 'accept-necessary') save(action, NONE);
    else if (action === 'confirm')          save(action, readBoxes());
    else if (action === 'open-settings')    openSettings();
  }

  if (saved && saved.choices) {
    // Посетитель уже выбирал — баннер не показываем, просто передаём его выбор
    setBoxes(saved.choices);
    document.dispatchEvent(new CustomEvent('cookie:notice:resolved', { detail: { action: 'restored', choices: saved.choices } }));
  } else {
    // Первый визит — показываем баннер через 0,3 секунды после загрузки
    setTimeout(function () { show(banner); }, 300);
  }

  // Клики по кнопкам баннера (ссылку на политику не перехватываем)
  banner.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-action]');
    if (btn && btn.getAttribute('data-action') !== 'open-policy') handle(btn.getAttribute('data-action'));
  });

  // Клики по кнопкам окна настроек
  settings.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-action]');
    if (btn) handle(btn.getAttribute('data-action'));
  });

  // Крестик на баннере = «Только необходимые» (без согласия аналитика не включается)
  banner.querySelector('.ck-banner__close').addEventListener('click', function () { save('dismissed', NONE); });

  // Крестик в настройках — вернуться к баннеру
  settings.querySelector('.ck-settings__close').addEventListener('click', function () { hide(settings); show(banner); });

  // Клавиша Esc в настройках — вернуться к баннеру
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    if (settings.classList.contains('is-open')) { hide(settings); show(banner); }
  });

  /*
    Команды для использования в других местах сайта:
      CookieNotice.openSettings() — открыть настройки.
        Пример ссылки в футере:
        <a href="#" onclick="CookieNotice.openSettings();return false;">Настройки cookie</a>
      CookieNotice.reset() — сбросить выбор и показать баннер заново (для проверки).
  */
  window.CookieNotice = {
    openSettings: openSettings,
    reset: function () {
      try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
      setBoxes(NONE); hide(settings); show(banner);
    }
  };
})();
</script>

Шаг 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 или перенесите коды счётчиков в обработчик события, как показано выше.

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