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. Iftrue, the chat window is now open. iffalse, the chat window is now minimized -
isSneakPeeking: Boolean. Iftrue, the chat window is now minimized and with sneak peek message showing. -
unreadMessages: Integer. Number of unread messages
Supported Events
onLoad
This event is triggered when webchat is ready.
onClick
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.
onChatOpen
This event is triggered after the chat window is opened successfully.
onChatClose
This event is triggered after the chat window is minimized successfully.
Example
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.
<body>
<div>
<button id="btn" onclick="menuClick()" style="display: none">Open Chat</button>
</div>
<script>
var btn = document.getElementById('btn');
var menuClick = function() {
window.$sinitic.api('openChat');
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>
</body>