Overview
Checklists are onboarding contents containing a list of organized guides. They are generally placed on dashboards to assist and support end-users. This article will show you how to create an onboarding checklist for your web application.
How to Create Checklists?
Before starting to create checklists, make sure you've done the following:
Login to panel.userguiding.com and download 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 is active.
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, Playground UserGuiding.
Creating an Onboarding Checklist
Click on the Checklists option under the "Content" section in the left-hand menu.
Then, click on the + New Checklist button.
You will open the page on which checklists are created. You'll start with the Content tab.
Give your Checklist a distinct name, easy to recognize
Define a specific title for your Checklist
Define a subtitle for your Checklist
Choose if you want the progression option turned on (if it is off, you won't see the progress bar nor the option to checkmark your checklist items)
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.
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. Then, check the preview and see when guides are added.
You can change the name of the Guide that would be displayed in the Checklis as below:
Continue by adding the rest of the guides.
If you want to change their order, drag them using the arrows icon located on the left side of the Guide's name.
Since this is a checklist, there must be a condition for guides to be considered completed and checked. By default, if a user completes a guide, it means the Guide reached its goal and can win the tick.
To set custom goals for guides, click on Guide is Completed or on the pencil icon.
In the opening window, you can switch to Goal Reached to set a specific goal condition.
Note: You can use the browser and user attributes to set a goal condition for your Guide. If you want to learn how to send user attributes to UserGuiding, check this article.
In this example, we'll continue with the default setting.
Next, access the Configure tab and define a targeting page for the Checklist to decide which pages you want 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.
Set the appearance for the Checklist. In this example, when the end-user access the target URL, it will show already open (Open by Default option), and when all guides' goals are completed, it won't show anymore (Hide as Completed option).
Important: Your web application must contain our container code to display the Checklist. And guides should be in the same container with their Checklist.
Optionally, you may customize your Checklist design by accessing the Customize tab. The launcher image, color, size, custom font, position, and much more can be re-designed and previewed on this point.
Finally, activate the checklist status, save it, and publish it on your platform.
Go to your web app, where you targeted 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.
