Userpilot Installation Quickstart

Quick installation of Userpilot, user and event tracking setup, environment configuration, and security best practices.

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: "[e-mail]",
  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.