When HelpCrunch widget is loaded – you can bind callbacks to HelpCrunch chat events. For example, it can be useful for adding analytics tracking.
onReady
This event fires when chat widget was initialized and your application data was loaded
No parameters are passed to the callback function.
HelpCrunch('onReady', callback);
onChatOpen
This event fires when your customer opens the chat
No parameters are passed to the callback function.
HelpCrunch('onChatOpen', callback);
onChatClose
This event fires when your customer closes the chat
No parameters are passed to callback function.
HelpCrunch('onChatClose', callback(event));
onCustomerMessage
This event fires when your customer sends a message in chat
Parameters:
- customerMessage: object
- detail: object
- message: object
- author_name: string (user name)
- cid: string (user id)
- text: string
- time: string
- file: object
HelpCrunch('onCustomerMessage', callback(customerMessage));
Example:
You want to show the last customer’s message at the status block of your website:
HelpCrunch('onCustomerMessage', function (customerMessage) {
var message = customerMessage.detail.message;
document.getElementById('status-input').value = message.author_name + ': ' + message.text;
});
onAgentMessage
This event fires when your agent sends a message in chat
Parameters:
- customerMessage: object
- detail: object
- message: object
- author_name: string (user name)
- cid: string (user id)
- text: string
- time: string
- file: object
- and others...
HelpCrunch('onAgentMessage', callback(agentMessage));
Example#1:
You want to show the last agent's message at the status block of your website:
HelpCrunch('onAgentMessage', function (agentMessage) {
var message = agentMessage.detail.message;
document.getElementById('status-input').value = message.author_name + ': ' + message.text;
});
Example#2:
How to display chat only after new agent message is available in chat
HelpCrunch('onNewUnreadChat', function (event) {
console.log('onNewUnreadChat');
if (event.unreadChats) {
HelpCrunch('showChatWidget');
}
});
onNewUnreadChat
This event fires when your customer receives a new message in chat:
Parameters:
- event: object
- unreadMessages: number
HelpCrunch('onNewUnreadChat', callback(event));
Example:
You want to show a big red bubble with unread chats in your user’s status bar at your website:
HelpCrunch('onNewUnreadChat', function (event) {
var bigRedBubble = document.getElementById('big-red-bubble');
if (event.unreadMessages > 0) {
bigRedBubble.style.display = 'inline';
bigRedBubble.textContent = event.unreadMessages;
} else {
bigRedBubble.style.display = 'none';
}
});