Examples library

Tour

Guide users along their journey through your product

Tour example application – Flows

This example showcases a product tour powered by @flows/react and the built-in components from @flows/react-components.

Tours are multi-step flows used to guide users through new, undiscovered, or changed products and features.

Good tours:

  • Are concise and direct (try to limit them to five steps).
  • Match the user’s context (don’t show a tour for a feature the user has already explored).
  • Use short, meaningful copy.

Features

When a user opens the application for the first time, they encounter a welcome modal, followed by a series of tooltips, a wait step, and a final modal. All the UI elements are built using the pre-packaged components from @flows/react-components.

Below is a screenshot demonstrating the workflow configuration for this Tour example:

Flows workflow setup for the Tour example

Welcome Modal

The welcome modal is defined using HTML in its body field. Flows renders HTML in any text-based input. The HTML is written using Tailwind CSS classes to style the content.

The intro modal setup for the Tour example

Full HTML for the welcome modal:

1<div class="max-w-[400px]">
2 <img
3 alt="Welcome image"
4 class="mb-4 w-full rounded-lg"
5 width="400"
6 height="213"
7 src="/welcome.png"
8 />
9 <p class="text-center text-lg font-semibold text-foreground">
10 Welcome to the tour example!
11 </p>
12 <p class="text-l text-center text-foreground">
13 This example shows how to use built-in components to create
14 a product tour with Flows.
15 </p>
16</div>
1<div class="max-w-[400px]">
2 <img
3 alt="Welcome image"
4 class="mb-4 w-full rounded-lg"
5 width="400"
6 height="213"
7 src="/welcome.png"
8 />
9 <p class="text-center text-lg font-semibold text-foreground">
10 Welcome to the tour example!
11 </p>
12 <p class="text-l text-center text-foreground">
13 This example shows how to use built-in components to create
14 a product tour with Flows.
15 </p>
16</div>

Tooltips

Subsequent steps use the TourTooltip component from @flows/react-components to highlight specific elements and actions.

  1. The first tooltip proceeds when the user navigates to a page containing /new-project.
  2. The second tooltip waits for the user to click one of the frameworks, identified by the #framework selector.
  3. The third tooltip allows navigation through standard tooltip buttons.
The tooltips setup for the Tour example

Wait step

After the tooltips, the flow pauses until the user returns to the home page. The location filter uses a regex pattern (^/$) to detect the home page URL.

The wait setup for the Tour example

Final modal

The final step presents another modal using the same approach as the welcome modal—HTML content styled with Tailwind classes.

The last modal setup for the Tour example

Full HTML for the last modal:

1<div class="max-w-[480px]">
2 <p class="mb-4 text-center text-6xl">🎉</p>
3 <p class="mb-1 text-center text-lg font-semibold text-foreground">
4 That's it!
5 </p>
6 <p class="text-l mb-3 text-center text-foreground">
7 This was a simple example of how you can use Flows to create
8 a user onboarding.
9 </p>
10 <p class="text-center text-sm text-foreground">
11 Looking for more customization? Flows is built to be a "Headless
12 product adoption platform," meaning you can build your own UI
13 components with custom styling and logic for a native experience.
14 </p>
15</div>
1<div class="max-w-[480px]">
2 <p class="mb-4 text-center text-6xl">🎉</p>
3 <p class="mb-1 text-center text-lg font-semibold text-foreground">
4 That's it!
5 </p>
6 <p class="text-l mb-3 text-center text-foreground">
7 This was a simple example of how you can use Flows to create
8 a user onboarding.
9 </p>
10 <p class="text-center text-sm text-foreground">
11 Looking for more customization? Flows is built to be a "Headless
12 product adoption platform," meaning you can build your own UI
13 components with custom styling and logic for a native experience.
14 </p>
15</div>

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:

This tour example demonstrates how quickly you can create a guided user onboarding flow with Flows. Feel free to explore more advanced configurations and styling to tailor the experience for your users.

Framework

Next.js

Tags

Adoption
Education
Engagement
Onboarding

Build anything with Flows