​
Step 1: Add the Userpilot Snippet to Your Web App

The first step is technical, but it’s quick: you need to install the Userpilot JavaScript snippet into your application. This snippet is what connects your app to Userpilot, allowing us to track users, render experiences, and power your analytics. You have a few installation options:
  • Manually via your app’s codebase
  • Through Google Tag Manager
  • Using Segment, if that’s already part of your stack
Screenshot2025 08 18at12 39 41 Pn
Once installed, you’ll be able to verify it in your Userpilot dashboard and start seeing live user activity. We recommend looping in your dev team here, it’s a one-time task.Installation Instructions
While your engineering team completes the installation, you can proceed with installing the Chrome extension to ensure you’re ready to start building as soon as setup is complete.

​
Step 2: Install the Chrome Extension

This step is crucial and often overlooked: install the Userpilot Builder Chrome Extension. This extension is your control panel for everything visual in Userpilot. It lets you:
  • Build flows, spotlights, banners, and buttons directly on your web app
  • Label an event with no code
  • Preview how things look before launching
You can’t create in-app messages without this. So, before you even think about onboarding experiences, get the extension installed and ready.Install the Builder Extension
Screenshot 2025-08-18 at 12.41.44.png

​
Step 3: Send in Your User and Company Data

To deliver the right experiences to the right users, Userpilot needs context. That’s where your user and company data come in. You’ll want to send:
  • User-level data like: user ID, email, role, signup date, and plan
  • Company-level data like: company name, account ID, size, MRR, industry
Why this matters: You’ll use this data to segment users, trigger flows, and analyze performance later. You can pass this through the snippet, via Segment, or through our API.How to Set Up User & Company Properties
Segmentstableview Conditionsclosed Pn

​
Step 4: Track Events and label an event

You want to know who did what and when. Start labeling events and defining key ones. There are three ways to do this:
  1. Tag UI elements visually using the Chrome extension. For example, tag a “Create Report” button or a “Billing” tab.
Screenshot2025 08 18at12 27 10 Pn
  1. Label an event using CSS by adding the element’s CSS selector to start tracking it. If you don’t have the selector or find it difficult to get, no worries, you can ask your dev team for help or reach out to us via chat
  2. Track event programmaticlly like “Upgraded to Pro Plan” or “Completed Onboarding” by pushing them via code
Screenshot2025 08 18at12 28 06 Pn
These events power targeting, reporting, and personalization. The more intentional your event setup, the better your insights will be later. Labeled Events (Visually/CSS)

​
Step 5: Create Your First Flow

Flows are in-app experiences that guide users through your product. Think of them as conversations timed just right, based on what your user is doing or needs to do next. Examples include:
  • A tooltip that shows when a user hovers over a new feature
  • A multi-step modal that introduces your app to first-time users
  • A slideout that nudges users to finish the setup
With the visual builder, you can:
  • Pick your format: modals, slideouts, spotlights, tooltips, driven actions, banners, or buttons
  • Choose who sees it and when
  • Launch it without touching the code
Build Your First Flow Disabledlogictab.png

​
Step 6: Use Checklists and Surveys

Once you have flows, take it a step further by layering in checklists and surveys. Checklists help users complete a series of actions, like finishing onboarding, setting up integrations, or publishing their first campaign. They’re great for encouraging completion and reducing time-to-value. Checklists Guide Screenshot2025 08 18at12 48 39 Pn Surveys help you learn. You can ask:
  • CSAT: How satisfied are you with this feature?
  • CES: How easy was this task?
  • NPS: Would you recommend us
Create a Feedback Survey Screenshot2025 08 18at12 49 46 Pn

​
Step 7: Review Your Analytics

You’ve launched experiences. Now it’s time to measure impact. Inside the Analytics tab, you’ll find:
  • Flow analytics: who saw it, who finished it, where people dropped off
  • Feature usage: which features are being used and by whom
  • Funnels and paths: user journeys from signup to key milestones
  • Retention cohorts: who keeps coming back, and why
2 Pn Use this data to iterate, refine, and discover where users are getting stuck or succeeding. How to Use Userpilot Analytics

​
Step 8: Customize Your Workspace

As your team scales, you’ll want to set up your workspace properly:
  • Invite team members and assign roles
  • Use staging vs. production environments to test before going live
  • Brand your flows to match your product’s look and feel
  • Set visibility rules for different flows per environment
This helps you stay organized, compliant, and on-brand as you grow.

​
Explore What’s Next

You’ve got the basics down. Here’s what you might explore next:
  • A/B testing your flows to find what converts best
  • Creating onboarding paths for different personas
  • Setting goals to track flow impact against KPIs
  • Building a resource center that lives inside your app
Each of these features helps you take your product experience to the next level.

​
Need Help Along the Way?

We’ve got your back:
  • Reach out through chat support in the Resource Center within the Userpilot web app
  • Book a free onboarding session if you want a guided setup
You’re now ready to build product experiences that convert, retain, and delight without writing a line of code.