Wizard.js

Скрипт для создания интерактивного обучения работе с сервисами

Создавая онлайн сервис важно чтобы пользователи быстро начали ориентироваться в системе. Wizard.js позволяет создать сценарий интерактивного обучения на любой странице сайта.

Быстрый старт

1. Добавьте скрипт и стили на страницу

   <link rel="stylesheet" href="wizard.min.css">
   <script src="wizard.js"></script>

2. Элементам, для которых требуется описание пропишите атрибут data-wizard, содержащий текст описания

   <div data-wizard="В это поле нужно вводить стоимость товара">
   	<label>Цена</label>
   	<input type="number" value="5000">
   </div>
   

3. После загрузки страницы вызовите конструктор

   var wizard = new ScreenWizard();

Демо

Запустить демонстрацию

Исходники

Посмотреть исходный код или создать issue можно на GitHub

Скачать

Возможности

Последовательность показа слайдов можно регулировать дополнительным атрибутом data-index. Если этот атрибут не указан, то слайды будут показаны в порядке, в котором они содержатся в html-коде.

<div data-index="3" data-wizard="В это поле нужно вводить стоимость товара">
	<label>Цена</label>
	<input type="number" value="5000">
</div>

При вызове конструктора можно указать настройки. Например, если вы не хотите чтобы wizard начинался сразу после загрузки, укажите autostart: false и назначьте вызов обучения на клик по кнопке:

window.wizard = new ScreenWizard({
	autostart: false
});

document.querySelector(".button-start").addEventListener("click", function(){
	wizard.start();
});

Настройки

autostart (Default: true)

Включает или выключает автоматический запуск обучения после загрузки страницы

fogPadding (Default: 4)

Отступ от подсвечиваемого элемента в пикселях

stopOnOverlayClick (Default: true)

Включает или выключает выход из обучения по клику на оверлей

showOnce (Default: true)

Включает или выключает однократное обучение на выбранной странице. Если пользователь прошел обучение, в localStorage будет сделана об этом запись и в следующий раз пользователь уже не увидит обучение. Это работает только при автоматическом старте (autostart: true).

hintHtml

Шаблон всплывающего окна

buttonStrings (Default: ['Понятно','Дальше','Ок','Ясно'])

Массив со строками, которые попадают в кнопку при каждой смене слайда. Если не хотите чтобы надпись на кнопке менялась - просто оставьте в этом массиве только один элемент.

Степень затемнения, время анимации, цвета и другие параметры стилизации можно изменить через CSS.

Методы

wizard.start();

Запуск обучения сначала

wizard.exitWizard();

Остановить обучение и выйти из wizard'а