Cookie-баннеры

iziToast — это легкая и гибкая библиотека уведомлений для JavaScript, которая позволяет создавать всплывающие уведомления различного вида и конфигурации. В контексте cookie-баннеров она идеально подходит для реализации ненавязчивых уведомлений о сборе данных и согласии пользователей.

Подключение библиотеки

Для работы с iziToast необходимо подключить CSS и JS файлы. Это можно сделать через CDN:

Для проекта на npm или yarn:

npm install izitoast
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

Самый простой вариант уведомления о cookies выглядит следующим образом:

iziToast.show({
    title: 'Внимание!',
    message: 'Наш сайт использует cookies для улучшения работы. Продолжая использовать сайт, вы соглашаетесь с нашей политикой.',
    position: 'bottomRight',
    timeout: 10000,
    close: false,
    overlay: true,
    progressBar: true,
    buttons: [
        ['', function (instance, toast) {
            setCookie('cookies_accepted', 'true', 365);
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['', function (instance, toast) {
            window.location.href = '/privacy-policy';
        }]
    ]
});

Ключевые моменты:

  • position: позволяет задать положение баннера на экране. Для cookie-баннера обычно используют 'bottomRight' или 'bottomLeft'.
  • timeout: длительность отображения. Для обязательных уведомлений можно выставить 0, чтобы баннер оставался до действия пользователя.
  • overlay: затемнение фона делает уведомление более заметным.
  • buttons: массив кнопок с пользовательскими обработчиками.

Управление согласиями через куки

Для сохранения выбора пользователя необходимо создать функции работы с куки:

function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
    const cname = name + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(cname) === 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

Перед показом баннера важно проверять, согласился ли пользователь ранее:

if (!getCookie('cookies_accepted')) {
    iziToast.show({
        title: 'Внимание!',
        message: 'Наш сайт использует cookies. Продолжая пользоваться сайтом, вы соглашаетесь с политикой.',
        position: 'bottomRight',
        timeout: 0,
        close: false,
        overlay: true,
        progressBar: true,
        buttons: [
            ['', function (instance, toast) {
                setCookie('cookies_accepted', 'true', 365);
                instance.hide({ transitionOut: 'fadeOut' }, toast);
            }],
            ['', function (instance, toast) {
                window.location.href = '/privacy-policy';
            }]
        ]
    });
}

Кастомизация внешнего вида

iziToast предоставляет множество параметров для изменения внешнего вида:

  • theme: 'light', 'dark' или пользовательская тема.
  • color: задаёт цвет уведомления.
  • icon: позволяет добавить иконку с указанием класса FontAwesome или собственного SVG.
  • transitionIn и transitionOut: эффекты анимации при появлении и исчезновении.

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

iziToast.show({
    title: 'Cookies',
    message: 'Мы используем cookies для улучшения работы сайта.',
    theme: 'dark',
    color: 'green',
    icon: 'fa fa-cookie-bite',
    position: 'bottomRight',
    timeout: 0,
    close: false,
    overlay: true,
    progressBar: false,
    buttons: [
        ['', function (instance, toast) {
            setCookie('cookies_accepted', 'true', 365);
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

Адаптивность и UX

  • Размещение баннера в нижнем углу экрана минимизирует перекрытие контента.
  • Для мобильных устройств рекомендуется увеличить кнопки и ширину уведомления.
  • Использование timeout: 0 и overlay: true заставляет пользователя принять решение, но при этом не блокирует весь интерфейс.

Интеграция с другими библиотеками

iziToast можно комбинировать с jQuery, React или Vue для управления состоянием согласия:

  • React: создавать компонент CookieBanner с состоянием visible, управляемым через useState.
  • Vue: использовать v-if для рендеринга iziToast при отсутствии согласия.
Оглавление