When HelpCrunch widget is loaded – you can bind callbacks to HelpCrunch chat events. For example, it can be useful for adding analytics tracking.

1. onReady
2. onChatOpen
3. onChatClose
4. onCustomerMessage
5. onAgentMessage
6. onNewUnreadChat
7. onPreChatFormSubmit
8. onError

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

Event triggers when a user opens the chat widget. It can be used to track user engagement, initiate auto messages, or personalize the chat experience based on user behavior.

No parameters are passed to the callback function.

HelpCrunch('onChatOpen', callback);

onChatClose

Event triggers when user manually closes the chat widget. This event can be used to track user interactions, trigger follow-up actions, or log chat session data

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.unreadChats;
  } else {
    bigRedBubble.style.display = 'none';
  }
});

onPreChatFormSubmit

When visitor submits the Pre-chat form, you'll receive submitted information in the 'event.detail.userData callback

HelpCrunch('onPreChatFormSubmit', (event) => {
  // event.detail.userData;
});

onError

In case of any error in chat widget, this method allows you to react accordingly

HelpCrunch('onError', (error) => {

});