Userflow.js Installation

In order for your users to your flows in your web app, you need to install Userflow.js.

Userflow.js is a tiny piece of JavaScript code (10 kB), which is loaded asynchronously in your web app, so it won't affect your page load speed.

The installation is simple and only requires 3 quick steps:

Step 1: Choose installation method

Userflow.js can be installed in one of two ways.

If you use a JavaScript module bundler (such as Webpack or Rollup), go to Step 2A.

Otherwise, go to Step 2B.

Step 2A: Npm installation

We recommend installing Userflow.js using the userflow.js npm package.

First, run this in your Terminal:

npm install userflow.js

Next, you need to run loadUserflow in your app somewhere after you have access to the user's details (id, name etc.). loadUserflow returns a promise, which resolves with the userflow object. See also Userflow.js API Reference.

Using CommonJS and Promises:

const {loadUserflow} = require('userflow.js')

loadUserflow().then(userflow => {
  userflow.init('YOUR_COMPANY_ID')
  userflow.identify('USER_ID', {
    name: 'USER_NAME',
    email: 'USER_EMAIL',
    signedUpAt: 'USER_SIGNED_UP_AT'
  })
})

Using ES6 modules and async/await:

import {loadUserflow} from 'userflow.js'

const userflow = await loadUserflow()
userflow.init('YOUR_COMPANY_ID')
userflow.identify('USER_ID', {
  name: 'USER_NAME',
  email: 'USER_EMAIL',
  signedUpAt: 'USER_SIGNED_UP_AT'
})

Then to go Step 3.

Step 2B: HTML installation

Only do this if you did not complete Step 2A.

Copy-paste the following snippet into your HTML document before the ending </body> tag:

<script type="text/javascript">
  (function(){var s=document.createElement('script');s.src='https://js.getuserflow.com/userflow.js';s.async=true;document.head.appendChild(s);s.onload=function(){
  userflow.init('YOUR_COMPANY_ID');
  userflow.identify('USER_ID', {
    name: 'USER_NAME',
    email: 'USER_EMAIL',
    signedUpAt: 'USER_SIGNED_UP_AT'
  });
  }})()
</script>

Step 3: Replace placeholders

In the code you copy-pasted above, replace YOUR_COMPANY_ID with your company's Userflow ID (which you can find under Settings).

Next, replace USER_ID with the currently signed in user's ID in your database.

The properties in userflow.identify's second argument are all optional. They're useful for looking up users in Userflow to e.g. see their flow progress, or to use in the flow content or conditions. If you don't want to share this with Userflow, feel free to leave out the argument completely.

That's it! Your Userflow installation is ready.

Optional: Custom traits

Userflow.js supports sending custom traits: Key-value pairs of data such as user role or other preferences. See Userflow.js API Reference for how to use traits.

Got questions? We're here for you!

The best way to get help is to
We usually reply within 5 minutes
You can also send an email to support@getuserflow.com
We usually reply within a few hours