Flows docs are in early stages and not everything is documented yet. If you have any questions, please reach out to us [email protected].
Getting started
Install Flows

Install Flows

Install the Flows SDK library via a NPM package manager.

npm i @flows/js

Create Flows component and initialize it with your project ID.

"use client";
 
import { init } from "@flows/js";
import { useEffect } from "react";
 
export const Flows = () => {
  useEffect(() => {
    init({
      // Insert your Flows Cloud projectId
      projectId: "xxxx",
    });
  }, []);
 
  return null;
};

Lastly don't forget to render the Flows component in the root of your application (layout.tsx or App.tsx). When that's done, you can start creating onboarding flows and launching them in your product.

Verify installation

To verify that Flows is installed correctly, you can add a demo flow to your project. This can be done either in Flows Cloud or directly in your code. We'll show you how to do it in your code.

Add the following code to your Flows init function. The demo flow will be started automatically when the Flows SDK is loaded on any page.

init({
  // --- ADD THIS ---
  flows: [
    {
      id: "hello-world",
      // Makes the flow start automatically on any page
      location: "/",
      steps: [
        {
          title: "Hello, world!",
          body: "This is a modal step, to show tooltip instead add <em>targetElement: '.my-element'</em> to this step.",
          // Uncomment and replace with your element selector to show a tooltip instead of a modal
          // targetElement: ".my-element",
        },
      ]
    }
  ]
  // --- END OF DEMO FLOW ---
 
  // Your projectId from previous step
  projectId: "...",
})

If everything is set up correctly, you should see a modal with the text "Hello, world!" when you open any page with Flows initialized. If it doesn't show up, please check the browser console for any errors.

Demo flow modal step preview

You should also see a new flow called hello-world in your Flows Cloud project. If you don't see it, try checking the browser console for any errors or make sure you are in the correct project.

Hello world flow in the Cloud with 1 start event