Install via script tag

To make published onboarding guides visible to your users, you need to install the FlowNavi SDK in your app. This article covers the full script-tag setup including passing custom user and company properties used for segmentation and analytics.

You’ll need your project’s API key from the dashboard.

Add the 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>

For non-production environments, use the version below instead. It appends &debug=true to the script URL to keep test events out of your analytics. Guides still run normally, only the analytics writes are skipped:

<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&debug=true",a.head.appendChild(e)}}(window,document);</script>

Identify users

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

window.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:

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.

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