# Listening to Events

The Rep.ai widget triggers events on the global `window` object in JavaScript that can be listened for and reacted to. Some of these events will get triggered by calls to the Rep.ai JavaScript API, but they can also be triggered by visitor interaction with the widget, or by admins interacting with visitors via the Rep.ai dashboard.

## Conversion Event Tracking Example

A popular use case for the Events API is conversion tracking. the `sb:callstart` event will be fired whenever a call is accepted by a visitor, and you can listen for these events like so:

```javascript
window.addEventListener("sb:callstart", () => {

    gtag('event', 'callstart', {
      'event_category': 'chat',
      'event_label': 'sb:callstart',
    });

});
```

Refer to GA4 documentation to [set up events](https://developers.google.com/analytics/devguides/collection/gtagjs/events), [set up event parameters](https://developers.google.com/analytics/devguides/collection/ga4/event-parameters?client_type=gtag), and [mark events as conversions](https://support.google.com/analytics/answer/13128484?sjid=9040534538290068234-NC).

### Events

<table data-header-hidden><thead><tr><th>Event name</th><th>Description</th></tr></thead><tbody><tr><td>Event name</td><td>Description</td></tr><tr><td><code>sb:initialized</code></td><td>Emits when the widget is fully initialized and ready to be interacted with. </td></tr><tr><td><code>sb:error</code></td><td>Emits if a critical error is encountered during widget initialization. The error is included in <code>event.detail</code>.</td></tr><tr><td><code>sb:expand</code></td><td>Emits on the widget going into its expanded state, either by the visitor clicking on the widget or by calling <code>RepAI.expand()</code>.</td></tr><tr><td><code>sb:collapse</code></td><td>Emits on the widget going into its collapsed state, either by the visitor clicking on the widget or by calling <code>RepAI.collapse()</code>.</td></tr><tr><td><code>sb:callaccept</code></td><td>Emits on the visitor accepting a call that was initiated either proactively or reactively.</td></tr><tr><td><code>sb:callreject</code></td><td>Emits on the visitor rejecting a call that was initiated either proactively or reactively.</td></tr><tr><td><code>sb:dialstart</code></td><td>Emits on the widget requesting assistance, either by the visitor clicking on the dial button or by calling <code>RepAI.dial()</code></td></tr><tr><td><code>sb:dialcancel</code></td><td>Emits on the dial canceling, either by the visitor clicking "Cancel" or the "X" button on the top right of the widget while dialing.</td></tr><tr><td><code>sb:dialmiss</code></td><td>Emits on the widget going into the dial missed state after a period of time elapses after dialing but nobody answered the request for help.</td></tr><tr><td><code>sb:callstart</code></td><td>Emits on an admin starting a call with a visitor. This will emit before the visitor explicitly presses "accept" on the call.</td></tr><tr><td><code>sb:callend</code></td><td>Emits on a call ending, either by the visitor ending it, the admin ending it, or from a network connectivity issue.</td></tr><tr><td><code>sb:availabilitychange</code></td><td><p>Emits on org availability changes. Includes an object with current org states:</p><pre><code>{ 
  detail: {
    isAvailable: boolean; 
    isBusy: boolean;
    isWorkingHours: boolean;
  }
}
</code></pre></td></tr><tr><td><code>sb:agentsavailabilitychange</code></td><td><p>Emits on agents' availability changes. Includes a full list of agents with current availabilities.</p><pre><code>{
  "agents": [
    {
      "avatar": null,
      "available": true,
      "onCall": true,
      "title": "Support",
      "id": 1,
      "name": "Steven"
    },
    {
      "avatar": null,
      "available": false,
      "onCall": true,
      "title": "Support",
      "id": 2,
      "name": "Joe"
    }
  ]
}
</code></pre></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rep.ai/listening-to-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.