> ## 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.

# Usertour — How to setup

> Trigger a Usertour 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 Usertour 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 Usertour 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 Usertour.
</Note>

## 1. Install Usertour

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

```html theme={null}
<script>
  window.usertourjs=window.usertourjs||[];
  !function(){var s=document.createElement("script");
  s.type="text/javascript";s.async=!0;
  s.src="https://js.usertour.io/usertour.js";
  var e=document.getElementsByTagName("script")[0];
  e.parentNode.insertBefore(s,e)}();
</script>
```

Then initialize the SDK once the script loads:

```javascript theme={null}
usertour.init('YOUR_ENVIRONMENT_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}
await usertour.identify(userId, {
  name: user.displayName,
  email: user.email,
  signed_up_at: user.createdAt, // ISO 8601
});
```

## 3. Create a flow in Usertour

1. In the Usertour dashboard go to **Flows → New flow** and build your tour.

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/usertour/flow1.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=db4a89b1bb89aaab65c259edf7b7f683" alt="Usertour new flow" width="1948" height="1092" data-path="images/recipes/usertour/flow1.png" />
</Frame>

2. Use the visual builder to add steps — tooltips, modals, hotspots, or checklists — and attach each step to an element on your page.

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/usertour/flow2.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=3a75ac6a2d3929e8463fb478095f8a6d" alt="Usertour flow builder" width="1864" height="1196" data-path="images/recipes/usertour/flow2.png" />
</Frame>

3. Set any targeting rules you need (page URL, user segment, etc.), then publish the flow.
4. Note the **Flow ID** shown in the URL bar when editing the flow (`/flows/<flow_id>/edit`).

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/usertour/flow3.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=fc1f156da2aa00a040b945dda34cf85e" alt="Usertour flow ID in URL" width="3056" height="1500" data-path="images/recipes/usertour/flow3.png" />
</Frame>

## 4. Trigger the flow

In your `onmessage` handler from [Step 4 of the base guide](/recipes/user-tour/overview#4-understanding-the-payload), add the Usertour 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;

  usertour.start(payload.flow_id);
};
```

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