Привет, друзья. Недавно, работая над одним из проектов возникла необходимость сделать cookie виджет для сайта клиента, а именно: "вывести уведомление с предложением предоставить согласие на обработку cookie". Задачка совсем простая: сверстать баннер с текстом и кнопкой, а затем, при получении согласия, - скрыть его.
Решил оформить все это в виде виджета, чтобы в случае чего просто копировать код отсюда. Кроме того, возможно, кому-то из вас он тоже пригодится. Понимаю, что вещь достаточно простая, но может он хотя бы сэкономит кому-то время.
Подключение скрипта
Для подключения скрипта просто распакуйте архив в корень сайта, а именно, папку «smart-cookies». Затем, подключите к странице, где должен выводится виджет 2 файла:
- smart-cookies.css,
- smart-cookies.js.
Например так:
Файлы 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-виджет
Размер: 0,08 мб
2 комментария
Сспасибо!
Спасибо большое!