Запросить демо
Запросить демо
Документерра: руководство пользователя

Контекстная справка

Функция Контекстная справка необходима всем, кто стремится сделать свое онлайн-приложение ориентированным на пользователя и простым в обращении. По сути, Контекстная справка означает, что всю необходимую информацию можно разместить непосредственно в вашем приложении. Это позволит решить на месте все трудности, с которыми могут столкнуться ваши пользователи, и ответить на вопросы, которые у них могут возникнуть. Для этого достаточно встроить HTML-код, сгенерированный в разделе Свойства Контекстная справка , в код вашего приложения.

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

У нас есть демонстрации в режиме реального времени различных типов контекстной справки, поддерживаемых системой Документерра:

Давайте подробнее познакомимся с этой функцией Документерры:


Варианты контекстной справки

В системе Документерра существует три варианта контекстной справки:

  • Контекстная справка, которая отобразится во всплывающем окне внутри контейнера iframe, с изображением в качестве контекстного элемента. Примером такого элемента является маленький иконка (i), приведенная на скриншоте ниже:Контекстная справка во всплывающем окне с изображением в качестве контекстного элемента
  • Всплывающее окно с текстовым сниппетом в качестве контекстного элемента. Это значит, что в пользовательском интерфейсе определенный текстовый сниппет будет помечен специальным образом, и при наведении курсора на этот элемент будет появляться всплывающее окно контекстной справки. На приведенном ниже скриншоте примером такого элемента является текст Регистрация аккаунта.
    Контекстная справка во всплывающем окне с текстовым сниппетом в качестве контекстного элемента
  • Контекстная справка в виде контейнера iframe, встроенного в интерфейс. Это может быть так называемая Панель ассистента — особая область в пользовательском интерфейсе приложения, в которой в зависимости от текущего экрана отображаются полезные темы справки. Приведем пример такого макета страницы:
    Контекстная справка в виде контейнера iframe, встроенного в интерфейс

Далее вы познакомитесь с особенностями каждого из трех типов Контекстной справки.

Страница "Контекстная справка" раздела "Свойства страницы" не является страницей конфигурации свойств, на которой задаются определенные параметры, хранящиеся на портале. Данная страница используется для генерации встраиваемого HTML-кода контекстной справки на основе заданных настроек. При каждом посещении этой страницы система заполняет все поля настроек значениями по умолчанию.

Добавление всплывающего окна контекстной справки на веб-страницу

В качестве иллюстрации приведем пример HTML-страницы. Вот как она выглядит без Контекстной справки:

HTML-страница без контекстной справки

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

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

Всплывающее окно с интерактивным элементом изображения (иконкой справки)

Чтобы создать Контекстную справку с соответствующей иконкой, перейдите по ссылке Свойства Контекстная справка и выберите необходимый элемент, как показано на скриншоте ниже. Можно также задать ширину и высоту контейнера iframe. Сгенерированный для приложения приведен в нижней части страницы. Просто вставьте его рядом с нужным элементом страницы, и при загрузке приложения появится интерактивное изображение (синий кружок с буквой "i").

Выбор типа контекстной справки в настройках контекстной справки

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

Выбор типа элемента в настройках контекстной справки

Вы можете выбрать нужный вариант режима отображения всплывающего окна. Для этого просто выберите нужный вариант в выпадающем меню.

Выбор режима отображения всплывающего окна в настройках контекстной справки

Всплывающее окно с текстовым интерактивным элементом

Для того чтобы контекстная справка отображалась в виде текста, убедитесь, что для параметра Тип контекстной справки установлено значение Всплывающее окно, и выберите Тип контекстного элемента: Текст из выпадающего меню.

Настройки для отображения контекстной справки в виде текста

Введите текст, который будет отображаться в вашем приложении, в текстовое поле рядом с выпадающим меню Тип контекстного элемента . Обратите особое внимание на раздел Предпросмотр, расположенный непосредственно над HTML-кодом, поскольку он позволяет посмотреть, как будет выглядеть всплывающее окно.

Текстовый тип контента, выбранный в настройках контекстной справки

Контейнер iframe, встроенный в пользовательский интерфейс

В качестве альтернативы всплывающим окнам можно встроить контекстную справку прямо в интерфейс приложения и реализовать панель ассистента с динамическим контентом. Для этого в разделе Тип контекстной справки выберите опцию Панель, встроенная в интерфейс (панель ассистента).

Опция «Панель, встроенная в интерфейс» (Панель ассистента) в разделе «Тип контекстной справки»

Вы можете задать ширину и высоту встроенного окна. Предпросмотр расположен в нижней части страницы свойств. Чтобы добавить контейнер iframe в приложение, скопируйте HTML-код контекстной справки и вставьте его в код своего приложения. Также можно настроить отслеживание статистики просмотров страниц, разрешить комментарии к странице и т.д.

Раздел "Предпросмотр" в настройках контекстной справки

Параметры контейнера iframe в контекстной справке

  • srv — данный параметр обеспечивает отображение в iframe только контента страницы.
  • extNw — данный параметр заставляет все внешние ссылки внутри контейнера iframe открываться в новой вкладке браузера.
  • st — данный параметр можно задать с помощью галочки в чекбоксе Отслеживать просмотры страниц с помощью статистики Документерры.
  • ga — данный параметр можно задать с помощью галочки в чекбоксе Отслеживать просмотры страниц с помощью Google Analytics (только для читателей).

Часто задаваемые вопросы

Можно ли использовать Контекстную справку в публикациях с ограниченным доступом?
Поскольку контекстная справка — это, по сути, контейнер iframe, который берет информацию с вашего портала, читатели не смогут увидеть информацию из ограниченной публикации, пока вы не предоставите им доступ к этой конкретной публикации в качестве авторизованных читателей.

Могу ли я использовать обычные ссылки вместо смарт-ссылок?
Да, просто замените ссылки в сгенерированном коде, и все будет готово.

Можно ли изменить стиль контекстной справки?
При генерации кода в свойствах страницы выдается статический HTML-код, который затем можно изменить любым способом. Сюда относится стилизация всплывающего окна или панели ассистента.