Checklists
Checklists work great as the anchor of new users’ onboarding experience. If a user leaves your onboarding guide, they always have a chance to get back - or to pick other tours - using the checklist. Giving users a sense of progress also gives them a sense of fulfillment, which they’ll hopefully chase and get even more involved with your product.
How to build checklists
Checklists can be created from the Checklists page found in the sidebar. Checklists work in general a lot like regular flows, in that they can have auto-start conditions, are published and show up in your app through Userflow.js (no extra installation required).
You can add as many tasks as you want. Each task has a name, an optional subtitle, a completed condition and one or more actions. Example: Completed condition could be when users have created their first project in your app, and the action could be to start a tour showing the user how to do so.
What users see
Once a checklist is triggered for a user, it appears in the lower right corner (by default).
When a task is clicked, it’s actions, such as starting a flow or navigating to a page, are performed. If the user minimizes it, a launcher button (saying “Get started”) appears in the same corner, containing a circle with a number representing the number of tasks left to do.
When the user completes a task, the checklist is automatically shown and its checkmark is checked with a cool animation and the progress bar in the top is automatically updated as users complete tasks.
Completing a checklist task based on flow completion
To mark checklist tasks as completed when users have seen or completed a flow, you can set the following condition:
To ensure that a flow is considered completed, you also need to make sure that the flow itself has one or more completion steps toggled on.
Customizing the look and feel of your checklist
Like other Userflow content you can edit your Checklist and Checklist Launchers look-and-feel, as well as position in the theme editor. (Go to Settings -> Themes). Learn more about the theme editor
Checklist z-index
In some cases Checklists might show up on top of/below an object where you want it to be below/above. In such a case you can change the checklist z-index via the theme settings. Just go to your theme settings and change the z-index in the Checklist sections.
Dismissing a checklist
Users can dismiss a checklist by clicking on the Dismiss checklist on the bottom of the checklist. You can prevent users from dismissing a checklist by toggling the Prevent users from dismissing checklist found in the advanced settings of the checklist (below auto-start conditions).
