Промо-уведомления

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

Подключение библиотеки осуществляется через <script> и <link> для CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения доступна глобальная функция iziToast.show() и специализированные методы: success, error, warning, info.

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена успешно',
    position: 'topRight'
});

Основные параметры

  • title — заголовок уведомления.
  • message — основной текст.
  • position — позиция на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • timeout — время показа уведомления в миллисекундах. По умолчанию 5000.
  • progressBar — отображение полосы прогресса (true/false).
  • theme — цветовая тема (light, dark).

Создание промо-уведомлений

Промо-уведомления — это сообщения, привлекающие внимание к событиям, акциям или новым функциям. Основная цель — повысить конверсию без раздражения пользователя. В iziToast их можно настраивать следующим образом:

iziToast.show({
    title: 'Новая акция!',
    message: 'Только сегодня скидка 20% на все товары.',
    color: 'green',
    position: 'topCenter',
    timeout: 10000,
    close: true,
    buttons: [
        ['<button>Подробнее</button>', function (instance, toast) {
            window.location.href = '/promo';
        }]
    ]
});

Использование кастомных цветов и иконок

Для промо-уведомлений важно выделяться визуально:

iziToast.show({
    title: 'Эксклюзивное предложение',
    message: 'Только для подписчиков',
    color: '#ff6f61', // кастомный цвет фона
    icon: 'fa fa-star', // иконка Font Awesome
    position: 'topRight'
});

Управление кнопками и действиями

iziToast поддерживает добавление нескольких кнопок с обработкой кликов:

iziToast.show({
    title: 'Выберите действие',
    message: 'Что вы хотите сделать?',
    buttons: [
        ['<button>Принять</button>', function (instance, toast) {
            console.log('Принято');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Отклонить</button>', function (instance, toast) {
            console.log('Отклонено');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Анимации и позиции

iziToast предоставляет гибкий выбор анимаций:

  • transitionIn — анимация появления (fadeIn, bounceInLeft, slideInRight).
  • transitionOut — анимация исчезновения (fadeOut, flipOutX).
iziToast.show({
    title: 'Анимация',
    message: 'Сообщение с эффектом',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOut',
    position: 'bottomLeft'
});

Позиционирование уведомлений помогает создавать промо-уведомления, которые не перекрывают важный контент, например:

  • верхний центр для акций,
  • нижний правый угол для подсказок.

Продвинутая кастомизация

  • overlay — полупрозрачный фон, чтобы выделить уведомление:
iziToast.show({
    title: 'Важное',
    message: 'Обратите внимание на новинку!',
    overlay: true,
    overlayClose: true
});
  • onOpening / onClosing — функции обратного вызова при открытии и закрытии уведомления:
iziToast.show({
    title: 'Старт события',
    message: 'Событие началось',
    onOpening: function(instance, toast){
        console.log('Открытие уведомления');
    },
    onClosing: function(instance, toast, closedBy){
        console.log('Закрыто:', closedBy);
    }
});
  • zindex — позволяет задавать порядок отображения уведомлений поверх других элементов:
iziToast.show({
    title: 'Приоритет',
    message: 'Уведомление поверх всех',
    zindex: 9999
});

Массовые уведомления

Можно создавать группы промо-уведомлений с разными стилями, управлять очередью и задержкой между показами:

const messages = [
    { title: 'Скидка', message: '10% на всё' },
    { title: 'Новая функция', message: 'Добавили темную тему' }
];

messages.forEach((msg, index) => {
    setTimeout(() => {
        iziToast.show({
            title: msg.title,
            message: msg.message,
            position: 'topRight'
        });
    }, index * 2000); // интервал между уведомлениями 2 секунды
});

Интеграция с событиями

Промо-уведомления могут запускаться на основе действий пользователя: клик, наведение, прокрутка страницы или завершение загрузки:

document.querySelector('#promo-btn').addEventListener('click', function() {
    iziToast.show({
        title: 'Спасибо!',
        message: 'Вы получили бонус за клик',
        position: 'topRight'
    });
});

Использование iziToast позволяет создавать интерактивные, визуально привлекательные промо-уведомления, которые легко адаптируются к дизайну сайта и различным сценариям взаимодействия с пользователем.

Оглавление