Умные автоподсказки для быстрого ввода

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

Автоподсказки представляют из себя диалоговые окна, содержащие следующие элементы:

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

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

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

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

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

• «БУС» или «Битрикс Интернет-магазин» - по нажатию на кнопку .
  

• «Битрикс24» - последовательно выполненных действий:
  1. открыть личное меню пользователя (нажать на кнопку со своими инициалами);
  2. нажать на кнопку меню .
  

В результате данных действий откроется диалоговое окно "Автоподсказки", как показано на рисунке 1.

Рис. 1 - Пример отображения диалогового окна «Автоподсказки»
Создание одиночной автоподсказки
Для создания одиночной автоподсказки необходимо выполнить следующие действия:

1. нажать на кнопку «Добавить» (см. Рис. 1). В ответ откроется диалоговое окно «Создание автоподсказки», как показано на рисунке ниже.
   
   Рис. 2 - Пример отображения диалогового окна «Создание автоподсказки»
   
2. ввести название автоподсказки в поле «Название»;
   
3. добавить текст описания автоподсказки в поле «Описание»;
   
4. ввести порядковый номер сортировки автоподсказок (чем ниже порядковый номер сортировки, тем раньше будет показана автоподсказка пользователям на странице (при одинаковых номерах сортировки - первой будет показана та автоподсказка, чей идентификатор ниже));
   
5. привязать автоподсказку к элементу страницы:
   а. нажать на кнопку «Выбрать элемент» - откроется страница для выбора элемента страницы;
   b. нажать правой кнопкой мыши по целевому элементу - откроется диалоговое окно «Создание автоподсказки» и выведется информация о том, что элемент привязан, как показано на рисунке ниже.
   
   Рис. 3 - Пример отображения диалогового окна «Создание автоподсказки» с информацией о привязанном элементе
   
6. нажать на кнопку «Применить» (если планируется редактирование значений полей автоподсказки) либо на кнопку «Сохранить» для сохранения автоподсказки и возврата к диалоговому окну «Автоподсказки».
   

В результате данных действий в списке автоподсказок отобразится запись о созданной автоподсказке, как показано на рисунке ниже.

Рис. 4 - Пример отображения диалогового окна «Автоподсказки» с записью о созданной автоподсказке
Создание пошаговой автоподсказки
Общие сведения
Пошаговая автоподсказка представляет из себя группу автоподсказок. Создание группы автоподсказок представляет собой набор следующих действий:

1. создание группы автоподсказок;
   
2. создание автоподсказок, входящих в группу.
   

Создание группы автоподсказок

Для создания группы автоподсказок необходимо выполнить следующие действия:

1. открыть диалоговое окно «Автоподсказки», как указано в пункте «Общие сведения»;
   
2. нажать на кнопку «Добавить группу» - отобразится диалоговое окно «Создание группы», как показано на рисунке ниже.
   
   Рис. 5 - Пример отображения диалогового окна «Создание группы автоподсказок»
   
3. ввести название группы автоподсказок в поле «Название»;
   
4. ввести порядковый номер сортировки в поле «Сортировка» (автоподсказки, входящие в группу, чей порядковый номер сортировки ниже, будут показаны на странице первыми, при равенстве порядковых номеров сортировки, первыми будут показаны автоподсказки той группы, чей идентификатор ниже);
   
5. нажать на кнопку «Применить» (если планируется редактирование значений полей группы автоподсказок) либо на кнопку «Сохранить» для сохранения информации о группе автоподсказок и возврата к диалоговому окну «Автоподсказки».
   

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

Рис. 6 - Пример отображения диалогового окна «Автоподсказки» с записью о созданной группе автоподсказкок
Создание автоподсказок группы
Для создания автоподсказки группы необходимо:

1. нажать на название группы автоподсказок - откроется диалоговое окно c названием группы автоподсказок, как показано на рисунке ниже.
   
   Рис. 7 - Пример отображения диалогового окна с названием группы автоподсказок
   
2. выполнить действия, связанные с созданием одиночной автоподсказки, описанные в пункте «Создание одиночной автоподсказки» для каждой автоподсказки, которая будет входить в группу.
   

Как только все автоподсказки группы будут созданы, автоподсказки будут готовы к просмотру.
Показ автоподсказок
Общие сведения
Показ автоподсказок производится для пользователей при проходе на те страницы сайта, для которых ранее были созданы автоподсказки, по прошествии интервала тайм-аута задержки показа (длительность установливается настройках модуля).
Показ автоподсказок осуществляется согласно их порядковым номерам. Показ одиночной автоподсказки завершается по нажатию на одну из кнопок: «Ознакомлен» или «X» («Закрыть»). По нажатию на кнопку «X» осуществляется прерывание просмотра не только текущей, но и всех оставшихся к просмотру автоподсказок, созданных для страницы, причем автоподсказки считаются просмотренными и повторно при прохождении на страницу пользователю не доступны до тех пор, пока он сам не инициирует такой показ (если в настройках модуля разрешен повторный показ автоподсказок).
Пример отображения одиночной автоподсказки приведен на рисунке ниже.

Рис. 8 - Пример отображения одиночной автоподсказки

У пошаговых автоподсказок существуют следующие кнопки навигации:

• «Далее» - по нажатию выполняется показ следующей автоподсказки группы автоподсказок;
  
• «Назад» - по нажатию выполняется показ предыдущей автоподсказки группы автоподсказок;
  
• «X» - по нажатию выполняется завершение просмотра пошаговой автоподсказки.
  

Пример отображения последней автоподсказки групповой автоподсказки приведен на рисунке ниже.

Рис. 9 - Пример отображения последней автоподсказки групповой автоподсказки
Повторный показ автоподсказок

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

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

• встроенный редактор позволяет прикреплять в описание автоподсказки видео, картинки, таблицы и гиперссылки, форматировать текст;
  
• отключение всем пользователям просмотр автоподсказок;
  
• отключение логирования просмотров автоподсказок;
  
• удаление ранее просмотренных записей из журнала логирования о просмотренных автоподсказках;
  
• повторный просмотр автоподсказок;
  
• вывод кнопок «Автоподсказки» и«Лампочка» на сайтах с лицензиями «БУС» и«Битрикс: Интернет-магазин» в любом удобном месте страницы;
  
• регулирование тайм-аута задержки перед показом автоподсказки пользователю;
  
• установка цвета кнопок потухшей и светящейся лампочек;
  
• деактивация (отключение функционала) модуля;
  
• сохранение настроек модуля и автоподсказок с историей их просмотра при удалении модуля;
  
• пользователь с ролью «Редактор автоподсказок» может выключить показ одной или нескольких автоподсказок из списка на любых страницах сайта.