Контекстная справка
Функция Контекстная справка необходима всем, кто стремится сделать свое онлайн-приложение ориентированным на пользователя и простым в обращении. По сути, Контекстная справка означает, что всю необходимую информацию можно разместить непосредственно в вашем приложении. Это позволит решить на месте все трудности, с которыми могут столкнуться ваши пользователи, и ответить на вопросы, которые у них могут возникнуть. Для этого достаточно встроить HTML-код, сгенерированный в разделе Свойства → Контекстная справка , в код вашего приложения.
Код контекстной справки в свойствах страницы не связан с конкретными объектами на вашем веб-сайте или в вашем приложении. Предположим, вы решили обновить настройки или изменить внешний вид контекстной справки в своем приложении или на сайте. В этом случае необходимо либо изменить непосредственно код объекта, либо заново сгенерировать код встраивания в свойствах страницы и затем заменить все вхождения в приложении или на сайте.
У нас есть демонстрации в режиме реального времени различных типов контекстной справки, поддерживаемых системой Документерра:
- Панель — Демонстрация контекстной справки Документерры
- Демонстрация контекстной справки Документерры
Давайте подробнее познакомимся с этой функцией Документерры:
- Варианты контекстной справки
- Добавление всплывающего окна контекстной справки на веб-страницу
- Всплывающее окно с интерактивным элементом изображения (иконкой справки)
- Всплывающее окно с текстовым интерактивным элементом
- Контейнер iframe, встроенный в пользовательский интерфейс
- Параметры контейнера iframe в контекстной справке
- Часто задаваемые вопросы
Варианты контекстной справки
В системе Документерра существует три варианта контекстной справки:
- Контекстная справка, которая отобразится во всплывающем окне внутри контейнера iframe, с изображением в качестве контекстного элемента. Примером такого элемента является маленький иконка (i), приведенная на скриншоте ниже:
- Всплывающее окно с текстовым сниппетом в качестве контекстного элемента. Это значит, что в пользовательском интерфейсе определенный текстовый сниппет будет помечен специальным образом, и при наведении курсора на этот элемент будет появляться всплывающее окно контекстной справки. На приведенном ниже скриншоте примером такого элемента является текст Регистрация аккаунта.
- Контекстная справка в виде контейнера iframe, встроенного в интерфейс. Это может быть так называемая Панель ассистента — особая область в пользовательском интерфейсе приложения, в которой в зависимости от текущего экрана отображаются полезные темы справки. Приведем пример такого макета страницы:
Далее вы познакомитесь с особенностями каждого из трех типов Контекстной справки.
| Страница "Контекстная справка" раздела "Свойства страницы" не является страницей конфигурации свойств, на которой задаются определенные параметры, хранящиеся на портале. Данная страница используется для генерации встраиваемого HTML-кода контекстной справки на основе заданных настроек. При каждом посещении этой страницы система заполняет все поля настроек значениями по умолчанию. |
Добавление всплывающего окна контекстной справки на веб-страницу
В качестве иллюстрации приведем пример HTML-страницы. Вот как она выглядит без Контекстной справки:
Теперь посмотрим, как можно добавить контекстную справку в пользовательский интерфейс приложения:
- В качестве автора зайдите на страницу, содержащую контент, который должен отображаться в виде всплывающей контекстной справки.
- В верхнем колонтитуле страницы выберите Меню действий... → Контекстная справка.
- На странице Контекстная справка в свойствах страницы укажите, какой тип элемента контекстной справки вы хотите получить и как он должен выглядеть. Мы выбрали следующие настройки:
- Система автоматически сгенерирует HTML-сниппет и покажет его в конце страницы.
- Скопируйте оттуда HTML-код и передайте его разработчикам, чтобы они вставили его в пользовательский интерфейс вашего приложения. Идентификатор всплывающего окна (55799 в данном примере) генерируется случайным образом, но он должен быть одинаковым во всех случаях внутри HTML-блока всплывающего окна на странице.
- Результат: добавлена иконка Контекстная справка. При наведении указателя мыши на иконку во всплывающем окне отображается контент целевой страницы.
Всплывающее окно с интерактивным элементом изображения (иконкой справки)
Чтобы создать Контекстную справку с соответствующей иконкой, перейдите по ссылке Свойства → Контекстная справка и выберите необходимый элемент, как показано на скриншоте ниже. Можно также задать ширину и высоту контейнера iframe. Сгенерированный для приложения приведен в нижней части страницы. Просто вставьте его рядом с нужным элементом страницы, и при загрузке приложения появится интерактивное изображение (синий кружок с буквой "i").
В дополнительных опциях можно изменить изображение, используемое по умолчанию, загрузив собственное изображение иконки или выбрав существующее. Также можно настроить отслеживание статистики просмотров страниц, тень всплывающего окна и т.д.
Вы можете выбрать нужный вариант режима отображения всплывающего окна. Для этого просто выберите нужный вариант в выпадающем меню.
Всплывающее окно с текстовым интерактивным элементом
Для того чтобы контекстная справка отображалась в виде текста, убедитесь, что для параметра Тип контекстной справки установлено значение Всплывающее окно, и выберите Тип контекстного элемента: Текст из выпадающего меню.
Введите текст, который будет отображаться в вашем приложении, в текстовое поле рядом с выпадающим меню Тип контекстного элемента . Обратите особое внимание на раздел Предпросмотр, расположенный непосредственно над HTML-кодом, поскольку он позволяет посмотреть, как будет выглядеть всплывающее окно.
Контейнер iframe, встроенный в пользовательский интерфейс
В качестве альтернативы всплывающим окнам можно встроить контекстную справку прямо в интерфейс приложения и реализовать панель ассистента с динамическим контентом. Для этого в разделе Тип контекстной справки выберите опцию Панель, встроенная в интерфейс (панель ассистента).
Вы можете задать ширину и высоту встроенного окна. Предпросмотр расположен в нижней части страницы свойств. Чтобы добавить контейнер iframe в приложение, скопируйте HTML-код контекстной справки и вставьте его в код своего приложения. Также можно настроить отслеживание статистики просмотров страниц, разрешить комментарии к странице и т.д.
Параметры контейнера iframe в контекстной справке
- srv — данный параметр обеспечивает отображение в iframe только контента страницы.
- extNw — данный параметр заставляет все внешние ссылки внутри контейнера iframe открываться в новой вкладке браузера.
- st — данный параметр можно задать с помощью галочки в чекбоксе Отслеживать просмотры страниц с помощью статистики Документерры.
- ga — данный параметр можно задать с помощью галочки в чекбоксе Отслеживать просмотры страниц с помощью Google Analytics (только для читателей).
Часто задаваемые вопросы
Можно ли использовать Контекстную справку в публикациях с ограниченным доступом?
Поскольку контекстная справка — это, по сути, контейнер iframe, который берет информацию с вашего портала, читатели не смогут увидеть информацию из ограниченной публикации, пока вы не предоставите им доступ к этой конкретной публикации в качестве авторизованных читателей.
Могу ли я использовать обычные ссылки вместо смарт-ссылок?
Да, просто замените ссылки в сгенерированном коде, и все будет готово.
Можно ли изменить стиль контекстной справки?
При генерации кода в свойствах страницы выдается статический HTML-код, который затем можно изменить любым способом. Сюда относится стилизация всплывающего окна или панели ассистента.