Usertour.js Installation - Usertour documention

Overview

Usertour.js is the client-side SDK that enables you to:

Display interactive content (modals, tooltips, checklists, launchers) to your users
Track user behavior and send targeting information
Manage user properties and events for audience targeting

Installation Steps

1. Basic Installation

First, follow the standard installation guide to add Usertour.js to your website. This is a required step before proceeding with self-hosted configuration.

2. Self-Hosted Configuration

After completing the basic installation, you need to add the following configuration to connect Usertour.js to your self-hosted instance. Add this script to the <head> section of your HTML document:

<script>
  window.USERTOURJS_ENV_VARS = {
    // WebSocket connection URL
    WS_URI: "http://localhost:8011/",
    
    // Base URL for SDK assets
    ASSETS_URI: "http://localhost:8011/sdk/",
    
    // Modern JavaScript bundle (ES2020)
    USERTOURJS_ES2020_URL: 'http://localhost:8011/sdk/es2020/usertour.js',
    
    // Legacy JavaScript bundle (IIFE)
    USERTOURJS_LEGACY_URL: "http://localhost:8011/sdk/legacy/usertour.iife.js"
  };
</script>

3. Configure URLs

If you’re not using the default port (8011) or host (localhost), update the URLs in the configuration:

WS_URI: WebSocket connection URL
ASSETS_URI: Base URL for SDK assets — the serve root: the bundle appends its own /<version>/<target>/css/index.css path. If you serve a locally built apps/sdk/dist directly, do NOT point this at the version or target folder — the doubled path 404s the CSS and widgets render invisibly (0×0) with no console error.
USERTOURJS_ES2020_URL: URL for the modern JavaScript bundle
USERTOURJS_LEGACY_URL: URL for the legacy JavaScript bundle
USERTOURJS_BROWSER_TARGET (optional): "es2020" or "legacy" — force a bundle instead of the loader’s user-agent detection; only needed when the detection guesses wrong (unusual webviews)

4. Next Steps

After completing both the basic installation and self-hosted configuration, you can:

Initialize Usertour.js in your application
Configure user properties and events
Create and deploy content to your users

For detailed implementation guides, see our developer documentation.

​Overview

​Installation Steps

​1. Basic Installation

​2. Self-Hosted Configuration

​3. Configure URLs

​4. Next Steps