# Website chat widget settings

To customize the appearance of the chat widget, you can go to Settings > Channels > Web > Appearance.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/JwjKpyIa6yMsekfH3A6R/Unknown%20image)

#### **There are multiple customization options offered:**

#### **Branding & Visual Design**

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/CjIpcR40RHi1K5JyXUve/Unknown%20image)

| **Configuration** | **Description**                                                                                                                                                                                                                                         |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accent color      | Customize the chat widget theme by selecting an accent color, which will be applied to the header, user message bubbles, and other interface elements.                                                                                                  |
| Font Color        | Defines the color of the font in the chat widget.                                                                                                                                                                                                       |
| Style             | Widget Displays a floating chat bubble with a widget icon in the bottom corner. Widget + Text Displays a rectangular floating chat bubble with customizable text next to the widget icon. The text can be customized up to a specified character limit. |
| Header Text       | The Name of the chatbot                                                                                                                                                                                                                                 |
| Widget icon       | Image to be displayed as the floating chat bubble.                                                                                                                                                                                                      |
| Header Image      | Image to be displayed on the header when the chat bubble is opened.                                                                                                                                                                                     |
| Bot Image         | Image to be placed next to the bot messages in the chat screen.                                                                                                                                                                                         |

#### **Footer**

Information displayed on the chat widget's footer.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/TszyFBkfmdaEokqO40il/Unknown%20image)

<table data-header-hidden data-full-width="false"><thead><tr><th>Configuration</th><th>Description</th></tr></thead><tbody><tr><td><strong>Configuration</strong></td><td><strong>Description</strong></td></tr><tr><td>Remove "powered by"</td><td>Enabling this option removes the “Powered by ReplyCX” branding from the footer of the chat widget.</td></tr><tr><td>Footer Text</td><td>You can add a privacy policy text next to the “powered by” branding. It will appear as a clickable link that opens the webpage of your choice.</td></tr></tbody></table>

#### **Widget Behaviour**

Control how the widget behaves on your site, including its position, animations, and typing speed.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/dpC4TEeJkbOr7yiauZv1/Unknown%20image)

| **Configuration**     | **Description**                                                                                                                                                                                                                                                                                               |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Orientation           | Displays the chat widget on the bottom left corner OR the bottom right corner of the webpage.                                                                                                                                                                                                                 |
| Scroll behaviour      | Scroll to end With every new message from the bot, the page automatically scrolls to the latest message. Scroll to first unread message The user’s position on the page remains unchanged. Instead, a “New messages” badge appears at the bottom, and clicking it takes the user to the first unread message. |
| Hint text             | Placeholder text to be shown on the chat widget input box.                                                                                                                                                                                                                                                    |
| Typing speed          | Adjust how quickly you want a bot to send the response.                                                                                                                                                                                                                                                       |
| Show historical chats | Enabling this will display a back button next to the header image. Clicking it will show all of the user’s past chat history.                                                                                                                                                                                 |

#### **Disclaimer Banner**

Display an informational banner above the chat (e.g. availability or legal notices)

Enabling this will allow user to define the message to be displayed.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/PpJ1QPzHy5tFZasaE0oF/Unknown%20image)

#### **Privacy Banner**

Display the privacy policy banner at the start of the chat.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/xv9HYe3OJqnuCdZznE4Y/Unknown%20image)

#### **Chat Session Behaviour**

Setup the settings how cookies are handled when the page gets reload.

* On Page Refresh :- 🡪 Start a new chat

&#x20;                                          🡪Retain Existing chat

* Cookie Settings:- 🡪 Always Added

&#x20;                                      🡪 Manually added

#### **Sounds & Animation**

Control how the notification sounds and animation preferences are used.

| **Config**              | **Description**                                                                                                      |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------- |
| Play Sound              | Enabling this will play a sound for each message sent or received on the chat screen.                                |
| Stop Bouncing animation | Enabling this will stop the bouncing animation displayed on the chat widget icon before it is opened on the webpage. |

#### **Advance Customization**

To further customize the chat widget, add your own custom CSS code here to modify its styling.

![](https://content.gitbook.com/content/eyvV4WfyYBGZdBoAuetg/blobs/kuLcY6sTHowZH4VLGGiB/Unknown%20image)