​
Installing Usertour.js

Usertour.js is a lightweight JavaScript library (~20 kB) that loads asynchronously, ensuring it won’t impact your page load performance. Follow these simple steps to integrate it into your web application.

​
Installation Methods

You can install Usertour.js in two ways:
  1. For modern web applications using module bundlers (Webpack, Rollup, etc.)
  2. For traditional web applications or Google Tag Manager
If you’re using a self-hosted UserTour instance, you’ll need additional configuration to connect Usertour.js to your own server. See our Self-Hosted Usertour.js Guide for detailed setup instructions.

​
NPM Installation

We recommend installing Usertour.js using the usertour.js npm package. First, run this in your Terminal: 
npm install usertour.js
Then import and initialize it in your code: 
import usertour from 'usertour.js';

// Initialize the Usertour SDK with your environment token
usertour.init('USERTOUR_TOKEN');

// Identify the current user with their attributes
usertour.identify('USER_ID', {
  name: 'USER_NAME',
  email: 'USER_EMAIL',
  signed_up_at: 'USER_SIGNED_UP_AT',
});

​
HTML Snippet Installation

Add this script to your HTML file just before the closing </body> tag: 
!function(){var e="undefined"==typeof window?{}:window,r=e.usertour;if(console.log("enter npm backage, usertour:",r),!r){var t="https://js.usertour.io/";console.log("enter npm backage: ",t);var n=null;r=e.usertour={_stubbed:!0,load:function(){return n||(n=new Promise((function(r,o){var s=document.createElement("script");s.async=!0;var a=e.USERTOURJS_ENV_VARS||{};"es2020"===(a.USERTOURJS_BROWSER_TARGET||function(e){for(var r=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/CriOS\//,/CriOS\/(\d+)/,100],[/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))?(s.type="module",s.src=a.USERTOURJS_ES2020_URL||t+"es2020/usertour.js"):s.src=a.USERTOURJS_LEGACY_URL||t+"legacy/usertour.iife.js",s.onload=function(){r()},s.onerror=function(){document.head.removeChild(s),n=null;var e=new Error("Could not load Usertour.js");console.warn(e.message),o(e)},document.head.appendChild(s)}))),n}};var o=e.USERTOURJS_QUEUE=e.USERTOURJS_QUEUE||[],s=function(e){r[e]=function(){var t=Array.prototype.slice.call(arguments);r.load(),o.push([e,null,t])}},a=function(e){r[e]=function(){var t,n=Array.prototype.slice.call(arguments);r.load();var s=new Promise((function(e,r){t={resolve:e,reject:r}}));return o.push([e,t,n]),s}},i=function(e,t){r[e]=function(){return t}};s("init"),s("off"),s("on"),s("reset"),s("setBaseZIndex"),s("setSessionTimeout"),s("setTargetMissingSeconds"),s("setCustomInputSelector"),s("setCustomNavigate"),s("setCustomScrollIntoView"),s("setInferenceAttributeFilter"),s("setInferenceAttributeNames"),s("setInferenceClassNameFilter"),s("setScrollPadding"),s("setServerEndpoint"),s("setShadowDomEnabled"),s("setPageTrackingDisabled"),s("setUrlFilter"),s("setLinkUrlDecorator"),a("endAll"),a("group"),a("identify"),a("identifyAnonymous"),a("start"),a("track"),a("updateGroup"),a("updateUser"),i("isIdentified",!1),i("isStarted",!1)}}();

// Initialize the Usertour SDK with your environment token
usertour.init('USERTOUR_TOKEN');

// Identify the current user with their attributes
usertour.identify('USER_ID', {
  name: 'USER_NAME',
  email: 'USER_EMAIL',
  signed_up_at: 'USER_SIGNED_UP_AT',
});
</script>

​
Configuration

In the code you copy-pasted above, replace USERTOUR_TOKEN with the Usertour.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, dynamic values. signed_up_at should be specified in ISO 8601 format. Example: 2019-12-11T12:34:56Z. The properties in usertour.identify()‘s second argument are all optional. They’re useful for looking up users in Usertour 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 Usertour, feel free to leave out the argument completely.

​
Additional Features

​
Custom Attributes

You can send custom user attributes to Usertour.js for more personalized experiences. These can include:
  • User roles
  • Preferences
  • Custom metrics
  • Any other relevant user data

​
Anonymous Users

For public pages where users aren’t logged in, use usertour.identifyAnonymous() instead of usertour.identify(). This automatically generates a unique ID for anonymous users. Learn more about anonymous user identification →