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 from 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

On the page where you installed the snippet, 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 the snippet is on the page.