Skip to main content

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.

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. Complete that guide first — it covers the proxy route, EventSource connection, and payload structure. This page covers only what is specific to Chameleon.

​
1. Install Chameleon

Add the snippet to your app using your account token from Settings → Installation. 
<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. 
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.
Chameleon Tours list
  1. Select a tour type — Announcement starts automatically when a user meets targeting rules; Walkthrough starts manually via a Launcher or short-link.
  2. Build your steps, set any targeting rules (page URL, user segment, etc.), and publish the tour.
Chameleon Tour type selection and Tour ID
  1. Note the Tour ID displayed below the tour name (ID: <tour_id>). Pass this as the flow_id when triggering.
Chameleon Tour publish and Tour ID

​
4. Trigger the tour

In your onmessage handler from Step 4 of the base guide, add the Chameleon trigger call: 
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.