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

# Chameleon — How to setup

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

## 1. Install Chameleon

Add the snippet to your app using your account token from **Settings → Installation**.

```html theme={null}
<script>
  !function(d,w){var t=w.chmln=w.chmln||{};if(t.invoked)return;
  t.invoked=!0;t.methods=["set","on","once","track","clear","identify",
  "alias","group","show","startTour"];t.factory=function(e){return function(){
  var n=Array.prototype.slice.call(arguments);return n.unshift(e),t.push(n),t}};
  for(var i=0;i<t.methods.length;i++){var m=t.methods[i];t[m]=t.factory(m)}
  var s=d.createElement("script");s.type="text/javascript";s.async=!0;
  s.src="https://fast.trychameleon.com/messo/"+w.chmln_account_token+"/messo.min.js";
  var o=d.getElementsByTagName("script")[0];o.parentNode.insertBefore(s,o);
  }(document,window);
  chmln.set("account_token", "YOUR_ACCOUNT_TOKEN");
</script>
```

## 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}
chmln.identify(userId, {
  email: user.email,
  name: user.displayName,
  created: user.createdAt, // ISO 8601
  role: user.role,
});
```

## 3. Create a tour in Chameleon

1. In the Chameleon dashboard go to **Experiences → Tours** and click **+ Create a Tour**.

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/chameleon/flow1.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=3cad680b0aa499bed29da0a07837ddd1" alt="Chameleon Tours list" width="3072" height="1598" data-path="images/recipes/chameleon/flow1.png" />
</Frame>

2. Select a tour type — **Announcement** starts automatically when a user meets targeting rules; **Walkthrough** starts manually via a Launcher or short-link.
3. Build your steps, set any targeting rules (page URL, user segment, etc.), and publish the tour.

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/chameleon/flow2.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=a93d40630f2c5bf179d72adbdf9f509e" alt="Chameleon Tour type selection and Tour ID" width="3072" height="1598" data-path="images/recipes/chameleon/flow2.png" />
</Frame>

4. Note the **Tour ID** displayed below the tour name (`ID: <tour_id>`). Pass this as the `flow_id` when triggering.

<Frame>
  <img src="https://mintcdn.com/autoplayai/-o2PYtsva9oAHKwx/images/recipes/chameleon/flow3.png?fit=max&auto=format&n=-o2PYtsva9oAHKwx&q=85&s=e76cd447b46419658c162d8050625d9d" alt="Chameleon Tour publish and Tour ID" width="3046" height="1498" data-path="images/recipes/chameleon/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 Chameleon 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;

  chmln.show(payload.flow_id);
};
```

The `flow_id` in the payload maps to the **Tour ID** of your Chameleon tour, visible in the URL when editing the tour in the Chameleon dashboard.