Userpilot Installation Quickstart

Follow these steps to quickly integrate Userpilot into your web application and ensure a smooth setup.

1. Choose an Installation Method

You can install Userpilot using:

JavaScript Snippet – Directly embed Userpilot in your app.
Segment Integration – If you’re already using Segment.
Google Tag Manager (GTM) – Deploy Userpilot via GTM.

2. Plan User & Company Properties + Events

Before installing Userpilot, decide: ✅ User Properties – What user data will help segment and personalize experiences? (e.g., name, email, signup date).
✅ Company Properties – If you’re working with teams, what company data should be tracked? (e.g., company name, plan type).
✅ Tracked Events – What key actions should be monitored in Userpilot? (e.g., button clicks, feature usage). Define these before implementation for an optimal setup.

3. Install Userpilot via JavaScript

Step 1: Add the Script

Place this in the <head> section of every page:

html

<script>window.userpilotSettings = {token: "Your_App_Token"};</script>
<script src="https://js.userpilot.io/sdk/latest.js"></script>html

Replace "Your_App_Token" with your actual App Token from the Userpilot dashboard.

Step 2: Identify Users

Multi-Page Applications (MPAs) – Call userpilot.identify() on each page load.
Single Page Applications (SPAs) – Call userpilot.identify() once after authentication.

userpilot.identify("USER_ID", {
  name: "John Doe",
  email: "john@example.com",
  created_at: "2025-03-17",
  company: {
    id: "COMPANY_ID",
    name: "Acme Inc.",
  },
});

Step 3: Reload on Route Change (For SPAs)

const location = useLocation();
React.useEffect(() => {
  userpilot.reload();
}, [location]);

Step 4: Track Key Events

userpilot.track("Clicked purchase button");

4. Set Up Production & Staging Environments

To ensure a smooth testing and deployment process, configure separate environments for production and staging. Learn how to set up staging and production tokens in this guide.

5. Ensure Security with Content Security Policy (CSP)

If your app enforces Content Security Policy (CSP), add the required domains to your CSP settings. Follow the Userpilot CSP Guide to prevent issues.

Following these steps ensures a smooth and secure integration of Userpilot. 🚀 Need more details? Check out the full installation guide.

Userpilot Overview

Welcome to Userpilot

Users and Companies

Data and Events

Chrome Extension Basics

In App Engagement

Workflows

Product Analytics

User Feedback

Session Replay

AI

Admin Console

Configure

Reference

1. Choose an Installation Method

2. Plan User & Company Properties + Events

3. Install Userpilot via JavaScript

Step 1: Add the Script

Step 2: Identify Users

Step 3: Reload on Route Change (For SPAs)

Step 4: Track Key Events

4. Set Up Production & Staging Environments

5. Ensure Security with Content Security Policy (CSP)

​1. Choose an Installation Method

​2. Plan User & Company Properties + Events

​3. Install Userpilot via JavaScript

​Step 1: Add the Script

​Step 2: Identify Users

​Step 3: Reload on Route Change (For SPAs)

​Step 4: Track Key Events

​4. Set Up Production & Staging Environments

​5. Ensure Security with Content Security Policy (CSP)

1. Choose an Installation Method

2. Plan User & Company Properties + Events

3. Install Userpilot via JavaScript

Step 1: Add the Script

Step 2: Identify Users

Step 3: Reload on Route Change (For SPAs)

Step 4: Track Key Events

4. Set Up Production & Staging Environments

5. Ensure Security with Content Security Policy (CSP)