Install via npm
Updated June 4, 2026
On this page
To make published onboarding guides visible to your users, you need to install the FlowNavi SDK in your app. This article covers the full npm setup including passing custom user and company properties used for segmentation and analytics.
You’ll need your project’s API key from the dashboard.
Install the package
Install the FlowNavi SDK via npm:
npm install @flownavi/sdkInitialize the SDK
Call FlowNavi.init once at your app’s entry point:
Replace YOUR_API_KEY with your key:
import { FlowNavi } from "@flownavi/sdk";
FlowNavi.init({ apiKey: "YOUR_API_KEY" });Pass debug: true for non-production environments to keep test events out of your analytics. Guides still run normally, only the analytics writes are skipped:
import { FlowNavi } from "@flownavi/sdk";
FlowNavi.init({
apiKey: "YOUR_API_KEY",
debug: true
});Identify users
Call FlowNavi.identify with the user ID your app uses for the signed-in user:
FlowNavi.identify("USER_ID_FROM_YOUR_APP");Without this call, your onboarding guides won’t show. You can call identify again whenever a user’s properties change. More on properties below.
Pass user properties
To show different onboarding guides to different users, pass a second argument to identify with attributes about who the user is:
FlowNavi.identify("USER_ID_FROM_YOUR_APP", {
role: "admin",
department: "sales",
signedUpAt: "2026-01-15"
});Properties are arbitrary key-value pairs. We recommend naming them however your app already names them.
Supported value types:
| Type | Examples |
|---|---|
| Strings | "admin", "sales" |
| Numbers | 25, 1.5 |
| Dates (ISO) | "2026-01-15", "2026-01-15T10:00:00Z" |
Don’t send personally identifiable information (email, name, or phone number) as properties. Stick to attributes you want to use for targeting and segmentation.
Pass company properties
You can optionally pass the user’s company data by nesting a company object in the identify call.
FlowNavi.identify("USER_ID_FROM_YOUR_APP", {
role: "admin",
department: "sales",
signedUpAt: "2026-01-15",
company: {
id: "COMPANY_ID_FROM_YOUR_APP",
plan: "pro",
seatCount: 25
}
});company.id is required when you pass a company object. Use the same ID your app uses internally. Everything else is arbitrary, with the same supported value types as user properties: strings, numbers, and ISO date strings.
Verify the installation
On any page in your app, click the FlowNavi extension icon in your browser bar. The popup shows FlowNavi SDK is installed on this page when it’s working. If you see a warning instead, double-check your initialization code runs on app start.