Добавить в корзинуПозвонить
Найти в Дзене

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

1) Перед закрывающем тегом в подвале сайта добавьте саму плашку (не забудьте заменить ссылку на файл политики конфиденциальности на свою) HTML-код самой плашки с ссылкой на страницу политики конфиденциальности Добавить в футер перед закрывающем тегом Скопировать весь код Мы используем файлы сооkіе, чтобы анализировать трафик сайта и персонализировать контент.
Используя этот сайт, вы соглашаетесь на использование вами файлов сооkіе. Вы можете прочитать нашу политику конфиденциальности. Понятно, спасибо 2) Добавьте стили плашки в файл стилей custom.css (у вас этот файл может называться по другому или можно добавить код в футер ниже самого баннера)
Стили плашки Добавить стили в файл custom.css Скопировать весь код .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;

1) Перед закрывающем тегом в подвале сайта добавьте саму плашку (не забудьте заменить ссылку на файл политики конфиденциальности на свою) HTML-код самой плашки с ссылкой на страницу политики конфиденциальности Добавить в футер перед закрывающем тегом Скопировать весь код

Мы используем файлы сооkіе, чтобы анализировать трафик сайта и персонализировать контент.
Используя этот сайт, вы соглашаетесь на использование вами файлов сооkіе. Вы можете прочитать нашу
политику конфиденциальности. Понятно, спасибо

2) Добавьте стили плашки в файл стилей custom.css (у вас этот файл может называться по другому или можно добавить код в футер ниже самого баннера)
Стили плашки Добавить стили в файл custom.css Скопировать весь код .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} } 3) Добавьте JS-код в файл custom.js или после HTML-кода плашки в футере сайта
JS-скрипт появления куки-баннера Добавить скрипт в файл custom.js Скопировать весь код 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'); }) }
Все, теперь на вашем сайте появится Cookie-баннер, который будет всплывать один раз, при первом заходе на сайте пользователя. Если у вас возникнут проблемы с реализацией, вы всегда можете обратиться к нам, написав на почту
info@prav-site.ru и оставив заявку через форму обратной связи