Свежие статьи

Как сделать уведомление о Cookie на сайте: готовый код + что будет, если его не установить

Ваш сайт собирает куки? Тогда у меня для вас плохие новости…

Вы поставили Яндекс.Метрику. Подключили аналитику. Запустили рекламу. Настроили цели. Клиенты идут, статистика собирается, проект работает.

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

Самое забавное, что многие фрилансеры, веб-разработчики и владельцы сайтов узнают об этом уже после запуска проекта. Когда сайт давно работает, клиент доволен, а про куки никто даже не вспоминал.

И нет, речь не про те куки, которые едят с кофе.

Один маленький баннер может сэкономить очень много нервов

Если на сайте работают:

  • Яндекс.Метрика;
  • Google Analytics;
  • пиксели рекламных систем;
  • сервисы аналитики;
  • сторонние виджеты и скрипты,

то посетитель должен быть уведомлен о сборе данных через cookie-файлы.

Звучит скучно.
Но отсутствие такого уведомления может оказаться гораздо менее приятным, чем потратить 10 минут на его установку.

Как обычно происходит у фрилансеров

Клиент пишет:
«Нужно сделать сайт быстро».

Вы собираете лендинг.
Ставите аналитику.
Подключаете формы.
Настраиваете рекламу.
Сдаёте проект.
Получаете оплату.

Через несколько месяцев оказывается, что про cookie-уведомление никто даже не подумал.

Потому что о нем вспоминают примерно так же часто, как о резервных копиях. То есть только тогда, когда уже поздно.

Поэтому я подготовил готовое решение

✅ Без плагинов.
✅ Без регистрации.
✅ Без танцев с бубном.

В видео я показываю сразу два рабочих варианта cookie-баннера, которые можно просто скопировать и вставить на сайт.

Даже если вы не программист.
Даже если CSS вызывает у вас легкую тревогу.
Даже если JavaScript для вас выглядит как древнее заклинание.

Вариант №1 — минималистичный

Выглядит вот так

Копируем код ниже и добавляем на сайт

<!--
  Минималистичные куки — HTML Widget для Elementor (футер / Theme Builder)
  Показ через 10 сек; блокировка скролла и кликов по сайту; после «Ясно» — 30 дней.
