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 
  horizontalPadding: number 
}

both horizontalPadding and verticalPadding are translated to pixel (px) values

Optional

Can be used to specify the position of the icon that launches the chat widget on the page.

Defaults to

{
   alignment: "right",
   verticalPadding: 20,
   horizontalPadding:20
}

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

Did this page help you?