JS API events

You can bind callbacks to HelpCrunch chat events
Written by Konstantine
Updated 4 months ago

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

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

Note that 'onAgentMessage' event doesn't work with proactive chat auto messages. If you need to include them as well, use this method:
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) => {

});
Did this answer your question?