-->
<style>
  .umi-cookie-notice {
    --umi-graphite: #1a1c1e;
    --umi-blue: #0057ff;
    --umi-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --umi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  html.umi-cookie-notice-open {
    overflow: hidden;
  }

  html.umi-cookie-notice-open body {
    overflow: hidden;
    touch-action: none;
  }

  .umi-cookie-notice[hidden] {
    display: none !important;
  }

  .umi-cookie-notice {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 1.25rem);
    padding-bottom: max(clamp(0.75rem, 3vw, 1.25rem), env(safe-area-inset-bottom));
    font-family: var(--umi-font);
    pointer-events: none;
  }

  .umi-cookie-notice--visible {
    pointer-events: auto;
  }

  .umi-cookie-notice__overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(0, 87, 255, 0.1), transparent 34%),
      rgba(26, 28, 30, 0.45);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    opacity: 0;
    transition: opacity 0.38s var(--umi-ease);
    cursor: default;
  }

  .umi-cookie-notice--visible .umi-cookie-notice__overlay {
    opacity: 1;
  }

  .umi-cookie-notice--closing .umi-cookie-notice__overlay {
    opacity: 0;
  }

  .umi-cookie-notice__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(calc(100% - 1.5rem), 40rem);
    padding: 0.85rem 0.85rem 0.85rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 250, 0.96));
    box-shadow:
      0 12px 40px rgba(26, 28, 30, 0.18),
      0 0 0 1px rgba(0, 87, 255, 0.06);
    color: var(--umi-graphite);
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.38s var(--umi-ease),
      transform 0.38s var(--umi-ease);
  }

  .umi-cookie-notice--visible .umi-cookie-notice__bar {
    opacity: 1;
    transform: translateY(0);
  }

  .umi-cookie-notice--closing .umi-cookie-notice__bar {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .umi-cookie-notice__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(0, 87, 255, 0.1);
    color: var(--umi-blue);
  }

  .umi-cookie-notice__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    line-height: 1.5;
    color: rgba(26, 28, 30, 0.78);
  }

  .umi-cookie-notice__link {
    color: var(--umi-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-color: rgba(0, 87, 255, 0.35);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }

  .umi-cookie-notice__link:hover,
  .umi-cookie-notice__link:focus-visible {
    color: #003dcc;
    text-decoration-color: currentColor;
    outline: none;
  }

  .umi-cookie-notice__link:focus-visible {
    outline: 2px solid var(--umi-blue);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .umi-cookie-notice__ok {
    flex-shrink: 0;
    min-height: 2.35rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: linear-gradient(115deg, #003dcc, var(--umi-blue) 45%, #1a74ff);
    box-shadow: 0 6px 20px rgba(0, 87, 255, 0.28);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.3s var(--umi-ease), box-shadow 0.3s var(--umi-ease), filter 0.3s var(--umi-ease);
  }

  .umi-cookie-notice__ok:hover,
  .umi-cookie-notice__ok:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(0, 87, 255, 0.38);
    filter: brightness(1.05);
    outline: none;
  }

  .umi-cookie-notice__ok:focus-visible {
    outline: 2px solid var(--umi-graphite);
    outline-offset: 3px;
  }

  @media (max-width: 640px) {
    .umi-cookie-notice__bar {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0.65rem 0.75rem;
      width: 100%;
      padding: 0.9rem 1rem;
      border-radius: 1.1rem;
    }

    .umi-cookie-notice__ok {
      width: 100%;
      min-height: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .umi-cookie-notice__overlay,
    .umi-cookie-notice__bar {
      transition: opacity 0.2s ease;
    }

    .umi-cookie-notice__ok:hover,
    .umi-cookie-notice__ok:focus-visible {
      transform: none;
    }
  }
</style>

<div
  class="umi-cookie-notice"
  id="umiCookieNotice"
  hidden
  role="dialog"
  aria-modal="true"
  aria-label="Уведомление о cookie"
>
  <div class="umi-cookie-notice__overlay" data-umi-cookie-overlay aria-hidden="true"></div>

  <div class="umi-cookie-notice__bar">
    <span class="umi-cookie-notice__icon" aria-hidden="true">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
        <path d="M12 8v5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
        <circle cx="12" cy="16.25" r="1.1" fill="currentColor"/>
      </svg>
    </span>

    <p class="umi-cookie-notice__text">
      Мы сохраняем «куки»
      <a class="umi-cookie-notice__link" href="/privacy-policy/" target="_blank" rel="noopener noreferrer">по правилам</a>,
      чтобы персонализировать сайт. Вы можете запретить это в настройках браузера.
    </p>

    <button type="button" class="umi-cookie-notice__ok" id="umiCookieAcceptBtn">Ясно</button>
  </div>
</div>

<script>
  (function () {
    var STORAGE_KEY = "umiCookieNotice";
    var LEGACY_KEY = "umiCookieNoticeAccepted";
    var SHOW_DELAY_MS = 10000;
    var HIDE_AFTER_ACCEPT_MS = 30 * 24 * 60 * 60 * 1000;
    var excludedPages = ["/privacy-policy/"];

    function readAcceptance() {
      try {
        var raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return null;
        var data = JSON.parse(raw);
        if (!data) return null;
        if (typeof data.acceptedAt === "number") return data.acceptedAt;
        if (data.accepted === true && typeof data.at === "number") return data.at;
        return null;
      } catch (e) {
        return null;
      }
    }

    function saveAcceptance() {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({ acceptedAt: Date.now() }));
      localStorage.removeItem(LEGACY_KEY);
    }

    function isAcceptedRecently() {
      if (localStorage.getItem(LEGACY_KEY) === "true") {
        saveAcceptance();
        return true;
      }
      var acceptedAt = readAcceptance();
      return acceptedAt && Date.now() - acceptedAt < HIDE_AFTER_ACCEPT_MS;
    }

    function initCookieNotice() {
      var root = document.getElementById("umiCookieNotice");
      if (!root) return;

      var path = window.location.pathname.replace(/\/+$/, "/") || "/";
      if (excludedPages.indexOf(path) !== -1) {
        root.remove();
        return;
      }

      if (isAcceptedRecently()) {
        root.remove();
        return;
      }

      var acceptBtn = document.getElementById("umiCookieAcceptBtn");
      var overlay = root.querySelector("[data-umi-cookie-overlay]");
      var showTimer = null;
      var hasBeenShown = false;

      function lockPage() {
        document.documentElement.classList.add("umi-cookie-notice-open");
      }

      function unlockPage() {
        document.documentElement.classList.remove("umi-cookie-notice-open");
      }

      function hideNotice() {
        root.classList.remove("umi-cookie-notice--visible");
        root.classList.add("umi-cookie-notice--closing");
        unlockPage();

        window.setTimeout(function () {
          root.setAttribute("hidden", "");
          root.remove();
        }, 320);
      }

      function showNotice() {
        if (hasBeenShown) return;
        hasBeenShown = true;

        root.removeAttribute("hidden");
        lockPage();

        window.requestAnimationFrame(function () {
          root.classList.add("umi-cookie-notice--visible");
        });

        window.setTimeout(function () {
          if (acceptBtn) acceptBtn.focus({ preventScroll: true });
        }, 420);
      }

      showTimer = window.setTimeout(showNotice, SHOW_DELAY_MS);

      if (acceptBtn) {
        acceptBtn.addEventListener("click", function () {
          saveAcceptance();
          window.clearTimeout(showTimer);
          hideNotice();
        });
      }

      if (overlay) {
        overlay.addEventListener("click", function (e) {
          e.preventDefault();
          e.stopPropagation();
        });
      }

      root.addEventListener("click", function (e) {
        if (e.target === root || e.target === overlay) {
          e.preventDefault();
          e.stopPropagation();
        }
      });

      document.addEventListener(
        "touchmove",
        function (e) {
          if (!root.classList.contains("umi-cookie-notice--visible")) return;
          if (root.contains(e.target)) return;
          e.preventDefault();
        },
        { passive: false }
      );

      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && root.classList.contains("umi-cookie-notice--visible")) {
          if (acceptBtn) acceptBtn.focus({ preventScroll: true });
        }
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initCookieNotice);
    } else {
      initCookieNotice();
    }
  })();
