Как добавить на сайт cookie-баннер за 20 минут. Инструкция

Разработка сайтов

Обновлено: 8 апреля 2026

Автор: Лев Демидов

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

Добавить на сайт Cookie-баннер очень просто. Пошаговая инструкция

1) Перед закрывающем тегом </body> в подвале сайта добавьте саму плашку (не забудьте заменить ссылку на файл политики конфиденциальности на свою)

HTML-код самой плашки с ссылкой на страницу политики конфиденциальности

Добавить в футер перед закрывающем тегом </body>


<div class="cookie-banner">
      <div class="string">Мы используем файлы сооkіе, чтобы анализировать трафик сайта и персонализировать контент.<br>Используя этот сайт, вы соглашаетесь на использование вами файлов сооkіе. Вы можете прочитать нашу <a href="/include/licenses_detail.php" target="_blank">политику конфиденциальности</a>. <button id="cookie-confirm">Понятно, спасибо</button></div>
</div>

2) Добавьте стили плашки в файл стилей custom.css (у вас этот файл может называться по другому или можно добавить код в футер ниже самого баннера)

Стили плашки

Добавить стили в файл custom.css


<style>
.cookie-banner{
    display: none;
}

.cookie-banner.active{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background:#c4010b;
    color: #fff;
    z-index: 99999999;
    padding-top: 1em;
}

.cookie-banner.active .string{
    margin-bottom: 1em;
    padding-left: 10px;
    padding-right: 10px;
}

.cookie-banner.active .string a{
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
}

.cookie-banner.active button{
    border-radius: 3px;
    background: #fff;
    padding: 7px 24px;
    border: none;
    color: #c4010b;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    top: -15px;
    margin-left: 15px;
}

@media screen and (max-width: 767px) {
    .cookie-banner.active .string{font-size: 12px;padding-left: 10px;padding-right: 10px}
    .cookie-banner.active button{top: 0;margin-left: 0}
}
</style>

3) Добавьте JS-код в файл custom.js или после HTML-кода плашки в футере сайта

JS-скрипт появления куки-баннера

Добавить скрипт в файл custom.js



<script>
        let cookieConfirm = localStorage.getItem('cookieConfirm');
        if (!cookieConfirm) {
            const banner = document.querySelector('.cookie-banner');
            banner.classList.add('active');
            banner.querySelector('#cookie-confirm').addEventListener('click', function (e) {
                localStorage.setItem('cookieConfirm', 'y');
                banner.classList.remove('active');
            })
        }
</script>

Все, теперь на вашем сайте появится Cookie-баннер, который будет всплывать один раз, при первом заходе на сайте пользователя. Если у вас возникнут проблемы с реализацией, вы всегда можете обратиться к нам, написав на почту info@prav-site.ru и оставив заявку через форму обратной связи

Комментарии

Загрузка комментариев...

Назад к списку

Оставить заявку

Мы перезвоним в ближайшее время

Отправляя форму, вы принимаете условия передачи данных