Skip to main content
MindTouch Success Center

Embed your contextual help Touchpoint

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

Prerequisites


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

How to embed the contextual help Touchpoint


Step 1: Copy the embed code

Note to user   NOTE:  Skip this section if you already copied the code when you created your contextual help Touchpoint.

  1. From the Site tools menu on the MindTouch toolbar, select Control panel.
  2. Navigate to System Settings > Integrations > Touchpoint Toolbox.
  3. Scroll to Currently enabled Touchpoint tools, select your tool 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 the 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

Do NOT place this code in the head section of your HTML. The code MUST be placed in the body section. 

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 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 contextual help 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 contextual help Touchpoint

  1. Open your web page or application.
  2. The contextual help Touchpoint either looks like a regular link (as in the example below) or like a styled icon (often a question mark or "i" for information).

Screenshot of a contextual help link

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

What's next?


Explore the customer insights Touchpoint.

  • Was this article helpful?