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
USERTOURJS_ES2020_URL: URL for the modern JavaScript bundle
USERTOURJS_LEGACY_URL: URL for the legacy JavaScript bundle

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