</script>

 

Вариант №2 — подробный

Выглядит вот так

 

Код копируем вставляем.

<!--
  Средние куки — виджет HTML для Elementor (глобально: футер или Theme Builder)
  Стили встроены в документ. Первый показ через 10 сек; повтор на каждой странице, пока не нажали «Принимаю»; после принятия — скрыт 30 дней.
-->
<style>
  .umi-cookie-notice {
    --umi-graphite: #1a1c1e;
    --umi-blue: #0057ff;
    --umi-steel: #f4f7fa;
    --umi-white: #ffffff;
    --umi-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --umi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  html.umi-cookie-notice-open {
    overflow: hidden;
  }

  .umi-cookie-notice[hidden] {
    display: none !important;
  }

  .umi-cookie-notice {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 1.25rem);
    padding-bottom: max(clamp(0.75rem, 3vw, 1.25rem), env(safe-area-inset-bottom));
    font-family: var(--umi-font);
    pointer-events: none;
  }

  .umi-cookie-notice--visible {
    pointer-events: auto;
  }

  .umi-cookie-notice__overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(0, 87, 255, 0.14), transparent 34%),
      radial-gradient(circle at 88% 92%, rgba(26, 28, 30, 0.08), transparent 36%),
      rgba(26, 28, 30, 0.52);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    opacity: 0;
    transition: opacity 0.38s var(--umi-ease);
  }

  .umi-cookie-notice--visible .umi-cookie-notice__overlay {
    opacity: 1;
  }

  .umi-cookie-notice--closing .umi-cookie-notice__overlay {
    opacity: 0;
  }

  .umi-cookie-notice__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    max-height: min(90vh, 90dvh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: clamp(1.35rem, 3.2vw, 2rem);
    border-radius: clamp(1.1rem, 2.4vw, 1.75rem);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 250, 0.96) 100%);
    box-shadow:
      0 28px 80px rgba(26, 28, 30, 0.22),
      0 0 0 1px rgba(0, 87, 255, 0.06);
    color: var(--umi-graphite);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition:
      opacity 0.42s var(--umi-ease),
      transform 0.42s var(--umi-ease);
  }

  .umi-cookie-notice--visible .umi-cookie-notice__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .umi-cookie-notice--closing .umi-cookie-notice__dialog {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  .umi-cookie-notice__head {
    margin-bottom: 0.85rem;
  }

  .umi-cookie-notice__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 87, 255, 0.14);
    background: rgba(0, 87, 255, 0.07);
    color: var(--umi-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .umi-cookie-notice__badge-icon {
    flex-shrink: 0;
    color: var(--umi-blue);
  }

  .umi-cookie-notice__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.45rem, 3.6vw, 2rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--umi-graphite);
  }

  .umi-cookie-notice__title-accent {
    background: linear-gradient(115deg, var(--umi-blue) 0%, #1a74ff 55%, #003dcc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .umi-cookie-notice__lead {
    margin: 0;
    color: rgba(26, 28, 30, 0.72);
    font-size: clamp(0.9375rem, 2.2vw, 1rem);
    line-height: 1.65;
  }

  .umi-cookie-notice__body {
    margin-top: 0.35rem;
  }

  .umi-cookie-notice__box {
    margin: 1rem 0 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(26, 28, 30, 0.08);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  }

  .umi-cookie-notice__box strong {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--umi-graphite);
  }

  .umi-cookie-notice__list {
    margin: 0;
    padding-left: 1.15rem;
    color: rgba(26, 28, 30, 0.68);
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .umi-cookie-notice__law {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: rgba(26, 28, 30, 0.48);
  }

  .umi-cookie-notice__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 1.35rem;
  }

  .umi-cookie-notice__accept {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.35rem;
    padding: 0.85rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: linear-gradient(
      115deg,
      #003dcc 0%,
      var(--umi-blue) 22%,
      #1a74ff 48%,
      var(--umi-blue) 72%,
      #003dcc 100%
    );
    background-size: 240% 100%;
    background-position: 0% 50%;
    box-shadow:
      0 8px 28px rgba(0, 87, 255, 0.34),
      0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
      transform 0.35s var(--umi-ease),
      box-shadow 0.35s var(--umi-ease),
      filter 0.35s var(--umi-ease),
      background-position 0.7s var(--umi-ease);
  }

  .umi-cookie-notice__accept::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(
      105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 58%
    );
    transform: translateX(-100%) rotate(12deg);
    transition: transform 0.65s var(--umi-ease);
    pointer-events: none;
  }

  .umi-cookie-notice__accept:hover,
  .umi-cookie-notice__accept:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.02);
    background-position: 100% 50%;
    box-shadow:
      0 12px 36px rgba(0, 87, 255, 0.46),
      0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    filter: brightness(1.06) saturate(1.05);
    outline: none;
  }

  .umi-cookie-notice__accept:hover::after,
  .umi-cookie-notice__accept:focus-visible::after {
    transform: translateX(55%) rotate(12deg);
  }

  .umi-cookie-notice__accept:focus-visible {
    outline: 2px solid var(--umi-graphite);
    outline-offset: 3px;
  }

  .umi-cookie-notice--visible .umi-cookie-notice__accept {
    animation: umi-cookie-accept-pulse 2.4s var(--umi-ease) 0.55s 2;
  }

  .umi-cookie-notice__accept-label {
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .umi-cookie-notice__accept-hint {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.88;
  }

  .umi-cookie-notice__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 7.5rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(26, 28, 30, 0.14);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 18px rgba(26, 28, 30, 0.06);
    color: var(--umi-graphite);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
      transform 0.3s var(--umi-ease),
      border-color 0.3s var(--umi-ease),
      box-shadow 0.3s var(--umi-ease),
      color 0.3s var(--umi-ease),
      background 0.3s var(--umi-ease);
  }

  .umi-cookie-notice__more:hover,
  .umi-cookie-notice__more:focus-visible {
    color: var(--umi-blue);
    text-decoration: none;
    border-color: rgba(0, 87, 255, 0.35);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(0, 87, 255, 0.12), 0 8px 28px rgba(0, 87, 255, 0.12);
    transform: translateY(-2px) scale(1.02);
    outline: none;
  }

  .umi-cookie-notice__more:focus-visible {
    outline: 2px solid var(--umi-blue);
    outline-offset: 3px;
  }

  @keyframes umi-cookie-accept-pulse {
    0%,
    100% {
      box-shadow:
        0 8px 28px rgba(0, 87, 255, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
      transform: translateY(0) scale(1);
    }

    50% {
      box-shadow:
        0 12px 36px rgba(0, 87, 255, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 0 0 4px rgba(0, 87, 255, 0.12);
      transform: translateY(-1px) scale(1.015);
    }
  }

  @media (max-width: 640px) {
    .umi-cookie-notice {
      align-items: flex-end;
      padding: 0.75rem;
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .umi-cookie-notice__dialog {
      max-height: calc(100dvh - 1.5rem);
      border-radius: 1.25rem 1.25rem 1rem 1rem;
    }

    .umi-cookie-notice__actions {
      grid-template-columns: 1fr;
    }

    .umi-cookie-notice__more {
      width: 100%;
      min-width: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .umi-cookie-notice__overlay,
    .umi-cookie-notice__dialog {
      transition: opacity 0.2s ease;
    }

    .umi-cookie-notice__accept {
      background-size: 100% 100%;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .umi-cookie-notice__accept::after {
      display: none;
    }

    .umi-cookie-notice--visible .umi-cookie-notice__accept {
      animation: none;
    }

    .umi-cookie-notice__accept:hover,
    .umi-cookie-notice__accept:focus-visible,
    .umi-cookie-notice__more:hover,
    .umi-cookie-notice__more:focus-visible {
      transform: none;
    }
  }
</style>

<div
  class="umi-cookie-notice"
  id="umiCookieNotice"
  hidden
  role="dialog"
  aria-modal="true"
  aria-labelledby="umiCookieNoticeTitle"
  aria-describedby="umiCookieNoticeDesc"
>
  <div class="umi-cookie-notice__overlay" data-umi-cookie-overlay></div>

  <div class="umi-cookie-notice__dialog">
    <div class="umi-cookie-notice__head">
      <span class="umi-cookie-notice__badge" aria-hidden="true">
        <svg class="umi-cookie-notice__badge-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M12 2C8.5 2 6 4.2 6 7.5c0 .9.2 1.7.6 2.5-.8.3-1.4 1-1.6 1.9-.3 1.3.7 2.5 2 2.5h.2c.3 1.2 1.3 2.1 2.6 2.1s2.3-.9 2.6-2.1h.2c1.3 0 2.3-1.2 2-2.5-.2-.9-.8-1.6-1.6-1.9.4-.8.6-1.6.6-2.5C18 4.2 15.5 2 12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
          <circle cx="9" cy="8" r="1" fill="currentColor"/>
          <circle cx="14" cy="7" r="1" fill="currentColor"/>
          <circle cx="11" cy="11" r="1" fill="currentColor"/>
        </svg>
        Cookie &amp; Яндекс.Метрика
      </span>

      <h2 class="umi-cookie-notice__title" id="umiCookieNoticeTitle">
        Мы используем <span class="umi-cookie-notice__title-accent">cookie</span>
      </h2>

      <p class="umi-cookie-notice__lead" id="umiCookieNoticeDesc">
        Технические cookie — для работы сайта. Аналитика Яндекс.Метрики — обезличенная статистика:
        страницы, источники перехода, регион и тип устройства.
      </p>
    </div>

    <div class="umi-cookie-notice__body">
      <div class="umi-cookie-notice__box">
        <strong>Что это значит для вас</strong>
        <ul class="umi-cookie-notice__list">
          <li>без рекламных рассылок и передачи данных третьим лицам</li>
          <li>без идентификации личности — только агрегированная аналитика</li>
          <li>можно подробнее — в политике конфиденциальности</li>
        </ul>
      </div>

      <p class="umi-cookie-notice__law">
        Уведомление размещено во исполнение требований ФЗ №152-ФЗ «О персональных данных».
      </p>
    </div>

    <div class="umi-cookie-notice__actions">
      <button
        type="button"
        class="umi-cookie-notice__accept"
        id="umiCookieAcceptBtn"
      >
        <span class="umi-cookie-notice__accept-label">Принимаю и продолжить</span>
        <span class="umi-cookie-notice__accept-hint">займёт 1 секунду</span>
      </button>

      <a
        class="umi-cookie-notice__more"
        href="/politika-konfidencialnosti/"
        target="_blank"
        rel="noopener noreferrer"
      >
        Подробнее
      </a>
    </div>
  </div>
</div>

<script>
  (function () {
    var STORAGE_KEY = "umiCookieNotice";
    var LEGACY_KEY = "umiCookieNoticeAccepted";
    var SHOW_DELAY_MS = 10000;
    var HIDE_AFTER_ACCEPT_MS = 30 * 24 * 60 * 60 * 1000;
    var excludedPages = ["/politika-konfidencialnosti/"];

    function readAcceptance() {
      try {
        var raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return null;

        var data = JSON.parse(raw);
        if (!data) return null;

        if (typeof data.acceptedAt === "number") {
          return data.acceptedAt;
        }

        if (data.accepted === true && typeof data.at === "number") {
          return data.at;
        }

        return null;
      } catch (e) {
        return null;
      }
    }

    function saveAcceptance() {
      localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({
          acceptedAt: Date.now()
        })
      );
      localStorage.removeItem(LEGACY_KEY);
    }

    function isAcceptedRecently() {
      if (localStorage.getItem(LEGACY_KEY) === "true") {
        saveAcceptance();
        return true;
      }

      var acceptedAt = readAcceptance();
      if (!acceptedAt) return false;

      return Date.now() - acceptedAt < HIDE_AFTER_ACCEPT_MS;
    }

    function initCookieNotice() {
      var root = document.getElementById("umiCookieNotice");
      if (!root) return;

      var path = window.location.pathname.replace(/\/+$/, "/") || "/";
      if (excludedPages.indexOf(path) !== -1) {
        root.remove();
        return;
      }

      if (isAcceptedRecently()) {
        root.remove();
        return;
      }

      var acceptBtn = document.getElementById("umiCookieAcceptBtn");
      var showTimer = null;
      var hasBeenShown = false;

      function hideNotice() {
        root.classList.remove("umi-cookie-notice--visible");
        root.classList.add("umi-cookie-notice--closing");
        document.documentElement.classList.remove("umi-cookie-notice-open");

        window.setTimeout(function () {
          root.setAttribute("hidden", "");
          root.remove();
        }, 320);
      }

      function showNotice() {
        if (hasBeenShown) return;
        hasBeenShown = true;

        root.removeAttribute("hidden");
        document.documentElement.classList.add("umi-cookie-notice-open");

        window.requestAnimationFrame(function () {
          root.classList.add("umi-cookie-notice--visible");
        });

        window.setTimeout(function () {
          if (acceptBtn) acceptBtn.focus({ preventScroll: true });
        }, 420);
      }

      showTimer = window.setTimeout(showNotice, SHOW_DELAY_MS);

      if (acceptBtn) {
        acceptBtn.addEventListener("click", function () {
          saveAcceptance();
          window.clearTimeout(showTimer);
          hideNotice();
        });
      }

      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && root.classList.contains("umi-cookie-notice--visible")) {
          acceptBtn && acceptBtn.focus({ preventScroll: true });
        }
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initCookieNotice);
    } else {
      initCookieNotice();
    }
  })();
</script>

 

WordPress? Покажу два способа установки

Лагерь №1: Elementor

Эти люди хотят решить задачу за пять минут.
Добавили HTML-блок → Вставили код → Сохранили → Пошли пить кофе.

после этого

Лагерь №2: functions.php

Эти ребята испытывают удовольствие, когда открывают код темы.
Для них я показываю вариант подключения через functions.php, чтобы баннер автоматически работал на всём сайте.

// Добавляем код в футер WordPress
add_action('wp_footer', function() {
    // Внутри пишем наш HTML/JS код
    ?>
    <!-- Здесь ваш код, например, счетчик или скрипт -->
    <script type="text/javascript">
        console.log("Этот код работает на всех страницах в футере");
    </script>
    <div class="my-footer-code">Какой-то HTML блок</div>
    <?php
});

 

А теперь самое интересное

Представьте, что клиент говорит:
«Сделайте кнопку зеленой».
Через пять минут пишет:
«Нет, синей».
Еще через десять минут:
«А давайте вообще золотую».

Раньше приходилось искать нужные CSS-свойства вручную.
Сегодня всё проще.

Берёте код баннера → Кидаете его в ИИ → Пишете:
«Сделай стиль дорогим и современным. Используй фирменные цвета компании».

И получаете готовый результат через несколько секунд.

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

Я пользуюсь агрегатором https://gptunnel.ru/ (клацаем откроется в новом окне) там регистриуемся обычным способом например через почту. Чтоб плноценно работать закиньте туда как я 300-350 руб и пользуйтесь.

Весь код уже готов

Никакого:

  • ❌ «Сейчас создадим структуру проекта»
  • ❌ «Для начала установим 17 библиотек»
  • ❌ «Откройте терминал»
  • ❌ «Сначала изучите JavaScript»

Просто берёте готовые куски кода и внедряете их на сайт.

Для кого это видео?

Для вас, если вы:

  • ✔ делаете сайты на WordPress;
  • ✔ работаете на фрилансе;
  • ✔ собираете лендинги клиентам;
  • ✔ используете аналитику;
  • ✔ хотите избежать потенциальных проблем в будущем;
  • ✔ любите решения из серии «скопировал → вставил → работает».

Не ждите момента, когда о cookie вспомнит кто-то другой

Пока большинство разработчиков спорит о React, Next.js и нейросетях, простой cookie-баннер продолжает оставаться одной из самых недооцененных вещей на сайте.

А ведь его установка занимает меньше времени, чем чтение этой статьи.
Всем добра!

Друзья, если смог помочь, перечислите 100 рублей на постройку кораблей!

Хотите разбор именно вашего проекта

Запишитесь на консультацию за 2 500 ₽

Записаться

Заполните бриф для обсуждения вашего проекта:

📞 Телефон: +7 (918) 182-38-72

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

Заполнить бриф на расчёт

Запись на бесплатное пробное занятие

Вы очень любознательны. Иначе бы не нажали на эту кнопку