# 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 |
|  --- | --- | --- |
| `locale` | Intl.LocalesArgument | Sets the locale for the chat widget. |
| `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. |
| `chatPosition` | 'bottom-right' or 'bottom-left' | Sets the position of the chat widget. Defaults to 'bottom-right'. |
| `chatPositionOffset` | number or number[] | Specifies the offset of the chat widget from the 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. |
| `collapseChoicesOnPressed` | boolean | Collapses choice buttons after one is selected. |
| `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. |
| pattern | string | Specifies a regex pattern for input validation. |
| label | string | Specifies the label text displayed above the input field. |
| placeholder | string | Specifies the placeholder for the input. |


## UiConfig

| Parameter | Type | Description |
|  --- | --- | --- |
| startChatButtonBackgroundColor | string | Background color of the start chat button. |
| startChatButtonColor | string | Text color of the start chat button. |
| navigationBarBackgroundColor | string | Background color of the navigation bar. |
| navigationCloseChatButtonColor | string | Color of the close button in the navigation bar. |
| navigationCloseChatButtonImage | string | Custom image for the close button in the navigation bar. |
| navigationRefreshChatButtonColor | string | Color of the refresh button in the navigation bar. |
| navigationMinimiseChatButtonColor | string | Color of the minimise button in the navigation bar. |
| fileDocumentMenuImage | string | Custom image for the document menu. |
| openButtonImageUrl | string | Custom image URL for the open chat button. |
| closeButtonImageUrl | string | Custom image URL for the close chat button. |
| messageBackgroundColor | string | Background color for outgoing messages. |
| messageBorderWidth | string | Border width for outgoing messages. |
| messageBorderColor | string | Border color for outgoing messages. |
| messageColor | string | Text color for outgoing messages. |
| messageLinkColor | string | Link color for outgoing messages. |
| messageIncomingBackgroundColor | string | Background color for incoming messages. |
| messageIncomingBorderWidth | string | Border width for incoming messages. |
| messageIncomingBorderColor | string | Border color for incoming messages. |
| messageIncomingColor | string | Text color for incoming messages. |
| messageIncomingLinkColor | string | Link color for incoming messages. |
| eventBubbleBackgroundColor | string | Background color for event bubbles. |
| eventBubbleColor | string | Text color for event bubbles. |
| scrollIndicatorBackgroundColor | string | Background color of the scroll indicator. |
| scrollIndicatorColor | string | Color of the scroll indicator. |
| choiceButtonTextTransform | string | CSS text-transform value for choice buttons. |
| choiceButtonBackgroundColor | string | Background color for choice buttons. |
| choiceButtonBorderWidth | string | Border width for choice buttons. |
| choiceButtonBorderColor | string | Border color for choice buttons. |
| choiceButtonColor | string | Text color for choice buttons. |
| choiceButtonPressedBackgroundColor | string | Background color for pressed choice buttons. |
| choiceButtonPressedBorderWidth | string | Border width for pressed choice buttons. |
| choiceButtonPressedBorderColor | string | Border color for pressed choice buttons. |
| choiceButtonPressedColor | string | Text color for pressed choice buttons. |


## 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',
                    label: 'Full Name',
                    placeholder: 'Firstname Lastname',
                    required: false,
                },
                {
                    name: 'email',
                    type: 'email',
                    label: 'Email',
                    placeholder: 'Your email address',
                    pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
                    required: true,
                },
            ],
        },
    },
});
```