🚀 Демонстрация возможностей
Попробуйте различные типы цепочек модальных окон:
🔗 Простая цепочка
Три окна подряд с задержкой
💰 Воронка продаж
Привлечение → Доверие → Заявка
📏 Тест размеров
Small → Medium → Large
👋 Онбординг
Приветствие → Обучение → Действие
⚡
Простой API
Создавайте цепочки в несколько строк кода с интуитивным чейнинг-синтаксисом
🎛️
Полный контроль
Управляйте скоростью, переходами и реакциями на действия пользователя
📊
Отслеживание событий
Подписывайтесь на события каждого шага и получайте детальную аналитику
🔄
Гибкая навигация
Переходите к любому шагу, останавливайте и возобновляйте выполнение
💻 Примеры кода
Простая цепочка из трех окон
const chain = NHLeads.chain()
.add({
template: 'action',
title: 'Шаг 1',
text: 'Первое модальное окно',
buttonText: 'Далее →'
})
.add({
template: 'social-proof',
title: 'Шаг 2',
text: 'Нам доверяют тысячи клиентов'
})
.add({
template: 'lead-form',
title: 'Шаг 3',
text: 'Оставьте свои контакты'
})
.setDelay(500)
.start();
Обработка событий цепочки
chain.on('chain:start', () => {
console.log('Цепочка запущена');
});
chain.on('step:start', (event) => {
console.log(`Шаг ${event.step + 1}/${event.total}`);
});
chain.on('step:submit', (event) => {
console.log('Данные формы:', event.data);
});
chain.on('chain:complete', () => {
console.log('Цепочка завершена');
});
Управление выполнением
// Запуск цепочки
chain.start();
// Остановка
chain.stop();
// Переход к конкретному шагу
chain.goToStep(2);
// Получение статуса
const status = chain.getStatus();
console.log(status.progress); // прогресс в %