Floating checklist

This example showcases a custom floating checklist component that is displayed in the bottom-right corner of the screen. The checklist provides users with suggested setup actions to help them get started with the application.

A solid user onboarding checklist includes:

• Achievable tasks - users should be able to complete the tasks in a reasonable amount of time.
• A progress bar - visible progress keeps users motivated.
• Action-oriented language - use Create a project instead of Project.
• Steps that lead to value - the checklist should guide users to the most valuable features.
• Not too many steps - avoid overwhelming users. Break long checklists into smaller stages if needed.
• Initial momentum - mark some easy tasks as completed to give users a sense of accomplishment from the start.

Features

When a user signs up, the floating checklist appears in the bottom-right corner. Tasks are marked as completed once the user fulfills the required conditions.

Progress tracking

Progress tracking is handled by the state memory property. The state memory property is used to store the state of the checklist and update it when a task is completed. It can be triggered when user completes a selected block or when they click a button.

For example:

• The first checklist item is completed when the user finishes the Create issue tour.
• The last item is marked complete when the user clicks Create project in the checklist.
• Users can skip any step by clicking Skip step.

Workflow setup

Below is a screenshot of how the workflow is set up in Flows:

Checklist items setup

Each checklist item includes the following properties:

• Title
• Description
• Button label
• Optional url to navigate to - navigates to a URL when the user clicks the button
• Optional block trigger - starts a block when the user clicks the button
• State memory - condition to mark the item as completed

Create issue tour setup

This example tour is triggered when the user clicks Create issue. The related checklist item is completed once the tour finishes.

Modal setup

This example block is triggered when the user clicks Invite team. The checklist item is marked complete once the modal is closed.

Getting started

1. Sign up for Flows if you haven’t already. You can create a free account here.
2. Clone the repository from GitHub and install the required dependencies in the project directory.
3. Add your organization ID in the providers.tsx file.
4. Create a new block template in your organization with the following configuration:
   • UI component: Checklist
   • Slottable: false
   • Custom properties:
     • Widget title
     • Popup title
     • Popup description
     • Items: array
     • Title
     • Description
     • Button label
     • Navigate to page
     • Start a block when clicked: block trigger
     • Mark as completed: state memory
   • Exit nodes:
     • complete
     • close
5. Recreate the workflow in your organization and publish it.
6. Run the development server with pnpm dev.

Learn more

To learn more about Flows take a look at the following resources:

• Flows documentation
• Join our community