Webchat Event Customization

Event Handling

An event is invoked by the user action, or by the change of status of webchat.

You can pass the callback as the attributes of the global $sinitic object, for example:

window.$sinitic = {
    gwId: '<your-gateway-id>',

    onLoaded: function(event){...},
    onClick: function(event){...},
    onChatOpen: function(event){...},
    onChatClose: function(event){...},


When the event handlers are invoked, the this keyword inside the handler is set to windows.$sinitic. The handler also receives an Event Object as its sole parameter.

Event Object

The event object indicating the current status of webchat. Its attributes are following:

  • isOpen: Boolean. If true, the chat window is now open. if false, the chat window is now minimized
  • isSneakPeeking: Boolean. If true, the chat window is now minimized and with sneak peek message showing.
  • unreadMessages: Integer. Number of unread messages

Supported Events


This event is triggered when webchat is ready.


This event is triggered when user click on the buttons to open or minimize the chat window. 

You can return false to prevent the page from showing or minimizing the chat window.


This event is triggered after the chat window is opened successfully.


This event is triggered after the chat window is minimized successfully.


Suppose you don't want to show the chat window upon clicking on the icon, but display a custom menu and show the chat window later.

        <button id="btn" onclick="menuClick()" style="display: none">Open Chat</button>
var btn = document.getElementById('btn');

var menuClick = function() {
  btn.style.display = 'none';

var renderCustomUI = function(evt) {
    if( ! evt.isOpen ){
        btn.style.display = '';
        return false;

/* the snippet from our platform */
window.$sinitic = window.$sinitic || {
    gwId: '<your-gateway-id>',
    onClick: renderCustomUI
var d=document,s=d.createElement("script");s.type="text/javascript",s.defer=!0,s.src="http://app.sinitic.ai/webchat/webchat.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t),window.$sinitic.api=function(){(this.q=this.q||[]).push(arguments)};</script>

Was this article helpful?

Can’t find what you’re looking for?

The Sinitic team is here for you.

Contact Support