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 are created just like (step-based) flows, using the New Content button in Userflow. Just pick the new Checklist type here. 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
