Hello 👋 How can we help?

JS API events

You can bind callbacks to HelpCrunch chat events
Written by Artem
Updated 1 month ago

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:

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

onNewUnreadMessages

This event fires when your customer receives a new message in chat:

Parameters:

  • event: object
  • unreadMessages: number
HelpCrunch('onNewUnreadMessages', callback(event));

Example:

You want to show a big red bubble with unread messages in your user’s status bar at your website:

 HelpCrunch('onNewUnreadMessages', 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';
  }
});

 

Did this answer your question?