Checklists are onboarding contents containing a list of organized guides. 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:
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: 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
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.
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.
4. Define a specific title and (5) a subtitle for your checklist.
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.
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 got checked. By default, if a user completes a guide, it means the guide reached its goal and can win the thick.
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 new goal to condition the guide.
As you might have noticed, conditioning is the same as in creating segments. If not, to learn about Segmentation Properties and Rules, click here.
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 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.
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 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.