# Web chat widget

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

<figure><img src="/files/57cdvLo6hRbacemgzCiW" alt=""><figcaption></figcaption></figure>

There are multiple customization options offered:

## Branding & visual design

<figure><img src="/files/a65bpxk0VGdfANrmrhgy" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="196.17010498046875">Config</th><th>Description</th></tr></thead><tbody><tr><td>Accent color</td><td>Customize the theme of the chat widget by choosing a accent color. This is applied to the header area, user message bubbles etc. </td></tr><tr><td>Font color</td><td>Defines the color of the font in the chat widget.</td></tr><tr><td>Style</td><td><strong>Widget</strong><br>Displays a floating chat bubble with a widget icon at the bottom corner.<br><br><strong>Widget + text</strong><br>Displays a rectangular floating chat bubble with a text next to the widget icon. The text is customizable upto </td></tr><tr><td>Header text</td><td>The name of the chatbot</td></tr><tr><td>Widget icon</td><td>Image to be displayed as the floating chat bubble.</td></tr><tr><td>Header image</td><td>Image to be displayed on the header when the chat bubble is opened.</td></tr><tr><td>Bot image</td><td>Image to be placed next to the bot messages in the chat screen.</td></tr></tbody></table>

## Footer

Information displayed on the chat widget's footer.

<figure><img src="/files/qhpXOjKFLfDcARNgljsU" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="196.17010498046875">Config</th><th>Description</th></tr></thead><tbody><tr><td>Remove "powered by"</td><td><p>Enabling this removes the "powered by WotNot" branding on the footer of the chat widget. </p><p></p><p><a href="https://wotnot.io/pricing"><em>Available on the Premium plan</em></a></p></td></tr><tr><td>Footer text</td><td>You can add a privacy policy text next to the powered by branding. This will be a clickable link which can open your desired webpage.</td></tr></tbody></table>

## Widget behaviour

Control how the widget behaves on your site, including positioning, animation and typing speed.

<figure><img src="/files/CQrC4At2DncaNSCP89YZ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="196.17010498046875">Config</th><th>Description</th></tr></thead><tbody><tr><td>Orientation</td><td>Displays the chat widget on the bottom left corner OR the bottom right corner of the webpage.</td></tr><tr><td>Scroll behaviour</td><td><strong>Scroll to end</strong><br>Each new message from the bot, auto scrolls the page to that new page.<br><br><strong>Scroll to first unread message</strong><br>User position is not changed. Instead a "New messages" badge is displayed at the bottom, which when clicked takes the user to the first unread message.<br><img src="/files/egR2Mfg2CwIsW3WGq5ok" alt=""></td></tr><tr><td>Hint text</td><td>Placeholder text to be shown on the chat widget input box.</td></tr><tr><td>Typing speed</td><td>Adjust how quickly you want the bot to send its responses.</td></tr><tr><td>Show historical chats</td><td>Enabling this will show a back button next to the Header image, clicking on which will show all the historical chats of the user.</td></tr></tbody></table>

## **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.

<figure><img src="/files/CWcD1tel0WNZC2kvtrJM" alt=""><figcaption></figcaption></figure>

## Privacy banner

Displays a privacy banner at the start of the chat.

<figure><img src="/files/Afa206gaS2vhq28i2cMY" alt=""><figcaption></figcaption></figure>

## Chat session behaviour

### On page refresh

**Start new chat**\
Always start a new chat session when the page is reloaded.\
\
**Retain existing chat**\
Always retain the chat session where it was when reloaded, or when navigating to another page.\
\
\&#xNAN;*Note: Chat is retained only if the WotNot cookie is stored.*&#x20;

### Cookies

When using WotNot's chatbots on your website, a cookie is placed by default when users begin interacting.

You can disable automatic addition of the cookie by going to:

* **Always added** - this means the cookie is always added to the client when a chat session starts.
* **Manually added** - this means cookie is not automatically added until a JS method is fired.

{% code overflow="wrap" %}

```javascript
// JS method to manually add the cookie

wn.cookieSettings({“is_allowed”:true})

// "true" means the cookie is added, "false" the cookie is removed if any present. And if the JS method is not used, no cookies are added.
```

{% endcode %}

To check if a WotNot cookie is present in your browser:

* Goto Inspect -> Application -> Cookies
* Search for keyword "cuid" under domain "app.wotnot.io"

<figure><img src="https://help.wotnot.io/~gitbook/image?url=https%3A%2F%2F360969599-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FsrMxU8nO3RjusUiYuXBB%252Fuploads%252FbMFXxD7I57yhkwnFXyd2%252FCleanShot%25202024-11-18%2520at%252010.16.51.png%3Falt%3Dmedia%26token%3D3d4113d1-cf5f-4555-a1d7-462254348e3f&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=b7a533b8&#x26;sv=2" alt=""><figcaption></figcaption></figure>

## Sounds & animations

Control how the notification sounds and animation preferences are used.

<table><thead><tr><th width="196.17010498046875">Config</th><th>Description</th></tr></thead><tbody><tr><td>Play sound</td><td>Enabling this plays a sound for each message being sent/received in the chat screen.</td></tr><tr><td>Stop bouncing animation</td><td>Enabling this will stop the bouncing animation displayed on the chat widget icon before it is opened on the webpage.</td></tr></tbody></table>

## Advanced customization

To customize chat widget even further, you need to define the custom CSS code you want to apply to the chat widget styling and add it here.&#x20;

[Learn more](/deploy/web-chat-widget/custom-css.md)&#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://help.wotnot.io/deploy/web-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.