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)
ParameterTypeDescription
optionsObjectRequired

These are options that you can pass in to modify how your chat widget loads.

All possible options are listed below.
functionFunctionOptional

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

PropertyTypeDescription
hideChatIconBooleanOptional

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.
brandIdStringOptional

By passing in a brandId, you can override the default brand setting in your Kustomer Chat Settings.
assistantIdStringOptional

By passing in an assistantId, you can override the default assistant setting in your Kustomer Chat Settings.
scheduleIdStringOptional

By passing in a scheduleId, you can override the default schedule setting in your Kustomer Chat Settings.
langStringOptional

By passing in a lang, you can override the users browser language.
hideHistoryBooleanOptional

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.
hideNewConversationButtonOnHistoryBooleanOptional

Can be used to hide the New Conversation Button on the Conversations list view.
hideNewConversationButtonOnEndBooleanOptional

Can be used to hide the New Conversation Button on the Chat Thread view after a conversation has been ended.
allowZoomBooleanOptional

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.
zIndexNumberOptional

Defaults to 2147483647

Can be used to specify a stack order for the Chat Widget in relation to other elements on the page.
chatIconSizeNumber (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
showTitleNotificationsBooleanOptional

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.
showBrowserNotificationsBooleanOptional

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.
hideArticleOpenInNewTabBooleanOptional

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:

  1. Open the chat widget directly to a conversation using either Kustomer.openConversationById() or Kustomer.createConversation().

and

  1. 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()
});