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.

Adding Context Help Popup to a Web Page

For the sake of this example, we've created a simple HTML page. Here is what it looks like without Context Help:

Now, let's have a look how you can add Context Help to your application UI, for example. The process looks like this:

  • As an author, open a topic that contains the content that should be displayed as a context help popup.
  • In the topic header, select "More | Context Help".

  • On the Context Help page of the topic properties, specify what type of context help element you'd like to get and how it should look like. We've chosen the following settings:

  • The system will automatically generate an HTML snippet and will show at the end of the page.

  • Copy the HTML code from there, give it to Devs, so they can insert it to your application UI.
  • Here is a result: the Context Help icon has been added and, when you hover your mouse pointer over the icon, the target topic content will be shown in a popup.

Popup With an Image Hotspot

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.

Popup With a Textual Hotspot

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 the UI

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.

Web Help as Context Help Source

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").