Onboarding hub

This example showcases an onboarding hub with a checklist powered by @flows/react

An onboarding hub is a home in your app for onboarding and help resources. They’re super flexible and could include a getting started checklist, general tips for the best next step, and entry points to interactive tours, documentation, and support. The onboarding hub typically has a permanent place in the navigation until dismissed or completed.

When to use

Products where the user needs more content, support, and documentation to setup the product and reach their aha moment, such as developer tools, financial tools, and some collaborative apps and marketing tools.

Why it works

Since the most important resources are centralized, the user knows where to go for the next steps or if they get stuck. The pattern gives you the flexibility to create the experience, content, and entry points that are best for your users and product. Since it’s integrated into the navigation and pages, it doesn’t distract users from completing their tasks.

Possible drawbacks

Since the hub is its own space, it is not contextual to the user’s flow in the product (but it could provide entry points to contextual experiences).

Features

When a user open the application, they are greeted with a sidebar widget that calls out the getting started page. The user can click on the widget to open the onboarding hub, which contains a checklist of suggested setup actions, a button to launch a product tour, and a list of useful links to documentation and support resources.

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

Sidebar widget setup

The sidebar widget has two objectives: to call out the onboarding hub and to inform the user of their progress in the onboarding process. The widget loads the checklist state from Flows and displays the number of completed items. When the user clicks on the widget, it opens the onboarding hub.

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. Recreate the workflow in your organization and publish it.
5. 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