Share:
ClickHelp Documentation

Context Help

The Context Help feature is a must-have for everyone who wants their online app to be user-oriented and easy to handle. Basically, Context Help means that all the necessary information can be placed right inside your app, so the difficulties your users might face, and the questions they might have will be solved on the spot. All you need to do is to embed the HTML code generated in Properties > Context Help into your application's code.

We have a live demo of various Context Help types supported by ClickHelp published on our website:

Let's learn more on this functionality of ClickHelp:

Context Help Implementations

There are three Context Help  options  ClickHelp has to offer:

  • Context Help to be shown in a popup window with an iframe, using an image as a context element. The small (i) icon on the screenshot below is an example of such element:
  • A popup window with a text snippet as a context element. That, is some text snippet in your UI will be marked in a special way and hovering over that element will cause a context help popup show up. On the screenshot below, the "Account Registration" text is an example of such element.
  • Context Help as an iframe embedded into the interface. This may be a so-called Assistant Panel - a special area in your application's UI where useful help topics are shown depending on the current screen. Here is an example of such page layout:
Further on, you will learn the peculiarities of each of the three Context Help  types.

Iframe With Image Context Element

To create Context Help with an image context element, go to Properties > Context Help and choose the corresponding item as shown on the screenshot below. You can also set the width and height of your iframe. You can see the code generated for your app at the bottom of the page. Simply insert it next to the desired page element, and, when your app is loaded, an image (a blue 'i' circle) will appear.

You can change the default image in the advanced options by uploading your own icon image or choosing an existing one. And, you can set the topics tracking, the popup shadow, etc.

You can choose the needed Popup behavior , just pick the right option in the drop-down box.

Iframe With Text Context Element

To get your  Context Help to be displayed as some text, make sure that the  Context help type option is set to Pop up window , and choose Context element type: Text from the drop-down box.

Type in the text to be displayed in your application in the text field next to the Context element type drop-down box. Pay special attention to the Preview section just above the HTML code, it allows you to see how the popup will look.

Iframe Embedded Into Interface

As an alternative to popups, you can embed Context Help right into your app's interface to implement an Assistant Panel with dynamic content.To do this, choose the Panel embedded into the interface (Assistant Panel )   option in the Context help type   section.


You can set the width and height of the embedded window. The preview is located at the bottom of the properties page. To add the iframe to your app, copy the Context Help HTML Code and insert it into your app's code. You can also set the topics tracking, allow comments for the topic, etc.

Context Help for Web Help

The Context Help feature is available even if you host documentation on your own server instead of the ClickHelp Documentation Portal. To implement context help in a Web Help user manual, do the following:

  • Go to Properties>Context Help.
  • Under the Context Help HTML Code, you will see the HTML code snippet generated by the system.
  • Find the code line that contains a context help script reference:

  • Download the script file from your portal using this URL. 
  • Change the URL in the context help snippet to reflect the new custom location of the script file.
  • Deliver it long with your HTML 5 WebHelp contents.
  • Change the topic URLs in the snippets so they point to the HTML files of your WebHelp and not to the portal. The URLs are stored in the data-chpw-contentUrl parameter value:      

    This way, you will be able to use context help for your Web Help documentation.
Information It is possible to embed a Web Help search panel into web applications (specify the "noredirect" URL parameter for that) and, optionally, make the panel display search results for a query pre-defined via the "q" URL parameter (like "search.html?noredirect=1&q=test").