Куки-баннер для сайта:
соберите и заберите код
Четыре вида баннера, свои ссылки на политику и согласие, счётчики Яндекс.Метрики и Google Analytics, которые загружаются только после согласия посетителя. Соберите справа — код появится тут же, копируйте и вставляйте.
Вид баннера
Текст и кнопки
Ссылки на ваши документы
Пустые адреса в код не попадут. Ссылки нужны свои: наши документы вам не подойдут, оператор данных — вы.
Счётчики после согласия
Если счётчик уже стоит в шапке сайта — уберите его оттуда, иначе он загрузится до согласия и баннер потеряет смысл.
Это настоящий баннер, а не картинка: кнопки нажимаются. В превью выбор не запоминается, поэтому баннер появляется снова при каждом изменении.
<!-- Куки-баннер с woove.ru/cookie-banner. Код ваш: меняйте как угодно, к нашим серверам он не обращается. -->
<style>
#wvc{position:fixed;left:0;right:0;bottom:0;z-index:99998;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#wvc *{box-sizing:border-box}
#wvc .wvc-b{background:#111111;color:#ffffff;padding:16px 18px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
#wvc .wvc-b{border-radius:10px 10px 0 0}
#wvc p{margin:0;max-width:640px}
#wvc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#wvc .wvc-l{opacity:.75;font-size:12.5px;margin-top:8px;display:flex;flex-wrap:wrap;gap:12px}
#wvc .wvc-l{margin-top:0}
#wvc .wvc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
#wvc button{font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:9px 16px;border:1px solid #ffffff;background:#ffffff;color:#111111}
#wvc button.wvc-g{background:transparent;color:#ffffff;border-color:currentColor;opacity:.85;font-weight:500}
#wvc button:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
@media (max-width:560px){#wvc .wvc-b{flex-direction:column;align-items:stretch}#wvc .wvc-btns{margin-left:0}#wvc button{flex:1}}
@media (prefers-reduced-motion:no-preference){#wvc .wvc-b{animation:wvc-in .22s ease-out}}
@keyframes wvc-in{from{opacity:0;transform:translateY(10px)}}
</style>
<script>
(function(){
var C={v:'bar',text:'Мы используем файлы cookie, чтобы сайт работал и чтобы понимать, какие страницы вам полезны.',accept:'Принять',decline:'Только необходимые',pos:'right',days:365,links:[{t:'Политика обработки данных',u:'/privacy'},{t:'Согласие на обработку',u:'/consent'}],ym:'12345678',wv:false,ga:null};
var K='wv_consent';
function read(){try{var m=document.cookie.match(/(?:^|; )wv_consent=([^;]*)/);
return m?JSON.parse(decodeURIComponent(m[1])):null}catch(e){return null}}
function save(o){o.t=Math.floor(Date.now()/1000);try{document.cookie=K+"="+encodeURIComponent(JSON.stringify(o))
+";path=/;max-age="+(C.days*86400)+";samesite=lax"+(location.protocol==="https:"?";secure":"")}catch(e){}}
function counters(o){
if(!o||!o.an)return;
if(C.ym&&!window["yaCounter"+C.ym]){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();
k=e.createElement(t),a=e.getElementsByTagName(t)[0];k.async=1;k.src=r;a.parentNode.insertBefore(k,a)})
(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");
ym(C.ym,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:C.wv});
}
if(C.ga&&!window.gtag){
var s=document.createElement("script");s.async=1;
s.src="https://www.googletagmanager.com/gtag/js?id="+C.ga;document.head.appendChild(s);
window.dataLayer=window.dataLayer||[];window.gtag=function(){dataLayer.push(arguments)};
gtag("js",new Date());gtag("config",C.ga);
}
}
function done(o){save(o);counters(o);var n=document.getElementById("wvc");if(n)n.remove();
try{window.dispatchEvent(new CustomEvent("wv-consent",{detail:o}))}catch(e){}}
function esc(s){var d=document.createElement("div");d.textContent=s;return d.innerHTML}
function links(){return C.links.length?"<div class=\"wvc-l\">"+C.links.map(function(l){
return "<a href=\""+l.u+"\" target=\"_blank\" rel=\"noopener\">"+esc(l.t)+"</a>"}).join("")+"</div>":""}
function show(){
var w=document.createElement("div");w.id="wvc";
w.setAttribute("role",C.v==="modal"?"dialog":"region");
w.setAttribute("aria-label","Использование файлов cookie");
if(C.v==="modal")w.setAttribute("aria-modal","true");
var h="<div class=\"wvc-b\"><p>"+esc(C.text)+"</p>"+links();
if(C.v==="modal"){
h+=C.cat.map(function(c){var on=c[0]==="ne";
return "<label class=\"wvc-c\"><input type=\"checkbox\" data-k=\""+c[0]+"\""+(on?" checked disabled":"")
+"><span><b>"+esc(c[1])+"</b><span>"+esc(c[2])+"</span></span></label>"}).join("");
h+="<div class=\"wvc-btns\"><button data-a=\"all\">"+esc(C.accept)+"</button>"
+"<button class=\"wvc-g\" data-a=\"save\">"+esc(C.save)+"</button>"
+(C.decline?"<button class=\"wvc-g\" data-a=\"no\">"+esc(C.decline)+"</button>":"")+"</div>";
}else{
h+="<div class=\"wvc-btns\"><button data-a=\"all\">"+esc(C.accept)+"</button>"
+(C.decline?"<button class=\"wvc-g\" data-a=\"no\">"+esc(C.decline)+"</button>":"")+"</div>";
}
w.innerHTML=h+"</div>";document.body.appendChild(w);
var btn=w.querySelector("button");if(btn&&C.v==="modal")btn.focus();
w.addEventListener("click",function(e){
var b=e.target.closest("button[data-a]");if(!b)return;
var a=b.getAttribute("data-a");
if(a==="all")return done({an:1,mk:1});
if(a==="no")return done({an:0,mk:0});
var o={an:0,mk:0};w.querySelectorAll("input[data-k]").forEach(function(i){
if(i.getAttribute("data-k")!=="ne")o[i.getAttribute("data-k")]=i.checked?1:0});done(o)});
if(C.v==="modal")document.addEventListener("keydown",function k(e){
if(e.key==="Escape"&&document.getElementById("wvc")){done({an:0,mk:0});document.removeEventListener("keydown",k)}});
}
window.wvCookieReset=function(){try{document.cookie=K+"=;path=/;max-age=0"}catch(e){}
if(!document.getElementById("wvc"))show()};
var got=read();
if(got)counters(got);
else if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",show);else show();
})();
</script>
Один блок: стили и скрипт. Ни библиотек, ни запросов к нам — код работает сам по себе.
Куда вставлять код
| Тильда | Настройки сайта → Ещё → «HTML-код для вставки внутрь BODY». Так баннер появится на всех страницах сразу. В блок T123 класть не нужно — он работает только на одной странице. |
| Обычный сайт | Перед закрывающим тегом body, в общий шаблон страницы. |
| CMS | В шаблон подвала темы или через плагин для вставки кода — главное, чтобы он попал на все страницы и не кэшировался отдельно от них. |
- Выберите вид. Полоса снизу, карточка в углу, окно с настройками или тонкая плашка сверху.
- Вставьте ссылки на свои документы. Политика обработки персональных данных и согласие — те, что лежат у вас на сайте.
- Впишите счётчики. Номер Яндекс.Метрики и идентификатор Google Analytics. Их код баннер вставит сам — и только после согласия.
- Скопируйте код. Он собирается прямо на этой странице, ничего не скачивается и никуда не отправляется.
- Вставьте на сайт. В Тильде — «Настройки сайта → Ещё → HTML-код внутрь BODY». На обычном сайте — перед закрывающим тегом body.
Что баннер делает, а что нет
Куки-баннер (cookie banner, плашка о файлах cookie) — это уведомление, которое просит разрешение до того, как сайт поставит необязательные cookie. Наш баннер делает ровно две вещи: показывает ваш текст со ссылками на ваши документы и держит счётчики выключенными, пока человек не нажал «Принять». Выбор он записывает в cookie на устройстве посетителя, вместе с датой — если однажды спросят, когда и на что человек соглашался, ответ будет в его же браузере.
Чего он не делает. Не заменяет политику обработки персональных данных и согласие — эти документы пишете и размещаете вы, оператор данных тоже вы. Не собирает согласие на обработку данных из форм: там нужна отдельная галочка рядом с формой. Не блокирует сторонние скрипты, которые вы вставили в шапку руками, — он управляет только тем, что вписано в него самого. И не делает сайт «соответствующим 152-ФЗ» одним фактом установки: это результат ваших документов и порядка работы с данными, а не плашки.
Посмотреть, как это выглядит у нас: политика обработки данных · согласие на обработку · как собирать согласие в формах и ботах
Частые вопросы про куки-баннер
Это бесплатно?
Да, полностью и без регистрации. Код после сборки ваш: его можно править, переносить на другие сайты и отдавать клиентам. Он не обращается к нашим серверам и ничего нам не сообщает — мы даже не узнаем, что вы его поставили.
Баннер делает сайт соответствующим закону?
Сам по себе — нет, и обещать такое было бы враньём. Баннер решает одну задачу: предупреждает про cookie и не даёт счётчикам загрузиться, пока человек не согласился. Документы — политику обработки персональных данных и согласие — вы пишете и размещаете сами, а согласие на обработку данных в формах остаётся отдельной галочкой у формы.
Где хранится выбор посетителя?
В обычной cookie wv_consent на его же устройстве: в ней дата выбора и то, на что человек согласился. Срок хранения выбирается в конструкторе. Никаких запросов на сторону: данные не уходят ни нам, ни кому-либо ещё.
Что будет со счётчиками, если человек отказался?
Ничего не загрузится: ни tag.js Метрики, ни gtag Google. Проверить просто — откройте инструменты разработчика, вкладку «Сеть», и после отказа там не будет запросов к mc.yandex.ru и googletagmanager.com.
Как дать посетителю передумать?
В коде есть функция wvCookieReset(). Поставьте в подвале сайта ссылку с onclick="wvCookieReset()" — баннер откроется снова, и человек сменит выбор.
Работает ли это в Тильде?
Да, и в Тильде, и на любом другом сайте: это обычные style и script без библиотек и зависимостей. В Тильде код кладут в «Настройки сайта → Ещё → HTML-код для вставки внутрь BODY», чтобы баннер был на всех страницах сразу.
А заявки с сайта куда уходят?
Баннер мы отдаём просто так. Зарабатываем на другом: передаём заявки с форм сайта в CRM, склад, телефонию и мессенджеры — шестнадцать сервисов, которых нет среди встроенных в конструкторы сайтов, — собираем ИИ-ботов и продаём билеты на мероприятия. А CRM у нас бесплатная: заявки попадают в неё сами.