Автоподсказки, ver. 1.0.0

О решении
Модуль «Автоподсказки» позволяет показывать интерактивные автоподсказки пользователям на всех страницах сайта. Благодаря решению станет возможным демонстрировать возможности интерфейса с автофокусировкой возле элементов и пояснениями, как следует работать с тем или иным инструментом.

Автоподсказки
Автоподсказки представляют из себя pop-up-окна со следующими элементами:

• Название;
  
• Описание;
  
• Кнопки управления.
  

Автоподсказки прикрепляются к элементам DOM-дерева. Селекторы автоподсказок уникальны.

Типы автоподсказок
Автоподсказки бывают:

• одиночные - включает в себя одиночный показ.
  
• групповые (пошаговые) - включают в себя пошаговый показ автоподсказок на одной странице, фокусируясь на разных зонах страницы при переходе от одной зоны к другой.
  

Создание автоподсказок
Создание автоподсказок доступно только пользователю, состоящему в группе «Редактор автоподсказок» или являющемуся администратором портала. В зависимости от лицензии Вашего продукта открытие окна создания/редактирования автоподсказок осуществляется следующими способами:

1. «БУС» или «Битрикс Интернет-магазин» - по нажатию на кнопку .
   
2. «Битрикс24» - последовательно выполненных действий:
   

• открытия личного меню пользователя путем нажатия на кнопку со своими фамилией и именем;
  
• нажатия на кнопку меню:
  

В ответ будет открыто pop-up-окно создания/редактирования автоподсказок, как показано на рисунке 1.

Рисунок 1 - Pop-up-окно создания/редактирование автоподсказок
Просмотр автоподсказок

Создание одиночной автоподсказки
Для того, чтобы создать одиночную автоподсказку, необходимо выполнить следующие нажать на кнопку «Добавить» (см. рис. 1). В ответ будет открыто pop-up-окно редактора автоподсказки, показанное на рисунке 2.

Рисунок 2 - Pop-up-окно «Редактор автоподсказок»
Для того, чтобы автоподсказка появилась в списке автоподсказок на странице, необходимо выполнить следующие действия:

1. Ввести название автоподсказки;
   
2. Убедиться, что автоподсказка будет привязана к странице, URL которой показан в поле;
   
3. Ввести описание автоподсказки;
   
4. Ввести порядковый номер сортировки (чем ниже порядковый номер сортировки, тем раньше будет показана автоподсказка пользователям на странице, при одинаковых номерах сортировки будет показана та автоподсказка первой, чей ID ниже);
   
5. Привязать автоподсказку к элементу страницы по клику на кнопку «Выбрать элемент» и на открывшейся странице нажать правой кнопкой мыши по нужном элементу;
   
6. Нажать на кнопку «Применить», если планируете дальше редактировать поля автоподсказки, либо на кнопку «Сохранить».
   

В результате в pop-up-окне, показанном на рисунке 1, в списке автоподсказок добавится новая автоподсказка.

Создание пошаговой автоподсказки
Для создания пошаговой автоподсказки сначала необходимо создать группу, в которую будут входить данные автоподсказки. Для того, чтобы создать группу автоподсказок, необходимо в pop-up-окне, показанном на рисунке 1, нажать на кнопку «Добавить группу». В результате будет открыто pop-up-окно «Создание группы», показанное на рисунке 3.

Рисунок 3 - Создание группы автоподсказок
В открывшемся pop-up-окне необходимо внести название группы автоподсказок и порядковый номер сортировки (автоподсказки, входящие в группу, чей порядковый номер группы автоподсказок ниже, будут показаны на странице первыми, при равенстве порядковых номеров групп автоподсказок, первыми будут показаны автоподсказки той группы, чей id ниже) и нажать на одну из кнопок «Применить», если планируется редактирование данных группы автоподсказок, либо «Сохранить». В результате появится новая группа автоподсказок, как показано на рисунке 4.

