Shopping Cart - Sample web app   
Demo user guide  
×
Menu
Index
  • Technology overview

Technology overview

 
 
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.
Note: please turn on Print version pages in Dr.Explain HTML export settings. It's the print version pages that are displayed in the context help pop up windows due-to their minimalist and clean design.
 
 

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.
Made with help of Dr.Explain