# Chat Widget

## The Chat widget settings

| **Name**                                                |           **Setting**           | **Description**                                                                                                              |
| ------------------------------------------------------- | :-----------------------------: | ---------------------------------------------------------------------------------------------------------------------------- |
| **Avatar**                                              |         `Default/custom`        | If you choose custom it let's you upload the image you want. Supported images are gif, png and jpeg                          |
| **Chat bubble icon**                                    |         `Default/custom`        | If you choose custom it let's you upload what ever image you want. Supported images are gif, png and jpeg                    |
| **Color**                                               |        Example `#ff33f3`        | Insert the desired color code or use the built in color picker                                                               |
| **Placeholder text**                                    | Example:`"Ask me something..."` | The text that is visible in the chat widget's input field by default                                                         |
| **Chat client height**                                  |           `Half/Tall`           | Half takes up 60% of the screen, Tall takes up 90%                                                                           |
| **Footer**                                              |             `On/Off`            | Let's you toggle a small footer below the chat widget's input field on or off                                                |
| **Chat Client Position**                                |           `Left/Right`          | Positions the chat widget to the left bottom corner or the right bottom corner                                               |
| **Chat client position on mobile**                      |           `Left/Right`          | Positions the chat widget to the left bottom corner or the right bottom corner (for mobile only)                             |
| **Open chat automatically on page load on mobile?**     |             `Yes/No`            | Wether or not to auto-open the chat widget on page load for mobile (no is recommended)                                       |
| **Allow different arrow color?**                        |             `Yes/No`            | Yes shows the color picker where you can set the color: Example `#ff33f3`                                                    |
| **Hide chat**                                           |             `Yes/No`            | Disables the chat widget                                                                                                     |
| **Disable pop after internal link in desktop**          |             `Yes/No`            | If set to yes the chat widget wont auto-open when you link to a page within the same domain                                  |
| **Disable pop after internal link in mobile landscape** |             `Yes/No`            | Same as above for but for mobile (landscape)                                                                                 |
| **Disable pop after internal link on mobile portrait**  |             `Yes/No`            | Same as above for but for mobile (portrait)                                                                                  |
| **Disable title and badge count for bot messages**      |             `Yes/No`            | Yes removes the badge that show number of unread messages                                                                    |
| **Sounds for bot**                                      |             `Yes/No`            | Enable and disable the sound for when a new message is received from the chat agent/bot                                      |
| **Sounds for agent**                                    |             `Yes/No`            | Enable and disable the sound for when a new message is received from a live chat agent (after handover to a human)           |
| **Show agent typing on chat**                           |             `Yes/No`            | Wether to send typing indicator or not                                                                                       |
| **Show agent avatar on chat top**                       |             `Yes/No`            | Show the live chat agent's avatar after handover has been done (top)                                                         |
| **Show agent avatar on chat bubble**                    |             `Yes/No`            | Show the live chat agent's avatar after handover has been done (with messages)                                               |
| **Clear chat on tab close**                             |             `Yes/No`            | Resets the chat if the user closes the tab (good for sensitive data)                                                         |
| **Chat language**                                       |   `English/Swedish/Norwegian`   | Let you choose what language the chat widget should be displayed in (menus, buttons and also WCAG-support)                   |
| **Min Message Delay (ms)**                              |            `0-100000`           | <p>The minimum time in ms that it will take before the message gets sent.</p><p>Example: <code>100</code></p>                |
| **Max Message Delay (ms)**                              |            `0-100000`           | <p>The maximum time in ms that the bot will wait before the message gets sent</p><p>Example: <code>1000</code></p>           |
| **Character Delay (ms)**                                |            `0-100000`           | <p>How much time each character adds to the calculated time before the message gets sent.</p><p>Example: <code>15</code></p> |
| **Typing Delay (ms)**                                   |            `0-100000`           | <p>For how long the typing indicator is sent.</p><p>Example: <code>50</code></p>                                             |

## CSS editor for Chat widget

Use the CSS editor to customize the widget. Navigate to Chat Widget > Styling in the Ebbot platform and then go to Advanced Customization to create new or view earlier created custom css.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ebbot.ai/ebbot-docs/core-capabilities/chat/chat-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.