Migrating to Flows 2

This guide details the changes and how to migrate your onboarding flows to Flows 2. Read the full announcement on our blog.

Key changes

Workflows

Flows 2 introduces workflows, enabling you to create complex, multi-step experiences across sessions and the entire user lifecycle. Workflows are more versatile than original flows and can function independently of user interaction.

Flow is now a Tour

For step-by-step guides to specific tasks, use a tour within a workflow. Tours work similarly to old flows but offer special features, making them ideal for linear user journeys.

Pricing changes

We’re transitioning from a “Monthly Started Flows” model to a “Monthly Tracked Users (MTU)” model. This means you’ll pay based on the number of users initialized in a given month, with unlimited workflows included. For full details, visit our pricing page.

Projects are deprecated

Flows 2 removes the concept of “projects”. If you have projects in Flows 1, you can still access them to migrate your flows. Use environments or separate organizations to manage project isolation.

Styling

Flows 2 does not support adding custom CSS in Flows Cloud. To customize components, use:

1. Custom components for full flexibility.
2. Built-in styles by extracting and modifying index.css from @flows/react-components package.

How to migrate

1. Install the new SDK

Intall @flows/react package or update @flows/js to the latest version.

npm install @flows/react

pnpm add @flows/react

yarn add @flows/react

bun add @flows/react

Refer to the getting started guide and React SDK docs, JS SDK docs for setup details.

2. Use built-in components

In Flows 2, you can create custom UI components and use them in your workflows. To make the transition easier, we have created a set of built-in components. These components keep the most common use cases in mind, if you need different features, create your own custom components. To use the built-in components install the @flows/react-components package.

npm install @flows/react-components

pnpm add @flows/react-components

yarn add @flows/react-components

bun add @flows/react-components

Then import and use the components in your app.

import { FlowsProvider } from "@flows/react";
import * as components from "@flows/react-components";
import * as tourComponents from "@flows/react-components/tour";
import "@flows/react-components/index.css";
 
const App = () => {
  return (
    <FlowsProvider
      organizationId="your-organization-id" // Find in Settings > General
      environment="production" // Default environment
      tourComponents={{
        ...tourComponents,
      }}
      components={{
        ...components,
      }}
    >
      {/* Your app code here */}
    </FlowsProvider>
  );
};

3. Add custom components

Flows 2 supports custom components for greater flexibility. Create components in your app, pass them to FlowsProvider, and use them in workflows. For more information, see the custom components guide.

SDK deprecated functions

Have questions or need help migrating? Contact us via hello@flows.sh or join the Slack community.