Handling Events

The button supports registering functions to be called on certain events. This allows you to extend its behavior by adding custom code to handle the events in which you are interested.

Registering an event handler

During the initialization you can define a key named events which should be an array of objects, each containing the keys id and handler.

window.guuru = window.Guuru();
window.guuru.init({
  appId: '<YOUR_APP_ID>',
  locale: 'en',
  events: [{
    id: 'button:initialized',
    handler: function (eventId, eventData) {
      console.log('Chat button initialized!', eventId, eventData);
    },
  }],
});

Available events

The list belows contains all available events that can be registered. Some events will pass the callee some associated data. These are also described below.

For events which have associated data the handler function should be defined as function (eventId, data) { ... }.

Event ID (eventId)	Description	Data (eventData)
loader:initialized	Chat loader is initialized	{enabled: true}
loader:chatOpened	Chat window has been opened	{}
loader:chatClosed	Chat window has been closed	{}
chat:initialized	Chat window is initialized	{}
chat:newChat	New chat flow has started	{}
chat:loadExistingChat	Resuming an existing chat	{}
chat:question	User wrote a question	{ val: "<question>" }
chat:name	User types his name	{ val: "<name>" }
chat:email	User types his email	{ val: "<email>" }
chat:category	User picks a category	{ val: "<category>" }
chat:chatCreated	Chat is created	{ val: chatId }
chat:chatWithExpert	User wrote a message	{ val: "<message>" }
chat:rateClick	User clicked the "Rate expert" button	{}
chat:reopenChat	User reopens closed chat	{}
chat:rateExpert	User rated the guuru	{ val: “<yes, partial, no>" }
chat:newChatClick	After finishing a chat, the user starts a new one	{}
chat:expertConnected	A guuru joined the chat	{ val: <duration in seconds> }
chat:quickActionSubmitted	User selected a quick action	{ val: quickActionId }
chat:bot:welcome	Bot displayed welcome message	{}
chat:bot:requestPartnerSelection	Requested partner selection	{}
chat:bot:requestName	Bot requested user's name	{}
chat:bot:requestCategory	Bot requested question category	{}
chat:bot:requestEmail	Bot requested user's e-mail	{}
chat:bot:connectingWithExpert	Bot says "connecting with expert"	{}
chat:bot:connectedWithExpert	Bot says "you are connected with expert	{}
embed:initialized	Embed widget is initialized	{ type: "content", count: <number of content items>}
embed:isInViewPort	Embed widget is in viewport	{ type: "content" }
embed:interaction	Visitor interacted with Embed widget	{ type: "content", element: ["chat","pagination","positive","negative"] }

Chat button loaded event

The previous events can only be registered after the window.Guuru function is already available.

If you load the script synchronously, i.e., using a <script src="..."></script> tag then the browser will block until the script is downloaded and ran, so window.Guuru will be available in any subsequent scripts.

However, in some cases, it might be useful to load the script asynchronously by either using the keywords async or defer in the <script> tag or by loading the script via javascript.

In those cases you need to know when the script is loaded in order to be able to initialize the chat button, otherwise you may end up trying to use the window.Guuru() function before it is defined. To solve this problem there is an extra event named guuru:loaded that is emitted when the button is ready.

const initChatloader = function () {
  window.guuru = window.Guuru();
  window.guuru.init({
    appId: '<YOUR_APP_ID>',
    locale: 'en',
  });
};

if ('Guuru' in window) {
  initChatloader();
} else {
  document.addEventListener(
    'guuru:loaded',
    () => initChatloader(),
    { once: true },
  );
}