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';
  }
});