Рисунок 4 - Группы автоподсказок
Далее необходимо создать элементы группы автоподсказок (одиночные автоподсказки), для чего необходимо нажать на название группы автоподсказок. В результате будет открыто pop-up-окно, показанное на рисунке 1. Далее необходимо выполнить действия, описанные в пункте «Создание одиночной автоподсказки» для каждой автоподсказки, которая будет входить в группу.
Как только все автоподсказки группы будут созданы, автоподсказки будут готовы к просмотру.

Показ автоподсказок
Для пользователей сайта при проходе на страницу, для которой ранее были созданы автоподсказки, осуществляется показ автоподсказок согласно порядковым номерам автоподсказок сразу после того, как страница будет загружена и пройдет интервал тайм-аута перед показом, длительность которого установлена в настройках модуля. Показ одиночной автоподсказки завершается при нажатии на кнопку «Ознакомлен» или на кнопку «Закрыть». При нажатии на кнопку «Закрыть» осуществляется прерывание просмотра не только текущей, но и всех автоподсказок, созданных для страницы, при чем автоподсказки считаются просмотренными и повторно при прохождении на страницу пользователю не доступны до тех пор, пока он сам не инициировал такой показ, если в настройках модуля разрешен повторный показ автоподсказок. Пошаговые автоподсказки, отличаются от одиночной наличием кнопок навигации. На рисунке 5 показана одна из пошаговых автоподсказок.
Рисунок 5 - Показ пошаговой автоподсказки
У пошаговых автоподсказок у появляются имеются кнопки навигации «Далее», «Назад» и «Закрыть». Завершение просмотра пошаговой автоподсказки осуществляется в любой момент времени по нажатию на кнопку «Закрыть». В случае, если пользователь нажмет на кнопку «х», показ будет прерван и завершен даже в том случае, если пользователь не просмотрел все шаги, которые автоподсказка в себя включает.

Повторный показ автоподсказок
При наличии опции «Разрешить повторный просмотр» в настройках модуля пользователю на всех страницах портала, для которых были созданы автоподсказки и единожды были просмотрены, будет выведена кнопка «Лампочка» (см. рисунок 6), по нажатию на которую пользователь сможет инициировать повторный показ автоподсказок.

Рисунок 6 - Кнопка «Лампочка»
После нажатия на данную кнопку будет осуществлен штатный показ автоподсказок с возможностями прерывания на любом шаге

Логирование просмотров автоподсказок
Все просмотры пользователей по умолчанию логируются. Информация о просмотрах автоподсказок доступна пользователю с доступом к административной части портала на странице «Автоподсказки: История просмотра», расположенную в разделе «Сервисы». Страница показана на рисунке 7.

Рисунок 7 - Страница «Автоподсказки: История просмотра»
На странице доступна к просмотру информация из 15 полей для агрегации статистики, которую в последствии можно экспортировать в Excel-файл (штатный функционал Битрикс формирование Excel-файлов с информацией, расположенной в таблице на странице).

Интересные факты:

1. Встроенный редактор Битрикс24 позволяет прикреплять в описание автоподсказки видео, картинки, таблицы и гиперссылки, форматировать текст так, как нужно.
   
2. Существует возможность отключить всем просмотр автоподсказок, что позволяет редактору автоподсказок создавать автоподсказки, а всем остальным пользователям просмотр в данный промежуток времени отключен.
   
3. Существует возможность отключать логирование просмотров и удалять ранее просмотренные логи о просмотре.
   
4. Существует возможность разрешать пользователям смотреть автоподсказки повторно.
   
5. Кнопку «Автоподсказки» и «Лампочка» на сайтах с лицензиями «БУС» и «Битрикс: Интернет-магазин» можно выводить в любом удобном месте экрана.
   
6. Существует возможность регулирования тайм-аута перед показам пользователям (по умолчанию установлен в 3 секунды).
   
7. Существует возможность задания цвета потухшей и светящейся лампочки.
   
8. Существует возможность деактивировать модуль, не удаляя его (отключить весь функционал), а также сохранять настройки модуля и автоподсказки с историей их просмотра при удалении модуля.
   
9. Редактор автоподсказок может выключить показ одной или нескольких автоподсказок из списка на любых страницах сайта