Start the chat with a custom script instead of the standard button

Uppdaterad

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 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 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 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"

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 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:

AttributeTypeRequiredComment

userName

string

Required when flow is not set as anonymous


userEmail

string

Required when flow is not set as anonymous

Needs to validate as an e-mail adress.

editorId

number

Required when passing handoff information

Needs to correspond to a valid editor ID in Kundo. We will fetch the image and name from the editor and show as part of the history.

history

array

Not required

See subelements below...

sentAt

datetime

Required

Date and time in ISO-format UTC, i.e. "2020-05-07T11:03:24Z"

sentBy

string enum

Required

Either "editor" or "user"

message

string

Required

The contents of the conversation.

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

Event Reference

This is a list of all events that can be listened to from Chat.

EventDescription
kundo-chat:chat-closed
Fired when the chat widget is closed.
kundo-chat:chat-available
Fired when an editor is available to accept new chat conversations.
kundo-chat:chat-unavailable
Fired when no editor is longer available to accept new chat conversations.
kundo-chat:flow-available
Fired when no editor is longer available to accept new chat conversations.
kundo-chat:flow-unavailable
Fired when no editor is longer available to accept new chat conversations.



warning Created with Sketch.