To enable the basic version of chat, call the SinchSdk.Chat.mount();
method when the SDK has already been initialized and the user identity set. For more customized experience, you can pass additional properties to the mount
method.
Parameter | Type | Description |
---|---|---|
isLocationPickerEnabled | boolean | Toggles the location picker functionality in the chat widget. |
isEmojiPickerEnabled | boolean | Toggles the emoji picker functionality in the chat widget. |
isDocumentEnabled | boolean | Toggles the document picker functionality in the chat widget. |
isImagePickerAvailable | boolean | Toggles the image picker functionality in the chat widget. |
isBottomBarEnabled | boolean | Toggles the bottom bar in the chat widget. |
isToolbarAvailable | boolean | Toggles whether the toolbar is available in the chat widget. |
darkmode | boolean | Toggles dark mode. |
showDefaultChatButton | boolean | Toggles whether the default chat button is available in the chat widget. |
showRefreshConversationButton | boolean | Enables the refresh button. Works for anonymous users (without uuid and uuidHash). |
showCloseButton | boolean | Enables the close button, which allows users to end the conversation. |
showScrollbar | boolean | Enables the scrollbar in the chat display area where messages are shown. |
hideScrollIndicator | boolean | Hides the scroll down to new message indicator. |
chatPositionOffset | number or number[] | Specifies the offset of the chat widget from the bottom right corner of the screen. |
brandText | string | Sets the brand text that displays in the top bar of the chat widget. |
brandColor | string | Sets the brand color of the chat widget. |
brandColorLight | string | Sets the light mode brand color. |
brandColorDark | string | Sets the dark mode brand color. |
defaultAgent | { displayName?: string; pictureUrl?: string; } | Allows you to set either a custom client icon or a client name. In the case of the name, the first letter will be displayed in place of the image. |
sendInitialMessage | boolean | Enables the event that triggers the initiation of a conversation. |
initialScreenConfig | InitialScreenConfig | Specifies the content of the initial screen, which precedes the conversation start or can be optionally disabled. |
uiConfig | UiConfig | Defines the appearance of specific components within the widget |
rtlLayout | boolean | Enables right-to-left layout for languages that require it. |
isEndChatEnabled | boolean | Enables the end chat functionality in the widget. |
multiTopicInboxEnabled | boolean | Enables support for multiple topics in the chat inbox. |
Parameter | Type | Description |
---|---|---|
enabled | boolean | Determines whether the initial screen is enabled. |
imageUrl | string | Sets the main image of the initial screen. |
form | { fields: InitialScreenConfigField[] } | Defines the form displayed on the initial screen. |
Parameter | Type | Description |
---|---|---|
name | string | Determines the unique name of the field that will be sent as metadata in the conversation. |
type | HTML Input Type | Specifies the field type compatible with HTML Input type. |
required | boolean | Determines whether the field is mandatory. |
placeholder | string | Specifies the placeholder for the input. |
Parameter | Type |
---|---|
navigationBarBackgroundColor | string |
navigationCloseChatButtonColor | string |
navigationCloseChatButtonImage | string |
navigationRefreshChatButtonColor | string |
navigationMinimiseChatButtonColor | string |
scrollIndicatorBackgroundColor | string |
scrollIndicatorColor | string |
fileDocumentMenuImage | string |
openButtonImageUrl | string |
closeButtonImageUrl | string |
messageBackgroundColor | string |
messageColor | string |
messageIncomingBackgroundColor | string |
messageIncomingColor | string |
const image = document.createElement('img');
image.src = 'https://example-link-to-image.com';
image.style.position = 'fixed';
image.style.bottom = '0';
image.style.right = '0';
image.style.maxHeight = '100px';
image.style.margin = '20px 30px';
image.style.cursor = 'pointer';
image.style.zIndex = '999';
document.body.append(image);
image.addEventListener('click', () => {
SinchSdk.Chat.toggle();
})
SinchSdk.Chat.mount({
chatPositionOffset: [150, 40],
showDefaultChatButton: false,
});
SinchSdk.Chat.mount({
initialScreenConfig: {
imageUrl: 'https://example-link-to-image.com',
form: {
fields: [
{
name: 'display_name',
type: 'text',
placeholder: 'Firstname Lastname',
required: false,
},
{
name: 'email',
type: 'email',
placeholder: 'Your email address',
required: true,
},
],
},
},
});