Cookie-уведомление — важная часть пользовательского интерфейса и доверия к сайту. Оно не только информирует пользователя, но и помогает вам быть честными в вопросе сбора данных. Подготовили универсальный код cookie-уведомления на JavaScript, который можно внедрить за несколько минут и адаптировать под любой сайт.
В этой статье расскажем:
- зачем нужно уведомление о cookie;
- как оно должно выглядеть с точки зрения UX;
- и главное — как внедрить готовый рабочий код.
Что такое cookie-уведомление и зачем оно нужно?
Cookie-файлы (или куки) используются для хранения данных пользователя: от аналитики до содержимого корзины. Cookie-уведомление информирует посетителей сайта о том, что такие данные собираются, и позволяет получить их согласие.
Это стало стандартом для современных сайтов. Даже если законы в вашей стране не требуют явного согласия, информирование пользователя повышает доверие и снижает вероятность жалоб.
Как должно выглядеть уведомление
Хорошее cookie-уведомление должно быть:
- ненавязчивым, но заметным;
- читаемым на мобильных устройствах;
- с понятным текстом и кнопкой закрытия;
- отображаться только новым пользователям.
Универсальный код cookie-уведомления (HTML + CSS + JavaScript)
Мы подготовили рабочий код, который можно вставить прямо перед закрывающим тегом </body> на вашем сайте:
<!-- Cookie Banner Start -->
<div id="cookie-banner" class="cookie-banner hidden">
<div class="cookie-inner">
<button id="cookie-close" class="cookie-close" aria-label="Закрыть">×</button>
<div class="cookie-content">
<div>
Продолжая использовать <span class="domain-name"></span>, вы соглашаетесь на использование файлов cookie.
</div>
<div>
Более подробную информацию можно найти в
<a href="/politika-v-otnoshenii-obrabotki-personalnyh-dannyh.pdf" target="_blank">Политике cookie файлов</a>.
</div>
</div>
</div>
</div>
<style>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
color: #333;
font-family: 'Segoe UI', Arial, sans-serif;
padding: 16px 24px;
z-index: 10000;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
border-top: 1px solid #ddd;
}
.cookie-banner.hidden {
display: none;
}
.cookie-inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.cookie-content {
flex: 1;
font-size: 14px;
line-height: 1.5;
}
.cookie-content div + div {
margin-top: 4px;
}
.cookie-content a {
color: #007bff;
text-decoration: underline;
}
.cookie-close {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
color: #888;
font-size: 20px;
cursor: pointer;
}
.cookie-close:hover {
color: #000;
}
@media (max-width: 600px) {
.cookie-inner {
flex-direction: column;
align-items: flex-start;
}
.cookie-close {
top: 8px;
right: 8px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const banner = document.getElementById("cookie-banner");
const closeBtn = document.getElementById("cookie-close");
const domain = window.location.hostname;
document.querySelector(".domain-name").textContent = domain;
if (!localStorage.getItem("cookieConsentAccepted")) {
banner.classList.remove("hidden");
}
closeBtn.addEventListener("click", function () {
banner.classList.add("hidden");
localStorage.setItem("cookieConsentAccepted", "true");
});
});
</script>
<!-- Cookie Banner End -->Как внедрить на сайт
- Скопируйте код выше.
- Откройте шаблон своего сайта и вставьте его перед тегом
</body>. - Убедитесь, что ссылка на политику cookie ведёт на актуальный файл.
- Проверьте работу баннера на десктопе и мобильном устройстве.
SEO и доверие
Cookie-уведомление — это не только про соответствие стандартам, но и про доверие. Пользователь, которого честно предупреждают, с большей вероятностью останется на сайте и выполнит целевое действие. Кроме того, поисковые системы всё больше обращают внимание на прозрачность интерфейсов.
Заключение
Если у вас ещё нет cookie-уведомления — самое время это исправить. Мы дали вам всё, что нужно: короткий гайд и готовый код. Добавьте его на сайт за 5 минут и сделайте интерфейс вашего проекта ещё более надёжным и современным.
Если нужна помощь с адаптацией под дизайн или CMS — просто свяжитесь с нами, мы поможем!