If you would like to educate your customer on your Help Center structure, think about guiding them through the interface using a step-by-step guide. This familiarizes your customers with the interface so they can utilize it effectively.
The solution in this article is inspired by IntroJS. The source code and additional information is available here http://usablica.github.io/intro.js/.
This is what we will have at the end. Now let's go through this step-by-step.
Download intro.js and introjs.css files attached to this article or use http://usablica.github.io/intro.js/ to find the latest version of the files.
Upload these files to your Help Center using Customise Design > Edit theme > Assets section.
In HTML: Document head, add the following code, which calls intro.js and introjs.css.
<!-- JSINTRO CSS file -->
<link href="//p1.zdassets.com/hc/theme_assets/201622/2836/introjs.css" rel="stylesheet" charset="utf-8" />
Now it's time to choose the elements that will be included in your step-by-step guide. Use the HTML part in Help Center editor to add the following string:
data-step='STEP NUMBER' data-intro='MESSAGE'
In the current example the following HTML was used.
<header class="header" data-step='1' data-intro='This is header. Blue header. This header is a step one.'>
<div class="knowledge-base" data-step='2' data-intro="This is what we call knowledge base.">
<div class="community" data-step='3' data-intro="This is Community. Derivative from Communism.">
There are number of ways you can call the IntroJS function. I recommend you add a link that will initiate the guide so customers will be able to choose the best time to get familiar with the Help Center interface.
Code below places a "Show intro" link next to the language selector. This code goes into JS section of Help Center editor.
// add link for initiating intro
$(".language-selector").append( "<a href='#' onclick='introJs().start()' class='my-activities;'>Show intro</a>" );
Save and publish all changes.
Enjoy the step-by-step guide!