> ## Documentation Index
> Fetch the complete documentation index at: https://developers.autoplay.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Userpilot — How to setup

> Trigger a Userpilot flow from the Autoplay event stream.

<Note>
  Autoplay streams structured UI actions from your users' browser sessions in real time. This tutorial wires that stream to Userpilot so that when the right moment arrives — a user stuck on a page, a first-time feature visit, a repeated error — your backend detects it and fires the correct Userpilot flow immediately.
  This tutorial builds on [How to trigger a User Tour](/recipes/user-tour/overview). Complete that guide first — it covers the proxy route, EventSource connection, and payload structure. This page covers only what is specific to Userpilot.
</Note>

## 1. Install Userpilot

Add the snippet to your app and initialize it with your token from **Settings → Environments**.

```html theme={null}
<script>
  (function(w,u,p){var s=w.userpilot=w.userpilot||[];if(!s.initialized){
  s.initialized=!0;var t=u.createElement("script");t.type="text/javascript";
  t.async=!0;t.src="https://js.userpilot.io/sdk/latest.js";
  var f=u.getElementsByTagName("script")[0];f.parentNode.insertBefore(t,f);
  s.identify=s.identify||function(){s.push(["identify",arguments])};
  s.initialize=s.initialize||function(){s.push(["initialize",arguments])};
  s.trigger=s.trigger||function(){s.push(["trigger",arguments])};
  }})(window,document);
  userpilot.initialize("YOUR_APP_TOKEN");
</script>
```

```javascript theme={null}
import Userpilot from 'userpilot';
Userpilot.initialize('YOUR_APP_TOKEN');
```

## 2. Identify the user

Call this once the user is authenticated. Use the same `userId` you send to PostHog so Autoplay can match sessions correctly.

```javascript theme={null}
userpilot.identify(userId, {
  name: user.displayName,
  email: user.email,
  created_at: user.createdAt, // ISO 8601
});
```

## 3. Create a flow in Userpilot

1. In the Userpilot dashboard go to **Flows → Create flow** and build your tour.
2. Set any targeting rules you need (page URL, user segment, etc.).
3. Publish the flow.
4. Note the **Flow ID** shown in the URL bar (`/flows/<flow_id>/edit`)

<Frame>
  <img src="https://mintcdn.com/autoplayai/AsKdp2ckv4zNfewl/images/recipes/userpilot/flow1.png?fit=max&auto=format&n=AsKdp2ckv4zNfewl&q=85&s=9633471e5778bddba2052757f6848ceb" alt="Userpilot flow step 1" width="3576" height="1718" data-path="images/recipes/userpilot/flow1.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/autoplayai/AsKdp2ckv4zNfewl/images/recipes/userpilot/flow2.png?fit=max&auto=format&n=AsKdp2ckv4zNfewl&q=85&s=ab48132085972d0e79ef8572b2e6f7e8" alt="Userpilot flow step 2" width="3570" height="1710" data-path="images/recipes/userpilot/flow2.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/autoplayai/AsKdp2ckv4zNfewl/images/recipes/userpilot/flow3.png?fit=max&auto=format&n=AsKdp2ckv4zNfewl&q=85&s=bd840499742527af59a8e66f3f0fbe84" alt="Userpilot flow step 3" width="3554" height="1704" data-path="images/recipes/userpilot/flow3.png" />
</Frame>

## 4. Trigger the tour

In your `onmessage` handler from [Step 4 of the base guide](/recipes/user-tour/overview#4-understanding-the-payload), add the Userpilot trigger call:

```javascript theme={null}
events.onmessage = (event) => {
  const payload = JSON.parse(event.data);

  if (payload.type !== "usertour_trigger") return;

  const mySessionId = posthog?.get_session_id?.() ?? null;
  if (!mySessionId || payload.session_id !== mySessionId) return;

  userpilot.trigger(payload.flow_id);
};
```

The `flow_id` in the payload maps to the **Content ID** of your Userpilot flow, visible in the URL when editing the flow in the Userpilot dashboard.