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 and run a callback after chat initializes**
**Start chat with options and open chat**
## Syntax
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. |
### 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.