# 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. |
| `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](#initialscreenconfig) | Specifies the content of the initial screen, which precedes the conversation start or can be optionally disabled. |
| `uiConfig` | [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. |


## 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](#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 |
| scrollIndicatorBackgroundColor | string |
| scrollIndicatorColor | string |
| fileDocumentMenuImage | string |
| openButtonImageUrl | string |
| closeButtonImageUrl | string |
| messageBackgroundColor | string |
| messageColor | string |
| messageIncomingBackgroundColor | string |
| messageIncomingColor | string |


## Examples of chat configurations:

### Custom chat widget icon


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


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