Rep.ai
  • 5 Minute Quick Start
  • Controlling the Widget
  • Custom Visitor Identities
  • Listening to Events
  • Examples of Custom Behavior
  • Security and Spam Prevention
  • Virtual Backgrounds
  • How to Identify Contacts who Click Through Emails to Your Site from Email Sequencers
  • Troubleshooting
    • Browser Compatibility
    • Notifications
    • Content-Security-Policy (CSP)
    • Firewalls and VPNs
    • Support
    • Scheduler
  • Integrations
    • Acuity
    • Calendly
    • Chili Piper
    • Clearbit
    • Google Calendar
    • HubSpot
    • Intercom
    • Outreach
    • Salesforce
    • Shopify
    • Slack
    • Microsoft Teams
    • Zapier
    • Zendesk
    • Zoom
    • Outlook Calendar
    • Salesloft
    • Gong
  • API
    • Introduction
    • Authentication
    • Scrub Visitor Data
    • Nightly Data Dumps
  • API Resources
    • Organization
  • ⚠️Experimental
    • Performance
    • Overview
    • Zendesk App
  • Outbound (Dialer)
    • Getting Started with Rep.ai Outbound (Dialer)
    • How to Create and Manage Custom Columns (Properties) in Rep.ai Outbound (Dialer)
    • How to Mark a Number as "Do Not Call" in Rep.ai Outbound (Dialer)
    • FAQs
  • SPOTLIGHT
    • How to set high-intent page preferences for intent scoring
    • How to toggle auto-create companies based on visitor identification
    • CRM Fields for Rep.ai Influence (Contact)
    • CRM Fields for Rep.ai Influence (Account)
  • ANALYTICS
    • Metric definitions
Powered by GitBook
On this page
  • Conversion Event Tracking Example
  • Events

Was this helpful?

Listening to Events

Integrate your application with the Rep.ai widget by listening for and reacting to events

PreviousCustom Visitor IdentitiesNextExamples of Custom Behavior

Last updated 5 months ago

Was this helpful?

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:

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

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

});

Refer to GA4 documentation to , , and .

Events

Event name

Description

sb:initialized

Emits when the widget is fully initialized and ready to be interacted with.

sb:error

Emits if a critical error is encountered during widget initialization. The error is included in event.detail.

sb:expand

Emits on the widget going into its expanded state, either by the visitor clicking on the widget or by calling RepAI.expand().

sb:collapse

Emits on the widget going into its collapsed state, either by the visitor clicking on the widget or by calling RepAI.collapse().

sb:callaccept

Emits on the visitor accepting a call that was initiated either proactively or reactively.

sb:callreject

Emits on the visitor rejecting a call that was initiated either proactively or reactively.

sb:dialstart

Emits on the widget requesting assistance, either by the visitor clicking on the dial button or by calling RepAI.dial()

sb:dialcancel

Emits on the dial canceling, either by the visitor clicking "Cancel" or the "X" button on the top right of the widget while dialing.

sb:dialmiss

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.

sb:callstart

Emits on an admin starting a call with a visitor. This will emit before the visitor explicitly presses "accept" on the call.

sb:callend

Emits on a call ending, either by the visitor ending it, the admin ending it, or from a network connectivity issue.

sb:availabilitychange

Emits on org availability changes. Includes an object with current org states:

sb:agentsavailabilitychange

Emits on agents' availability changes. Includes a full list of agents with current availabilities.

{ 
  detail: {
    isAvailable: boolean; 
    isBusy: boolean;
    isWorkingHours: boolean;
  }
}
{
  "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"
    }
  ]
}
set up events
set up event parameters
mark events as conversions