Usertour.js Installation
Before your users can see the content you build, you need to install Usertour.js in your web app.
Usertour.js is a tiny piece of JavaScript code (~20 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 2 quick steps:
Step 1: Install Usertour.js
Usertour.js can be installed in one of 2 ways:
- Browser apps using module bundlers (such as Webpack or Rollup)
- Other browser apps and Google Tag Manager
Npm installation
We recommend installing Usertour.js using the usertour.js npm package.
First, run this in your Terminal:
npm install usertour.jsImport and use the usertour object from the usertour.js module:
import usertour from 'usertour.js';
usertour.init('USERTOUR_TOKEN');
usertour.identify('USER_ID', {
name: 'USER_NAME',
email: 'USER_EMAIL',
signed_up_at: 'USER_SIGNED_UP_AT',
});Important: Make sure to replace the placeholders with real, dynamic values from your app! See Step 2.
HTML snippet installation
Copy-paste the folloidfsafawing snippet into your HTML document before the ending tag:
<script>
!function(){var e,r="undefined"==typeof window?{}:window,n=r.usertour;if(console.log("enter npm backage, usertour:",n),!n){var o="https://js.usertour.io/";console.log("enter npm backage: ",o);var t=null;n=r.usertour={_stubbed:!0,load:function(){return t||(t=new Promise((function(e,n){var u=document.createElement("script");u.async=!0;var a=r.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]],n=0;n<r.length;n++){var o=r[n],t=o[0],u=o[1],a=o[2];if(e.match(t)){var i=e.match(new RegExp(u));if(i&&parseInt(i[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(u.type="module",u.src=a.USERTOURJS_ES2020_URL||o+"es2020/usertour.js"):u.src=a.USERTOURJS_LEGACY_URL||o+"legacy/usertour.iife.js",u.onload=function(){e()},u.onerror=function(){document.head.removeChild(u),t=null;var e=new Error("Could not load Usertour.js");console.warn(e.message),n(e)},document.head.appendChild(u)}))),t}};var u=r.USERTOURJS_QUEUE=r.USERTOURJS_QUEUE||[],a=function(e){n[e]=function(){var r=Array.prototype.slice.call(arguments);n.load(),u.push([e,null,r])}},i=function(e){n[e]=function(){var r,o=Array.prototype.slice.call(arguments);n.load();var t=new Promise((function(e,n){r={resolve:e,reject:n}}));return u.push([e,r,o]),t}};a("init"),a("off"),a("on"),a("reset"),i("endAll"),i("group"),i("identify"),i("identifyAnonymous"),i("start"),i("track"),i("updateGroup"),i("updateUser"),e=!1,n["isIdentified"]=function(){return e}}}();
usertour.init('USERTOUR_TOKEN');
usertour.identify('USER_ID', {
name: 'USER_NAME',
email: 'USER_EMAIL',
signed_up_at: 'USER_SIGNED_UP_AT',
});
</script>Important: Make sure to replace the placeholders with real, dynamic values from your app! See Step 2.
Step 2: Replace placeholders
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.
That’s it! Your Usertour installation is ready.
Optional: Add custom attributes
Usertour.js supports sending custom attributes: Key-value pairs of data such as user role or other preferences. See Usertour.js Reference for how to use attributes.
Optional: Install Usertour for uauthenticated users
Running usertour.identify() is a mandatory part of the script. But if you want to show Usertour content on public pages to users who are not yet signed into your application, you can install the script on those pages and replace usertour.identify() with usertour.identifyAnonymous(). With this function Usertour.js will automatically assign the current user a unique ID. But note that they will count as users in the MAU balance.
