Kustomer.start()
Initializes the chat widget and renders the chat icon on your web page.
First, initialize chat fully
Kustomer Chat must finish initializing fully with
Kustomer.start()
before you can execute any additional Web SDK methods.Tip: Call other methods inside the callback of
Kustomer.start()
to ensure Kustomer Chat always completes initialization before the code tries to run other methods.To learn more, see Troubleshooting: Kustomer method calls won't execute.
Guide: Start chat with a custom button 📙
Visit Start chat with a custom button to learn how to start and open chat with custom button.
Guide: Load chat asynchronously 📙
Visit Load chat asynchronously to learn how load chat asynchronously.
Examples
We've provided code samples of different ways to initialize and start chat:
Start chat
// Start chat
Kustomer.start();
Start chat and run a callback after chat initializes
// Start chat and run a callback after chat initializes
Kustomer.start({}, function () {
console.log('Kustomer Chat Widget started!');
});
Start chat with options and open chat
// Start chat with options and open the chat widget
Kustomer.start({
assistantId: 'SOME_ASSISTANT_ID'
}, function () {
console.log('Kustomer Chat Widget started with options!');
Kustomer.open();
});
Syntax
Kustomer.start(options, function)
Parameter | Type | Description |
---|---|---|
options | Object | Required These are options that you can pass in to modify how your chat widget loads. All possible options are listed below. |
function | Function | Optional A callback that is run after Kustomer.start() completes.You can call other Chat SDK methods inside the callback of Kustomer.start() to ensure that the methods will run properly after chat completes initialization. |
options
Property | Type | Description |
---|---|---|
hideChatIcon | Boolean | Optional Can be used to keep the chat icon hidden. This is useful if you want to open the widget after selecting a button or link rather than the floating chat icon. |
brandId | String | Optional By passing in a brandId , you can override the default brand setting in your Kustomer Chat Settings. |
assistantId | String | Optional By passing in an assistantId , you can override the default assistant setting in your Kustomer Chat Settings. |
scheduleId | String | Optional By passing in a scheduleId , you can override the default schedule setting in your Kustomer Chat Settings. |
lang | String | Optional By passing in a lang , you can override the users browser language. |
hideHistory | Boolean | Optional Defaults to false .When set to true , hides the back button and prevents the user from viewing their conversation history.For use cases and code examples, see hideHistory below. |
hideNewConversationButtonOnHistory | Boolean | Optional Can be used to hide the New Conversation Button on the Conversations list view. |
hideNewConversationButtonOnEnd | Boolean | Optional Can be used to hide the New Conversation Button on the Chat Thread view after a conversation has been ended. |
allowZoom | Boolean | Optional By default, we enforce the prevention of zoom on mobile devices. This parameter can remove this enforcement, allowing host websites to utilize their own viewport meta configuration. |
zIndex | Number | Optional Defaults to 2147483647 Can be used to specify a stack order for the Chat Widget in relation to other elements on the page. |
chatIconSize | Number (pixels), String in the format '00px', Object matching { height:0, width:0 } | Optional Defaults to 50 Can be used to specify the size of a custom icon for the chat widget. |
chatIconPosition | "right", "left", or an Object matching { alignment: 'right' | 'left', verticalPadding: number of pixels to pad from bottom width: number of pixels to pad from right or left } | Optional Can be used to specify the position of the icon that launches the chat widget on the page. |
preferredView | "chat" or "kb" | Optional Defaults to "kb" and shows the Knowledge Base the first time the widget is opened. Setting as "chat" will default to chat instead.If only one experience (Chat or Knowledge Base) is enabled in chat settings, this option will have no effect |
showTitleNotifications | Boolean | Optional Can be used to enable adding the number of unread chat messages to the tab/window title when the tab/window is not in focus. |
showBrowserNotifications | Boolean | Optional Defaults to true .When set to true , turns on browser notifications for newly received messages when chat is minimized or the page with chat is not in focus. |
hideArticleOpenInNewTab | Boolean | Optional Defaults to false . When set to true , the Knowledge Base Article header will not show the "open article in new tab" button. |
hideHistory
You can set the hideHistory
parameter to true
to prevent a user from viewing their conversation history list entirely. If you do not specify a value, hideHistory
defaults to false
.
Use case
Set the hideHistory
parameter to true
for cases when you want to:
- Open the chat widget directly to a conversation using either Kustomer.openConversationById() or Kustomer.createConversation().
and
- Prevent the user from going back to the full conversation list with their entire conversation history.
We've provided a code sample below.
// Creates and opens a new conversation view for the user. Hides the back button in the chat UI.
Kustomer.start({ hideHistory: true }, () => {
Kustomer.createConversation()
});
Updated 12 months ago