The technology allows to integrate help manual created with
Dr.Explain right into a web site or a web application. You can easily bind clickable help icons to a certain page sections or controls which require explanations.
Just a few steps are required to do this,
1. Insert Dr.Explain context web help script into the code of your web page
|
<script type="text/javascript" src="https://addons.indigobyte.com/drexplain/decontext/v0.1.1/decontext.js" data-decontext-url="https://www.drexplain.com/help"></script>
|
In the
data-decontext-url parameter set the URL of your online manual made with
Dr.Explain. The online manual can be published either on your product website or on
tiwri.com technical writing platform.
2. Add context help attributes to page elements
To attach a clickable help icon with a help topic pop up to an HTML element (e.g. input, div, table or else) just add the special attributes to its HTML tag like shown bellow.
|
<div
data-decontext="true"
data-decontext-position-x="right"
data-decontext-position-y="top"
data-decontext-filename="topic.html"
>...</div>
|
The attributes:
data-decontext - enables/disables the context web help icon for the element.
data-decontext-position-x - horizontal position of the help icon relative to the element (left, center or right (default value))
data-decontext-position-y - vertical position of the help icon relative to the element (top (default value), center or bottom)
data-decontext-filename - online manual help topic file name to be shown in the popup window
data-decontext-bgcolor - help icon background color. The default color is #bbb (light gray).
data-decontext-fgcolor - help icon text (question mark) color. The default color is #fff (white).
data-decontext-width - help icon width. The default width is 24 pixels.
data-decontext-height - help icon height. The default height is 24 pixels.
3. Publish your web page changes
Once the changes are published a help icon will be shown on those page elements. The popup window with a certain help topic will be shown once a user clicks the help icon.
Note: decontext.js script is a subject to change and improvements. We recommend to visit this page and
Dr.Explain help documentation from time to time to keep abreast of its changes and modifications.
