Userflow.js Installation
Before your users can see the flows and other content you build, you need to install Userflow.js in your web app.
Userflow.js is a tiny piece of JavaScript code (~15 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 3 ways:
-
Browser apps using module bundlers (such as Webpack or Rollup)
- Go to Step 2A (npm installation)
-
Other browser apps
- Go to Step 2B (HTML snippet installation)
- Electron apps
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
Import and use the
userflow
object from the
userflow.js
module:
import userflow from 'userflow.js'
userflow.init('USERFLOW_TOKEN')
userflow.identify('USER_ID', {
name: 'USER_NAME',
email: 'USER_EMAIL',
signed_up_at: 'USER_SIGNED_UP_AT'
})
Then to go Step 3 .
Step 2B: HTML snippet 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>
!function(){var e,r=window,t=r.userflow;if(!t){var n="https://js.userflow.com/";t=r.userflow={_stubbed:!0};var o=r.USERFLOWJS_QUEUE=r.USERFLOWJS_QUEUE||[];function s(e){t[e]=function(){var r=Array.prototype.slice.call(arguments);l(),o.push([e,null,r])}}function a(e){t[e]=function(){var r,t=Array.prototype.slice.call(arguments);l();var n=new Promise((function(e,t){r={resolve:e,reject:t}}));return o.push([e,r,t]),n}}var i=!1;function l(){if(!i){i=!0;var e=document.createElement("script");e.async=!0;var t=r.USERFLOWJS_ENV_VARS||{};"es2020"===(t.USERFLOWJS_BROWSER_TARGET||function(e){for(var r=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/Safari\//,/Version\/(\d+)/,14],[/Firefox\//,/Firefox\/(\d+)/,74]],t=0;t<r.length;t++){var n=r[t],o=n[0],s=n[1],a=n[2];if(e.match(o)){var i=e.match(new RegExp(s));if(i&&parseInt(i[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(e.type="module",e.src=t.USERFLOWJS_ES2020_URL||n+"es2020/userflow.js"):e.src=t.USERFLOWJS_LEGACY_URL||n+"legacy/userflow.js",e.onerror=function(){i=!1,console.error("Could not load Userflow.js")},document.head.appendChild(e)}}s("_setTargetEnv"),s("init"),s("off"),s("on"),s("prepareAudio"),s("registerCustomInput"),s("remount"),s("reset"),s("setCustomInputSelector"),s("setCustomNavigate"),s("setCustomScrollIntoView"),s("setInferenceAttributeFilter"),s("setInferenceAttributeNames"),s("setInferenceClassNameFilter"),s("setScrollPadding"),s("setShadowDomEnabled"),s("setUrlFilter"),a("endAll"),a("endAllFlows"),a("endChecklist"),a("group"),a("identify"),a("identifyAnonymous"),a("startFlow"),a("startWalk"),a("track"),a("updateGroup"),a("updateUser"),e=!1,t["isIdentified"]=function(){return e}}}();
userflow.init('USERFLOW_TOKEN')
userflow.identify('USER_ID', {
name: 'USER_NAME',
email: 'USER_EMAIL',
signed_up_at: 'USER_SIGNED_UP_AT',
})
</script>
Step 3: Replace placeholders
In the code you copy-pasted above, replace
USERFLOW_TOKEN
with the Userflow.js Token you find under
Settings -> Environments
. Note that if you have multiple environments (e.g. Production and Staging) that each environment has a unique token.
Next, replace
USER_ID
with the currently signed in user’s ID in your database. Also replace
USER_NAME
,
USER_EMAIL
and
USER_SIGNED_UP_AT
with the user’s real values.
signed_up_at
should be specified in ISO 8601 format. Example:
2019-12-11T12:34:56Z
.
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 attributes
Userflow.js supports sending custom attributes: Key-value pairs of data such as user role or other preferences. See Userflow.js Reference for how to use attributes.