Woove → Куки-баннер

Куки-баннер для сайта:
соберите и заберите код

Четыре вида баннера, свои ссылки на политику и согласие, счётчики Яндекс.Метрики и 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В шаблон подвала темы или через плагин для вставки кода — главное, чтобы он попал на все страницы и не кэшировался отдельно от них.
  1. Выберите вид. Полоса снизу, карточка в углу, окно с настройками или тонкая плашка сверху.
  2. Вставьте ссылки на свои документы. Политика обработки персональных данных и согласие — те, что лежат у вас на сайте.
  3. Впишите счётчики. Номер Яндекс.Метрики и идентификатор Google Analytics. Их код баннер вставит сам — и только после согласия.
  4. Скопируйте код. Он собирается прямо на этой странице, ничего не скачивается и никуда не отправляется.
  5. Вставьте на сайт. В Тильде — «Настройки сайта → Ещё → 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 у нас бесплатная: заявки попадают в неё сами.

Каталог интеграций →  ·  ИИ-боты →  ·  Продажа билетов →