Install Flows
Install the Flows SDK library via a NPM package manager.
npm i @flows/jsCreate 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 starting 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.
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.
