Класс BX.UI.Tour.Guide

new BX.UI.Tour.Guide(options)

• options {Object} Коллекция опций.
• steps Шаги тура, обязательная опция. Каждый шаг может содержать следующие параметры:

• target Элемент, для которого будет показано всплывающее окно (шаг тура). Значением может быть либо ссылка на DOM-элемент, либо селектор для поиска через document.querySelector, либо функция, которая возвращает DOM-элемент. Если target не указан или указан неверно, то всплывающее окно будет отображено в центре страницы.

  var guide = new BX.UI.Tour.Guide({
  	steps: [
  		{
  			target: ".crm-robot-btn",
  			title: "Кнопка",
  			text: "Данные попапы призваны помочь вам понять наш сложный продукт."
  		},
  		{
  			target: BX("counter_panel_container"),
  			title: "Счетчики",
  			text: "Текст про счетчики",
  			link: "https://helpdesk.bitrix24.ru/section/108537/",
  		},
  		{
  			target: "#menu-counter-crm_all",
  			title: "Счетчик",
  			text: "Текст про счетчик. Дорогой пользователь! Данные попапы призваны помочь вам понять наш сложный продукт.",
  		},
  		{
  			target: function() {
  			return document.querySelector(".menu-items");
  		},
  			title: "Основное меню",
  			text: "Дорогой пользователь!",
  			link: "#",
  		}
  	});
  

• title {string} Заголовок шага, строка.
• text {string} Текст шага, строка.
• link {string} Ссылка, на которую будет ввести кнопка Подробнее во всплывающем окне, по клику на ссылку откроется новое окно.
• position По умолчанию всплывающее окно позиционируется снизу. Есть возможность принудительно его позиционировать слева или справа от элемента, для которого оно показывается. Для этого в шаге нужно указать параметр position со значением left или right. Если указано позиционирование слева, но там нет места для попапа с подсказкой, то попап автоматически будет позиционирован справа (и наоборот).
• rounded Параметр делает подсветку в форме круга. Например, ее можно использовать для счетчиков.


• article По клику на кнопку Подробнее в попапе можно открывать статьи в слайдере через BX.Helper. Для этого передайте в параметр article символьный код статьи. В этом случае параметр link не нужно указывать.

var guide = new BX.UI.Tour.Guide({
	steps: [
		{
			target: BX("text"),
			title: "Текст",
			text: "Данные попапы призваны помочь вам понять наш сложный продукт.",
			article: "6991043",
		},
		{
			target: "#button",
			title: "Кнопка",
			text: "Каждый день мы наполняем его новым функционалом, разобраться в котором не так просто.",
			link: "https://helpdesk.bitrix24.ru/section/108537/",
			position: "left"
		}
	],
});

• areaPadding Задает дополнительный отступ подсветки от элемента, для которого показана подсказка. По умолчанию равен 10. Если отступ не нужен, укажите в параметре 0.
• id Идентификатор шага. Необязательный параметр.
• events Коллекция обработчиков событий.
• finalStep Устанавливает финальный шаг тура, он позицинируется в центре окна. По умолчанию параметр равен false. Визуальный вид:
  

Для финального шага можно передать следующие параметры:



• buttons В них можно передать классы, текст кнопок и события. По умолчанию выводится одна кнопка с текстом Закрыть, по клику на нее тур закрывается.
• finalTitle {string} Заголовок финального шага.
• finalText {string} Текст финального шага.

Если finalStep не установлен, то последний шаг тура выглядит так:




• autoSave {boolean} Если указано true, после показа тура факт просмотра сохраняется в опциях текущего пользователя. По умолчанию false. Для сохранения просмотра укажите стабильный id тура. Параметр autoSave сохраняет факт просмотра, но не проверяет его перед ручным запуском. Если при каждой загрузке страницы вызывается guide.start(), перед запуском проверьте, был ли тур уже показан текущему пользователю.
• events Коллекция обработчиков событий.

Пример простого тура в два шага

<div>
	<button id="button" class="ui-btn ui-btn-primary" style="margin-bottom: 20px">Добавить задачу</button>
	<span id="text" class="ui-alert ui-alert-success" style="width: 70%">
		<span class="ui-alert-message"><strong>Внимание!</strong> Текст успешного сообщения находится здесь.</span>
	</span>
</div>
<script>
		BX.ready(function(){
			var guide = new BX.UI.Tour.Guide({
				steps: [
					{
						target: BX("text"),
						title: "Текст",
						text: "Данные попапы призваны помочь вам понять наш сложный продукт.",
						link: "https://www.bitrix24.ru/",
					},
					{
						target: "#button",
						title: "Кнопка",
						text: "Каждый день мы наполняем его новым функционалом, разобраться в котором не так просто.",
						link: "https://helpdesk.bitrix24.ru/section/108537/",
						position: "left"
					}
				],
			});
			guide.start();
	});
	</script>

Пример показа тура пользователю один раз

Если тур должен запускаться для пользователя только один раз, перед вызовом guide.start() проверьте опцию текущего пользователя. При autoSave: true факт просмотра сохраняется в категории ui-tour с именем вида view_date_<идентификатор тура>. Идентификатор в имени опции должен совпадать со значением параметра id.

<div>
	<button id="button" class="ui-btn ui-btn-primary" style="margin-bottom: 20px">Добавить задачу</button>
	<span id="text" class="ui-alert ui-alert-success" style="width: 70%">
		<span class="ui-alert-message"><strong>Внимание!</strong> Текст успешного сообщения находится здесь.</span>
	</span>
</div>
<script>
		BX.ready(function(){
			var showTour = <?= CUtil::PhpToJSObject(
				empty(CUserOptions::GetOption("ui-tour", "view_date_my-tour-example", false))
			) ?>;

			if (!showTour)
			{
				return;
			}

			var guide = new BX.UI.Tour.Guide({
				id: "my-tour-example",
				autoSave: true,
				steps: [
					{
						target: BX("text"),
						title: "Текст",
						text: "Данные попапы призваны помочь вам понять наш сложный продукт.",
						link: "https://www.bitrix24.ru/",
					},
					{
						target: "#button",
						title: "Кнопка",
						text: "Каждый день мы наполняем его новым функционалом, разобраться в котором не так просто.",
						link: "https://helpdesk.bitrix24.ru/section/108537/",
						position: "left"
					}
				],
			});
			guide.start();
		});
	</script>

После показа тура autoSave сохраняет факт просмотра. При следующей загрузке страницы CUserOptions::GetOption вернет сохраненное значение, и тур не будет запущен повторно.

Если не требуется вручную управлять запуском тура, используйте компонент bitrix:ui.tour: укажите ID, передайте настройки тура в JS_OPTIONS и настройте автоматический запуск через AUTO_START. Для ограничения периода показа используйте LIFETIME, START_DATE и END_DATE.

Методы

События для BX.UI.Tour.Guide