Skip to main content
MindTouch Success Center

Brand your Touchpoints

Written by Ricky Nguyen
Product Analyst at MindTouch
This page applies to:MindTouch (current)

The importance of branding


MindTouch Touchpoints allow you to connect your customers to your product documentation wherever they are in their online journey. From a marketing and user experience perspective, it is important to ensure these connections are as seamless as possible. With our Touchpoint branding functionality, you can match the look and feel of your Touchpoints with their surrounding product, e-commerce, or marketing sites.

Examples include:

  • Styling your in-product contextual help to match your product's UI design.
  • Branding your search Touchpoint on your marketing site to look like a native feature.

 

How to brand your Touchpoints


Before you get started, please note that you will require the following:

Step 1: Create your Touchpoints

  1. Navigate to your dashboard.
  2. Select the Touchpoints management page.
  3. Refer to the documentation for each individual to understand the use cases and functionality. Read about each Touchpoint type here.
  4. Select a Touchpoint to create.


     
  5. Fill out the necessary fields.
  6. Within the configuration fields, you will see a field for custom CSS. You don't have to fill this out yet.
  7. Save your Touchpoints.

 

Keep in mind to include a hostname where you are comfortable testing the Touchpoint. You will need an environment where you can embed the Touchpoint and see how the changes you make to branding affect its look and feel.

If you are looking to brand a Touchpoint that you've already deployed, we recommend that you create a separate Touchpoint first to test your branding. Once you have finalized that, simply copy and paste the CSS into the branding field of your deployed Touchpoint.

Step 2: Embed your Touchpoint as a test

  1. Copy your embed code for the Touchpoint and place it in your test environment. It should function as normal with no branding.
  2. Keep this environment and Touchpoint available as you go to the next step and build out your CSS branding.

This image shows contextual help unbranded.

Step 3: Create CSS to brand your Touchpoint

At this point, you will need to reference the targetable elements of Touchpoints. You can view the list here.

  1. Using your preferred text editor, write your branding CSS.
  2. When you are finished, go back to the Touchpoint you generated earlier in the management page.
  3. Edit the Touchpoint and paste the CSS into the custom CSS field.

This image shows the branding UI in the Touchpoint management page

  1. Hit save.
  2. Go back to your embedded Touchpoint and see how the CSS has affected your branding.

This image shows contextual help branded with basic styling.

  1. If changes need to be made, repeat this process until you achieve the look and feel desired.

This may take some initial time and resource dedication to get the branding just right. However, once your initial branding is completed, you should be able to repurpose the CSS to other Touchpoints as well as account for slight branding changes your company might make in the future.

 

Step 4: Deploy your branded Touchpoint

Now that your Touchpoint is properly branded, it can be deployed as your use case requires.

 

 

  • Was this article helpful?