Skip to main content

Embed a contextual help Touchpoint

This article provides steps for embedding the MindTouch contextual help Touchpoint on your web properties or applications.
 

Prerequisites


  • Creation of a contextual help Touchpoint.
  • Basic HTML skills.
  • Rights of authorship on the page on which you want to embed the Touchpoint.
  • If applicable, the custom CSS selector specified during Touchpoint configuration.
     

Embed the contextual help Touchpoint


Step 1: Copy the embed code

Note to user   NOTE:  Skip this section if you already have copied the code when creating your Touchpoint.

  1. From the Site tools menu on the MindTouch toolbar, select Control panel.
  2. Navigate to System Settings > Integrations > Touchpoints.
  3. Scroll to Currently enabled Touchpoints, select your Touchpoint and click Copy code to clipboard.

Screenshot of the contextual help touchpoint embed code
 

Step 2: Embed the contextual help Touchpoint

  1. Navigate to the page on which you want to embed your contextual help Touchpoint.
  2. Decide where on the page you want to add the contextual help Touchpoint.
  3. If necessary, consult with your product developers to access the HTML of your web application.
  4. Paste the embed code directly into the HTML of your web page or application.

Screenshot of embedded contextual help touchtpoint code
 

Step 3: Create a help dialog link in your HTML code

To trigger your contextual help dialog, perform the following steps:

Screenshot of the contextual help touchpoint help link code

  1. Add a link via <a> tags to your HTML code. 
  2. Inside your <a> tag, create a class and assign the custom CSS selector you specified during Touchpoint configuration  (by default F1).
  3. For the href attribute, specify the page on which you want your help dialog to open.

Note to user   NOTE:  The href URL may be different from the search location URL you specified when creating the Touchpoint. You may also use a custom content ID (CID) if you wish to dynamically update your external links.

  1. Save your HTML changes.
     

Step 4: Test your Touchpoint

  1. Open your web page or application.
  2. The contextual help link should look like any other link (unless you have defined a specific style for the link).

Screenshot of a contextual help link
 

  1. Click the link to verify the contextual help dialog loads the appropriate page.
     

What's next?


Explore the contextual help button Touchpoint.