Start the chat with a custom script instead of the standard button
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:
Attribute | Type | Required | Comment |
---|---|---|---|
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.
Event | Description |
---|---|
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. |