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).

Example checklist builder

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).

Example checklist

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:

Flow 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.

Flow completion

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).

Got questions? We're here for you!

The best way to get help is to
We usually reply within 5 minutes
You can also send an email to support@userflow.com
We usually reply within a few hours