Set chat configuration parameters

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

InitialScreenConfig

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.

InitialScreenConfigField

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.

UiConfig

Parameter	Type
navigationBarBackgroundColor	string
navigationCloseChatButtonColor	string
navigationCloseChatButtonImage	string
navigationRefreshChatButtonColor	string
navigationMinimiseChatButtonColor	string
fileDocumentMenuImage	string

Examples of chat configurations:

Custom chat widget icon

Copy

Copied

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

Copy

Copied

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