Checklists are onboarding contents containing a list of guides organizedly. They are generally placed on dashboards to assist and support end-users. In this article, we will show you how to create an onboarding checklist for your web application.
How to Create an Onboarding Checklist?
Before starting to create checklists, 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 checklist.
- Be sure to set the same container for guides and the checklist.
- Guides' triggering methods are set to the custom trigger and their status' are active.
Important: Triggering a guide from a checklist is one of the custom trigger methods for your guides.
Important: If the guide you placed inside a checklist is not active, it won't be visible in the live version of the checklist until you activate the guide too.
Note: The following checklist is created for our sample platform called "Playground UserGuiding".
Creating an Onboarding Checklist:
- 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.
You will open the page in which checklists and help centers are created.
- Give your checklist a distinct name, easy to recognize.
- Keep its status inactive until you finish creating it.
- Continue with the checklist format. (it's the default)
- If you want checklist guides to be utilized respectively, unlock checklist items in an order.
- 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.
6. Define a specific title and, (7) a subtitle for your checklist.
- Select a container code for the checklist.
Important: Your web application must contain this code to display the checklist. And guides should be in the same container with their checklist.
We select the playground container for this tutorial since it is the dashboard we want this checklist to be visible.
- Next, we’ll decide on which guides will go inside the checklist.
- Open the dropdown containing the guides.
- Add guides into the checklist by clicking on their name. Check the preview and see when guides are added.
- Continue by adding the rest of the guides you want to add.
- If you want to change their order, just drag them by the names and drop them.
Since this is a checklist, there must be a condition for guides to be considered completed and got checked. By default, if a guide is seen by a user, it means the guide reached its goal and can win the thick.
- To set custom goals for guides, click on Guide Seen.
- In the opening window, you can switch to the Goal Reached to set a new goal to condition the guide.
As you might have noticed, conditioning is exactly the same as in creating segments. If not, to learn about Segmentation Properties and Rules, click here.
- In this example, we continue with the default setting.
- Next, define a targeting page for the checklist 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 the checklist. This one is visible for all users.
- You can start designing the appearance of your checklist 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 checklist 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 Checklist Launcher, check this article out.
- You can check the final look of your checklist.
Important: If you want to turn it to a Help Center, come back to the top of the page. Change its format and titles from checklist to Help Center.
- Activate the checklist status, save it and publish it on your platform.
- Go to your web app where you target the checklist and refresh the page. You'll find your live checklist there.
- Trigger its first guide and complete it.
- Notice how the checklist progress bar is filled up.