Как сделать интерактивную инструкцию для пользователей — новый модуль “Bquadro: Пошаговый обучающий тур по сайту” — советы в блоге

На порталах с личным кабинетом или сложным функционалом иногда полезно предварительно обучить пользователя. То есть показать ему, как работает сайт и какие шаги надо предпринять, чтобы достичь результата.

Интерактивный туториал для сайта поможет показать пользователю, как правильно работать в созданном вами интерфейсе.

Мы в Bquadro разработали для этих целей специальный модуль “Bquadro: Пошаговый обучающий тур по сайту”. В этой статье рассмотрим его основные возможности.

Для чего полезен пошаговый тур по сайту

Интерактивную инструкцию создают, чтобы знакомить пользователя с таким функционалом, как:

• регистрация на сайте и настройка личного кабинета;

• создание пользовательского контента: написание статей, рецептов; размещение изображений;

• разделы сложного многофункционального портала;

• информирование о появлении новых важных блоков и разделов сайта;

• и в других случаях, когда такие всплывающие подсказки с затемнением фона будут уместны.

Возможности модуля от Bquadro

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

• Не имеет ограничения по количеству туров.

• Не имеет ограничения по количеству шагов в каждом туре.

• Имеет гибкие настройки внешнего вида и содержимого подсказок.

• Позволяет настраивать условия показа по url страниц.

Как пользоваться

Модуль прост в использовании и требует от администратора сайта или контент-менеджера только минимальное понимание html/css для привязки всплывающих подсказок (тултипов) к элементам на странице.

Создание туров и шагов внутри них осуществляется из соответствующего раздела административной панели: Bquadro > Ознакомительные туры > Список туров.

Для каждого тура есть несколько понятных блоков настроек.

1. Общая информация: название, приоритет, автозапуск, режим показа. Тут же расположена стандартная для Битрикс галочка активности.

2. Оформление. Здесь можно выбрать, насколько сильно затемняется фон, скругление углов всплывающих окон и другое.

3. Условия срабатывания. Установите, для каких url будет показываться ваша интерактивная инструкция: можно указать точные адреса, либо начало адреса. Здесь же можно, наоборот, перечислить, на каких страницах тур отображать не нужно.

4. Создание шагов. В этом блоке нужно заполнить:

• Содержимое для каждого тултипа: заголовок и текст.

• Настроить его привязку к элементу страницы. Это может быть один из селекторов:
  - либо html-тег (например, h1),
  - либо класс css (например, .bx-footer-logo (писать с точкой в начале)),
  - либо id (например, #title-search-input (писать с знаком # в начале)).
  Еще вариант - задать фиксированные координаты.

• Настроить другие параметры: отступ, позиция, прокрутка, действие при ненайденном элементе и др.

• Здесь же можно присвоить ему свой css-класс, заранее созданный вашим фронтенд-разработчиком.

Даём 30 дней на бесплатное тестирование: устанавливайте, пробуйте. И если понравится, покупайте и забирайте.

Наша техподдержка на связи

Особенности установки описаны на странице модуля в маркетплейсе. Все вопросы поможет решить наша техподдержка — пишите на support.dev@bquadro.ru.