This page documents the events emitted by the Glassix chat widget, covering how they are automatically pushed to the Google Analytics data layer and how to listen for them in JavaScript to trigger custom logic on your site.

Overview

All Glassix widget events are automatically pushed to the data layer array. If you have Google Analytics set up on your site, these events are automatically sent to it, no additional configuration required. Inside Google Analytics, you can use these events to build triggers, set up conversion tracking, and create reports based on how visitors interact with your widget.

For more on how the data layer works and how events map to Google Analytics, see Google's data layer documentation.

In addition to analytics, each event can also trigger JavaScript on your page. You can use events to trigger actions on your site when the widget fires them, for example, updating your UI when a new conversation starts or running logic when the widget is hidden. To call methods directly on the widget client, see Methods.

Pass Events in JavaScript

To receive events in JavaScript, pass an events object inside widgetOptions. The widgetOptions object is the same one where you pass your apiKey and snippetId. For instructions on adding the events object to your installation script, see Installation.

Example

<!-- Start of Glassix Chat Widget -->
<script>
  var widgetOptions = {
    apiKey: "your-api-key",
    snippetId: "your-snippet-id",
    events: {
      'initialized': () => console.log("Widget initialized."),
      'attached': () => console.log("Widget attached."),
      'destroyed': () => console.log("Widget destroyed."),
      'visiblity': (isVisible) => console.log(isVisible ? "Widget is visible" : "Widget is hidden"),
      'newTicket': (nextTicketId) => console.log("New ticket created. ID: " + nextTicketId),
      'newMessage': () => console.log("New message."),
      'protocolBadgeClicked': (protocolType, departmentIdentifier) =>
        console.log("Channel clicked. protocolType: " + protocolType + " departmentIdentifier: " + departmentIdentifier)
    }
  };

  (function (n) {
    var u = function () {
      GlassixWidgetClient && typeof GlassixWidgetClient == "function"
        ? (window.widgetClient = new GlassixWidgetClient(n),
           widgetClient.attach(),
           window.glassixWidgetScriptLoaded && window.glassixWidgetScriptLoaded())
        : f();
    },
    f = function () {
      r.src = "https://cdn.glassix.net/clients/widget.1.2.min.js";
      r.onload = u;
      document.body.removeChild(t);
      i.parentNode.insertBefore(r, i);
    },
    i = document.getElementsByTagName("script")[0],
    t = document.createElement("script"),
    r;
    (t.async = !0,
     t.type = "text/javascript",
     t.crossorigin = "anonymous",
     t.id = "glassix-widget-script",
     r = t.cloneNode(),
     t.onload = u,
     t.src = "https://cdn.glassix.com/clients/widget.1.2.min.js",
     !document.getElementById(t.id) && document.body) &&
    (i.parentNode.insertBefore(t, i), t.onerror = f);
  })(widgetOptions);
</script>
<!-- End of Glassix Chat Widget -->

Event Types

initialized

Fired when the widget has been initialized. To act on these events programmatically, for example, calling destroy() when a session ends, see Methods.

initialized

attached

Fired when the widget has been loaded into the DOM. This is the first event to fire.

attached

See below the example that shows attached and initialized JS events:

destroyed

Fired when the widget instance has been removed from both the memory and the DOM.

destroyed

See below an example of the destroyed event:

visibility

Fired when the chat box becomes visible or hidden. The isVisible parameter is passed with a value of true (visible) or false (hidden).

visiblity

See below an example for the visibility event:

newTicket

Fired when a new ticket is created — for example, when a visitor opens a new conversation or clicks the voice call button. The nextTicketId parameter is passed with the ticket ID.

newTicket

See below the newTicket event example:

newMessage

Fired when a message is sent. This includes inbound messages from visitors and outbound messages sent by human agents.

newMessage

See an example below for the newMessage event:

protocolBadgeClicked

Fired when a visitor clicks a channel badge — for example, a WhatsApp or Facebook badge. The protocolType and departmentIdentifier parameters are passed.

protocolBadgeClicked

Example: If a visitor clicks the WhatsApp badge:

• protocolType = WhatsApp
• departmentIdentifier = the department's WhatsApp phone number