Install the FlowNavi SDK

To make published onboarding guides visible to your users, you need to add a small code snippet to your app.

You’ll need your project’s API key. It’s on the Flows page of the dashboard.

There are two ways to install: with a script tag or via npm.

Install with a script tag

Paste this snippet before the closing </head> tag of your app.

Replace YOUR_API_KEY with your key:

<script>!function(i,a){if(!i.FlowNavi){var n=[];i.FlowNavi={q:n},i.FlowNavi.identify=function(i,a){n.push(["identify",[i,a]])},i.FlowNavi.emitEvent=function(i){n.push(["emitEvent",[i]])};var e=a.createElement("script");e.async=!0,e.src="https://sdk.flownavi.com/flownavi.js?apiKey=YOUR_API_KEY",a.head.appendChild(e)}}(window,document);</script>

Then call window.FlowNavi.identify with the user ID your app uses for the signed-in user:

window.FlowNavi.identify("USER_ID_FROM_YOUR_APP");

Without this call, your onboarding guides won’t show.

For the full setup (passing custom user and company properties), see Install via script tag.

Install with npm

npm install @flownavi/sdk

Then initialize the SDK.

Replace YOUR_API_KEY with your key:

import { FlowNavi } from "@flownavi/sdk";

FlowNavi.init({ apiKey: "YOUR_API_KEY" });

Then 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.

For the full setup (passing custom user and company properties), see Install via npm.

Verify the installation

Deploy the change, then open your app and sign in. FlowNavi registers the installation the first time your app calls identify for a signed-in user.

Then open the Flows page in the dashboard and click Test installation. Once the installation is registered, the page shows FlowNavi is installed.

If FlowNavi isn’t detected, check that identify runs after sign-in with a user ID, and that the API key is the one from your project.