kundo-events.js

/*
DOCUMENTATION:

This script can be embedded on any page with Kundo Chat, and will change the contents 
of an element on the page, depending on if the customer can start a new chat or not.

To change what's shown, change CHAT_AVAILABLE_HTML and CHAT_UNAVAILABLE_HTML to 
anything you want. To add a button that starts the chat, add a call to 
window.$kundo_chat.start_chat()

CHAT_INFO_ELEMENT_ID should reference an ID somewhere on the page. It needs to exist 
before this script is loaded, so be sure to add this script to the botton of your page.

SHOW_UNAVAILABLE_TIMEOUT is used to specify after how long the status of the chat 
should be set to unavailable, if the chat events for some reason are not triggered.

EXAMPLE HTML:

<div id="kundo_chat_id"></div>

*/

(function(){
  var CHAT_AVAILABLE_HTML = "Our chat is now open, <a href='window.$kundo_chat.start_chat()'>start a chat right now</a>";
  var CHAT_UNAVAILABLE_HTML = "Our chat is closed right now. Contact us <a href='mailto:support@example.com'>via e-mail</a> instead.";
  var CHAT_INFO_ELEMENT_ID = "kundo_chat_id";
  var SHOW_UNAVAILABLE_TIMEOUT = 3 * 1000; // ms
  var timeoutID;

  var handleKundoChatStatus = function(event) {
    var chatInfoElement = document.getElementById(CHAT_INFO_ELEMENT_ID)

    if (event && event.type == 'kundo-chat:chat-available') {
      chatInfoElement.innerHTML = CHAT_AVAILABLE_HTML;
    } else {
      chatInfoElement.innerHTML = CHAT_UNAVAILABLE_HTML;
    }

    if (timeoutID) {
      window.clearTimeout(timeoutID);
      timeoutID = null;
    }
  };

  if (document.addEventListener) {
    document.addEventListener('kundo-chat:chat-available', handleKundoChatStatus);
    document.addEventListener('kundo-chat:chat-unavailable', handleKundoChatStatus);
    timeoutID = window.setTimeout(handleKundoChatStatus, SHOW_UNAVAILABLE_TIMEOUT);
  } else {
    handleKundoChatStatus()
  }
})();