Онбординг пользователя: как сделать интерактивные подсказки на сайте

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

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




   

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

[spoiler]

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

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

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

     

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

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

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

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

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

   

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

1. Общая информация: название, приоритет, автозапуск, режим показа. Тут же расположена стандартная для Битрикс галочка активности.
2. Оформление. Здесь можно выбрать, насколько сильно затемняется фон, скругление углов всплывающих окон и другое.
3. Условия срабатывания. Установите, для каких url будет показываться ваша интерактивная инструкция: можно указать точные адреса, либо начало адреса. Здесь же можно, наоборот, перечислить, на каких страницах тур отображать не нужно.
4. Создание шагов. В этом блоке нужно заполнить:
   

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

   
   

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