It is possible to change Kundo's default chat button and use your own custom button. You can also choose to trigger the chat when you want, and hide the default button altogether. This opens up many possibilities for you to use Kundo Chat in ways that fits your workflow and page layout.

You can see how this can be used in this example code 

How to trigger the chat from custom code

Start the chat

The chat is triggered by calling window.$kundo_chat.start_chat() somewhere in your code. 

With this method you can decide how and when the chat should be triggered. The function is only available after Kundo Chat has been loaded, so it's not possible to trigger directly on page load.

Hide the chat button

To hide the default button that gets displayed when the chat script loads, you can add window.$kundo_chat.disable_widget = true as a part of the code inside the script you find in script settings.

Hide or show the chat button dynamically

If you want to hide or show the chat button dynamically (for instance based on a user action or at a specific time of day), there are two methods for that purpose.
Call window.$kundo_chat.hide_widget() to hide the standard button.
Call window.$kundo_chat.show_widget() to show the standard button.

Note that we still require editors to be online for the widget to show up, so make sure you go online when testing this. Also: This state is not saved between page loads so you need to call hide_widget on each page load to get a consistent user experience.

React to editors going online or offline

By default, the chat button gets hidden when no editors are online, and gets shown again when someone goes online. When customizing the chat button, you can attach to the same javascript events, and decide how to react to editors being available or unavailable.

When Kundo Chat notices available editors, the kundo-chat:chat-available event is sent on window.document. When no editors are available any longer, the kundo-chat:chat-unavailable event is sent. 

Note that the same event can be sent several times in a row, it does not guarantee that a state change has happened more than once. 

When a customer has completed the chat, or closed the chat window manually, we send the kundo-chat:chat-closed event, so that you can show the chat button again.

Start the chat in a specific "flow"

Kundo Chat supports multiple "chat flows", which are separate chats, with separate editors and settings. If several flows are set to show up on the same page, we show a "flow selector" where the user selects which flow to start their chat in. A typical example could be Sales and Support.

To know whether or not an editor is available in a specific flow, you can listen to the kundo-chat:flow-available and kundo-chat:flow-unavailable events. The events contains a unique key for each flow that is availiable in the event.detail.flow property.

To start a chat in that specific flow, you call the start_chat-function. Here's a concrete example:

let onlineFlows = {}
document.addEventListener("kundo-chat:flow-available", function(event) {
  onlineFlows[event.detail.flow] = true
})
document.addEventListener("kundo-chat:flow-unavailable", function(event) {
  onlineFlows[event.detail.flow] = false
})
function startChat() {
  if (onlineFlows["<my-flow-slug>"]) {
    window.$kundo_chat.start_chat("<my-flow-slug>")
  }
}

Handoff a chat from a chat bot

It's also possible to start a chat in a specific flow, and send in some previous history from a separate system. A common use case for this is when doing handover from a chat bot to Kundo Chat.

Before going into the details of how this works, note that you need to prepare an editor in the Kundo interface (contact Kundo Support to help you configure the handoff), so we know what profile image and name to show in the history.

With an editor ready to go, make a call to the start_chat-method that looks like this:

window.$kundo_chat.start_chat("<my-flow-slug>", handoff)

Where handoff is a dictionary containing the chat history, with the following field specification:

Here's a full example of calling start_chat and passing in handoff information:

var handoff = {
    userName: 'Name Namesson',
    userEmail: 'name@example.com',
    editorId: 1234,
    history: [
        {
            sentAt: '2020-05-07T11:03:24Z',
            sentBy: 'editor',
            message: "I'm a bot!"
        },
        {
            sentAt: '2020-05-07T11:04:12Z',
            sentBy: 'user',
            message: 'Please transfer me to a human'
        },
        {
            sentAt: '2020-05-07T11:04:17Z',
            sentBy: 'editor',
            message: 'Will do!'
        }
    ]
}

window.$kundo_chat.start_chat('mychat', handoff)

Our support team is available for answering any questions about how this works: support@kundo.se