Не блокирует сайт, не закрывает контент, не требует от пользователя 5 кликов «принять/отклонить/настроить». Один раз показал — пользователь согласился — больше не показывается.
Вставляешь перед закрывающим тегом </body>.
<div id="cookie-banner" class="cookie-banner">
<div class="cookie-banner__text">
Этот сайт использует cookies для улучшения работы.
Продолжая использовать сайт, вы соглашаетесь с
<a href="/privacy/" target="_blank">Политикой обработки персональных данных</a>.
</div>
<button class="cookie-banner__btn" onclick="acceptCookies()">Принять</button>
</div>
Вставляешь в общий стайл-файл сайта или в <style> в head. Цвета — твои.
.cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 560px;
margin: 0 auto;
padding: 14px 18px;
background: #1a1a1a;
color: #fff;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
display: none;
align-items: center;
gap: 14px;
z-index: 9999;
font-family: system-ui, -apple-system, sans-serif;
font-size: 13px;
line-height: 1.45;
}
.cookie-banner.show {
display: flex;
}
.cookie-banner__text {
flex: 1;
}
.cookie-banner__text a {
color: #b6ff3c;
text-decoration: underline;
}
.cookie-banner__btn {
flex-shrink: 0;
padding: 8px 18px;
background: #b6ff3c;
color: #000;
border: none;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.cookie-banner__btn:hover {
background: #d5ff6e;
}
@media (max-width: 600px) {
.cookie-banner {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.cookie-banner__btn {
width: 100%;
}
}
Показывает баннер один раз, запоминает выбор в localStorage. Вставляешь в <script> внизу страницы.
(function() {
var KEY = 'cookies_accepted';
var banner = document.getElementById('cookie-banner');
if (!banner) return;
if (!localStorage.getItem(KEY)) {
setTimeout(function() {
banner.classList.add('show');
}, 800);
}
window.acceptCookies = function() {
localStorage.setItem(KEY, '1');
banner.classList.remove('show');
};
})();