Help Centers are support widgets containing a list of guides organizedly. They are generally placed on dashboards to provide 7/24 automated-continuous-support for end-users.
Guides in a help center can be triggered if you click onto their names. By following the guide's lead, end-users can complete any task that is pre-prepared for them.
In this article, we will show you how you can, too, create a help center for your web application.
Since Help Centers are different versions of Checklists, you can also watch How to Create Checklists - Video Tutorial to learn to create Help Centers
How to Create a Help Center?
Before starting to create help centers, make sure you've done the followings:
- Login panel.userguiding.com and downloaded the Chrome Extension of UserGuiding.
- Create the guides which you want to display inside a help center.
- Be sure to set the same container for guides and the help center
- Guides' triggering methods are set to the custom trigger and their status' are active.
Important: Triggering a guide from a help center is one of the custom trigger methods for your guides.
Important: If the guide you placed inside a help center is not active, it won't be visible in the live version of the help center until you activate the guide too.
Note: The following help center is created for our sample platform called "Playground UserGuiding".
Creating a Help Center:
If you follow the below steps, you can open the page in which checklists and help centers are created.
Here, you will find the default setting for a Checklist but by simply changing its Format to Help Center and editing, you can create a Help Center
- Find the Checklists under the “Content” section in the left-hand menu.
- Click on and arrive on the checklist page.
- Then, click + New Checklist button.
- Give your help center a distinct name, easy to recognize.
- Keep its status inactive until you finish creating it.
- Select the Help Center format.
- The search function can be on or off.
If it’s on, you will be able to edit the writing on the search bar placeholder and no matching results message.
5. Write down a specific title and, (6) a subtitle for your help center.
7. Select a container code for the help center.
Important: Your web application must contain this code to display the help center. And guides should be in the same container with their help center.
We selected the playground container for this tutorial since it is the sample dashboard we want this help center to be visible.
- Next, we’ll decide on which guides will go inside the help center.
- Open the dropdown containing the guides.
- Add guides into the help center by clicking on their name. Check the preview and see when guides are added.
- Next, define a targeting page for the help center to decide on which pages you want it to be visible. Here, it's set to all the pages the playground dashboard has.
- Then choose the user segment who can see it. This one is visible to all users.
- You can start designing the appearance of your help center starting from the primary and secondary color settings.
- Then, set a custom font for its content. To learn how to set a custom font, check this article out.
We position a help center on the page through its launcher.
- Lastly, the launcher image, color, size, and position all can be re-designed and previewed on this point. To learn how to use the proper image settings for your Help Center Launcher, check this article out.
- You can check the final look of your help center.
Important: If you want to turn it to a Checklist, come back to the top of the page and change its format.
- Go back to the top of the page and activate the help center, save it, and publish it on your platform.
- Go to your web app where you target the help center and refresh the page. You'll find your live help center there.
- Trigger any guide to test it.
Important: If you can't see the Help Center Launcher on its target page, check if you have any active ad blockers. If yes, inactivate them and refresh the page to see your help center.