Skip to content
Last updated

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.

ParameterTypeDescription
isLocationPickerEnabledbooleanToggles the location picker functionality in the chat widget.
isEmojiPickerEnabledbooleanToggles the emoji picker functionality in the chat widget.
isDocumentEnabledbooleanToggles the document picker functionality in the chat widget.
isImagePickerAvailablebooleanToggles the image picker functionality in the chat widget.
isBottomBarEnabledbooleanToggles the bottom bar in the chat widget.
isToolbarAvailablebooleanToggles whether the toolbar is available in the chat widget.
darkmodebooleanToggles dark mode.
showDefaultChatButtonbooleanToggles whether the default chat button is available in the chat widget.
showRefreshConversationButtonbooleanEnables the refresh button. Works for anonymous users (without uuid and uuidHash).
showCloseButtonbooleanEnables the close button, which allows users to end the conversation.
showScrollbarbooleanEnables the scrollbar in the chat display area where messages are shown.
hideScrollIndicatorbooleanHides the scroll down to new message indicator.
chatPositionOffsetnumber or number[]Specifies the offset of the chat widget from the bottom right corner of the screen.
brandTextstringSets the brand text that displays in the top bar of the chat widget.
brandColorstringSets the brand color of the chat widget.
brandColorLightstringSets the light mode brand color.
brandColorDarkstringSets 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.
sendInitialMessagebooleanEnables the event that triggers the initiation of a conversation.
initialScreenConfigInitialScreenConfigSpecifies the content of the initial screen, which precedes the conversation start or can be optionally disabled.
uiConfigUiConfigDefines the appearance of specific components within the widget
rtlLayoutbooleanEnables right-to-left layout for languages that require it.
isEndChatEnabledbooleanEnables the end chat functionality in the widget.
multiTopicInboxEnabledbooleanEnables support for multiple topics in the chat inbox.

InitialScreenConfig

ParameterTypeDescription
enabledbooleanDetermines whether the initial screen is enabled.
imageUrlstringSets the main image of the initial screen.
form{ fields: InitialScreenConfigField[] }Defines the form displayed on the initial screen.

InitialScreenConfigField

ParameterTypeDescription
namestringDetermines the unique name of the field that will be sent as metadata in the conversation.
typeHTML Input TypeSpecifies the field type compatible with HTML Input type.
requiredbooleanDetermines whether the field is mandatory.
placeholderstringSpecifies the placeholder for the input.

UiConfig

ParameterType
navigationBarBackgroundColorstring
navigationCloseChatButtonColorstring
navigationCloseChatButtonImagestring
navigationRefreshChatButtonColorstring
navigationMinimiseChatButtonColorstring
scrollIndicatorBackgroundColorstring
scrollIndicatorColorstring
fileDocumentMenuImagestring
openButtonImageUrlstring
closeButtonImageUrlstring
messageBackgroundColorstring
messageColorstring
messageIncomingBackgroundColorstring
messageIncomingColorstring

Examples of chat configurations:

Custom chat widget icon

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

Custom form on the initial screen

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,
                },
            ],
        },
    },
});