Скрипт с предложением принять соглашение на обработку cookie

Привет, друзья. Недавно, работая над одним из проектов возникла необходимость сделать cookie виджет для сайта клиента, а именно: "вывести уведомление с предложением предоставить согласие на обработку cookie". Задачка совсем простая: сверстать баннер с текстом и кнопкой, а затем, при получении согласия, - скрыть его.

Решил оформить все это в виде виджета, чтобы в случае чего просто копировать код отсюда. Кроме того, возможно, кому-то из вас он тоже пригодится. Понимаю, что вещь достаточно простая, но может он хотя бы сэкономит кому-то время.

Подключение скрипта

Для подключения скрипта просто распакуйте архив в корень сайта, а именно, папку «smart-cookies». Затем, подключите к странице, где должен выводится виджет 2 файла:

  • smart-cookies.css,
  • smart-cookies.js.

Например так:

Подключение виджета smart-cookies

Файлы js обычно подключаю перед закрывающим тегом "body", а стили между тегами head. Максимально просто.

Настройки виджета

В виджете можно настроить всего несколько параметров. Это картинка на изображение, сообщение и текст на кнопке с принятием cookie.

В файле smart-cookies.js есть объект "sc_options" в котором 3 параметра:

  • text - строка. Текст баннера.
  • imgUrl - строка. Ссылка на изображение.
  • textButton - строка. Текст кнопки. Будьте внимательны, размер ограничен в CSS. Не пишите что-то длинное. Максимум 1 слово.

Пример настройки срипта:

Пример настройки скрипта для куки

Если вы хотите указать ссылку на пользовательское соглашение, то можете оформить ее прямо в строке "text". Например так:

text: 'Мы используем cookie. <a href="https://smartlanding.biz/private-policy">Читать соглашение</a>...

Также обратите внимание на то, что сейчас пути к файлам прописаны относительно корня сайта. Если вы тестируете не на сервере, то ссылки работать не будут и файлы не подключатся. Следите за этим и правильно прописывайте путь.

В файле стилей можно поменять цвет и другие параметры. Сейчас виджет имеет такой вид:

Пример работы cookie виджета

Cookie-виджет

Размер: 0,08 мб

Похожие публикации

Добавить комментарий