> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usertour.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

# 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.)
   * [NPM Installation](#npm-installation)

2. **For traditional web applications** or Google Tag Manager
   * [HTML Snippet Installation](#html-snippet-installation)

<Note>
  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](/open-source/usertourjs) for detailed setup instructions.
</Note>

### NPM Installation

We recommend installing Usertour.js using the [usertour.js npm package](https://www.npmjs.com/package/usertour.js).

First, run this in your Terminal:

```bash theme={null}
npm install usertour.js
```

Then import and initialize it in your code:

```javascript theme={null}
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:

```html theme={null}
!function(){var e="undefined"==typeof window?{}:window,r=e.usertour;if(!r){var t="https://js.usertour.io/",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 i=e.USERTOURJS_ENV_VARS||{};"es2020"===(i.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],i=n[2];if(e.match(o)){var u=e.match(new RegExp(s));if(u&&parseInt(u[1],10)>=i)return"es2020";break}}return"legacy"}(navigator.userAgent))?(s.type="module",s.src=i.USERTOURJS_ES2020_URL||t+"es2020/usertour.js"):s.src=i.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])}},i=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}},u=function(e,t){r[e]=function(){return t}};s("disableEvalJs"),s("init"),s("off"),s("on"),s("registerCustomInput"),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"),s("openResourceCenter"),s("closeResourceCenter"),s("toggleResourceCenter"),s("showResourceCenterLauncher"),s("hideResourceCenterLauncher"),i("endAll"),i("group"),i("identify"),i("identifyAnonymous"),i("start"),i("track"),i("updateGroup"),i("updateUser"),u("isIdentified",!1),u("isResourceCenterOpen",!1),u("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](https://app.usertour.io/project/1/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 →](/developers/usertourjs-reference/users/identify-anonymous)