> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to push Crisp events to product analytics solutions (Mixpanel, Posthog, Amplitude...)

*Learn how to forward Crisp chatbox events to product analytics tools such as PostHog, Mixpanel, or Amplitude.*

Chat activity is a useful product signal. By listening to **$crisp** events from your website, you can measure how conversations relate to activation, conversion, retention, or support volume in your analytics stack.

---

# ${color}[#0080dd](Before you start)

The examples below track the **first visitor message in a browser tab** and send it as a product analytics event. This is a practical proxy for *conversation started*, but you can replace the event name or listener if your own definition is different.

__You will need:__
* The Crisp [chat widget](https://crisp.chat/en/livechat/) installed on your website
* The analytics SDK for **PostHog**, **Mixpanel**, or **Amplitude** already loaded
* Access to add JavaScript to your site, usually in the page template or `<head>`

|| The Crisp chatbox SDK event used here is **message:sent**, which fires when the visitor sends a message from the chatbox.

---

# ${color}[#0080dd](Send Crisp events to PostHog)

```html
<script>
  window.$crisp = window.$crisp || [];

  window.$crisp.push(["on", "message:sent", function() {
    if (sessionStorage.getItem("ph_crisp_conversation_started")) return;

    posthog.capture("crisp_conversation_started", {
      source: "crisp",
      page: location.pathname + location.search
    });

    sessionStorage.setItem("ph_crisp_conversation_started", "1");
  }]);
</script>
```

This creates a **crisp_conversation_started** event in PostHog once per browser tab session.

---

# ${color}[#0080dd](Send Crisp events to Mixpanel)

```html
<script>
  window.$crisp = window.$crisp || [];

  window.$crisp.push(["on", "message:sent", function() {
    if (sessionStorage.getItem("mp_crisp_conversation_started")) return;

    mixpanel.track("crisp_conversation_started", {
      source: "crisp",
      page: location.pathname + location.search
    });

    sessionStorage.setItem("mp_crisp_conversation_started", "1");
  }]);
</script>
```

---

# ${color}[#0080dd](Send Crisp events to Amplitude)

```html
<script>
  window.$crisp = window.$crisp || [];

  window.$crisp.push(["on", "message:sent", function() {
    if (sessionStorage.getItem("amp_crisp_conversation_started")) return;

    amplitude.getInstance().logEvent("crisp_conversation_started", {
      source: "crisp",
      page: location.pathname + location.search
    });

    sessionStorage.setItem("amp_crisp_conversation_started", "1");
  }]);
</script>
```

---

# ${color}[#0080dd](Best practices)

__For cleaner reporting, keep your tracking rules predictable:__
* **Use consistent event names** → keep the same event name across tools when the business meaning is the same
* **Add useful context** → include page path, campaign data, user plan, or Crisp session ID if it helps your analysis
* **Choose the right storage** → use **sessionStorage** for once per tab, or **localStorage** for once per browser
* **Test from a fresh session** → use an incognito window and your analytics debug tools before publishing

| Read the [$crisp Methods documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/) for the full list of chatbox events, setters, and callbacks.