> ## Documentation Index
> Fetch the complete documentation index at: https://help.wotnot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Widget

> Customize the look and feel of the chat widget.

To add the widget to your website and configure the Web channel, see [Web channel.](https://help.wotnot.io/deploy/channels/web.md)

![Image](https://mintcdn.com/wotnot/Kf2EOxW9_nLCdHhp/images/image-680.png?fit=max\&auto=format\&n=Kf2EOxW9_nLCdHhp\&q=85\&s=45e0e4a6b5a3fd9c457409f80b6e1a23)

> [!NOTE]
>
> To customize the appearance of the chat widget, you can go to S**ettings > Channels > Web > Appearance.**

## Web or voice

| Widget | Description |
| - | - |
| Web chat widget | A text-based chat widget that visitors use to interact with your agent on your website. |
| Voice chat widget | A browser-based voice experience that allows visitors to talk to your agent instead of typing messages. |

The two experiences use different interaction modes, so some settings apply only to text chat while others apply to voice.

# Web chat widget

### Branding and visual design

Customize the appearance of the widget to match your website and brand.

| Config | Description |
| - | - |
| Accent color | Customize the theme of the chat widget by choosing an accent color. This is applied to the header area, user message bubbles, and other widget elements. |
| Font color | Defines the color of the font in the chat widget. |
| Style | **Widget:** Displays a floating chat bubble with a widget icon at the bottom corner. **Widget + text:** Displays a rectangular floating chat bubble with customizable text next to the widget icon. |
| Header text | The name of the chatbot displayed in the widget header. |
| Widget icon | The image displayed as the floating chat bubble. |
| Header image | The image displayed in the header when the chat widget is opened. |
| Bot image | The image displayed next to bot messages in the chat screen. |

### Footer

Information displayed on the chat widget's footer.

| Config | Description |
| - | - |
| Remove "powered by" | Enabling this removes the "Powered by WotNot" branding from the footer of the chat widget. [Available on the Premium plan](https://wotnot.io/pricing) |
| Footer text | 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. |

> [!NOTE]
>
> The **Widget + text** style allows you to customize the text displayed next to the widget icon. Keep the text short so it displays correctly across different screen sizes.

### Widget behaviour

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

![Image](https://mintcdn.com/wotnot/Kf2EOxW9_nLCdHhp/images/image-682.png?fit=max\&auto=format\&n=Kf2EOxW9_nLCdHhp\&q=85\&s=9d77a5f84fb43b9f2a6be8e3615c0a41)

| Config | Description |
| - | - |
| Orientation | Displays the chat widget in the bottom-left or bottom-right corner of the webpage. |
| Scroll behaviour | **Scroll to end:** Automatically scrolls to the latest bot message. **Scroll to first unread message**: Keeps the user's current position and displays a "New messages" badge at the bottom. Clicking the badge takes the user to the first unread message. |
| Hint text | Placeholder text displayed in the chat widget input box. |
| Typing speed | Adjusts how quickly the bot sends its responses. |
| Show historical chats | Enabling this will show a back button next to the Header image, clicking on which will show all the historical chats of the user. |

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

![Image (46)](https://mintcdn.com/wotnot/EWpXM4BSkYiwsLKk/images/image-\(46\).png?fit=max\&auto=format\&n=EWpXM4BSkYiwsLKk\&q=85\&s=aefda5706571de6df49a9a75a8f736ee)

### Privacy banner

Displays a privacy banner at the start of the chat.

![Image](https://mintcdn.com/wotnot/Kf2EOxW9_nLCdHhp/images/image-687.png?fit=max\&auto=format\&n=Kf2EOxW9_nLCdHhp\&q=85\&s=20c9050b35835a2e457e11ce9f6adddf)

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

> [!NOTE]
>
> ***Chat is retained only if the WotNot cookie is stored.***

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

```javascript theme={null}
// 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.
```

> [!WARNING]
>
> When **Manually added** is selected, chat retention and related-chat matching will not work until the WotNot cookie is allowed.

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

* Go to Inspect →Application → Cookies
* Search for keyword "cuid" under domain "[app.wotnot.io](http://app.wotnot.io)"

![Clean Shot 2024 11 18 At 10 16 51](https://mintcdn.com/wotnot/i8uopzIFkX-Q6WYU/images/CleanShot-2024-11-18-at-10.16.51.png?fit=max\&auto=format\&n=i8uopzIFkX-Q6WYU\&q=85\&s=47b20acb668f0ff73890f9c353dff0fc)

> [!NOTE]
>
> If you use a consent manager, verify the cookie after the visitor gives the required consent. If the cookie is not present, chat retention may not work.
>
> For more information about matching visitors to previous conversations, see [Related chats](https://app.mintlify.com/wotnot/wotnot/~/e3b76295-ce99-44d3-8e28-0be7d1b291da).

### Sounds and animations

Control how the notification sounds and animation preferences are used.

| **Config** | **Description** |
| - | - |
| Play sound | Enabling this plays a sound for each message being sent/received in 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. |

### Image dimensions

Following are the action blocks in WotNot that supports using images and gifs:

| Image | Recommended dimensions | Supported formats |
| - | - | - |
| Widget icon | Use a square image | Common image formats |
| Header image | Use a wide image suitable for the widget header | Common image formats |
| Bot image | Use a square image | Common image formats |

| **Action block** | **Recommended size** |
| - | - |
| Send Message | 16:9, 4:5 & 1:2 |
| Carousal | 16:9 |
| Image Carousal | 16:9 |

> [card] IMPORTANT
>
> * All images are clickable so that you can view the full image on an overlay.
> * If you provide larger images, then the system will automatically cut & only show part of that image that fits the dimension.
> * The image size cannot exceed **5 MB**

### Pop-up messages

Pop-up messages are small snippets of text shown on the chat widget before opening it.

They can be used to attract attention and encourage visitors to start a conversation.

![Image](https://mintcdn.com/wotnot/Kf2EOxW9_nLCdHhp/images/image-688.png?fit=max\&auto=format\&n=Kf2EOxW9_nLCdHhp\&q=85\&s=25e68527cd6b0bcfb92e1d74831dfcc8)

* You can configure different pop-up messages for different pages of your website. A pop-up message can contain either **one line of text or media**.

![Image](https://mintcdn.com/wotnot/Kf2EOxW9_nLCdHhp/images/image-689.png?fit=max\&auto=format\&n=Kf2EOxW9_nLCdHhp\&q=85\&s=9748b6af52597554facd32896facd004)

### Triggering the widget with JavaScript

Javascript functions to display and hide the chat widget on your webpage.

Execute the following Javascript functions to trigger the chat widget on your web page.

```javascript Opening the chat widget theme={null}
wn.openWidget(); 

//Opens the chat window but minimizes it when clicked on the cross
wn.openWidget(true)
```

```javascript Hiding the chat widget theme={null}
wn.hideWidget();
```

```javascript Showing the chat widget theme={null}
wn.showWidget();

//Shows the chat bubble but minimizes it when clicked on the cross.
wn.showWidget(true)  
```

Refer this videos for :

1. [Opening the chat widget](https://www.loom.com/share/3aac595347a34fcdb35fc62216e7400a?t=18)
2. [Hiding the chat widget](https://www.loom.com/share/dc3cdcd8ff904cccafcc8bfe1927b565)
3. [Showing the chat widget](https://www.loom.com/share/3d2af81bddb64ef78d94558d48762a47)

### Advanced customisation with custom CSS

You can customize the CSS of the chat widget to suit your needs. You can add custom CSS from:

**Settings > Channels > Web > Appearance**

> [!NOTE]
>
> Available on **PREMIUM** plan and above.

To make changes in the UI using the CSS, you need to go to 'Channel Configuration -> Web -> Appearance'

Here are the classes that you can modify:

| **Field** | **Class Name** |
| :- | :- |
| Pop-up message | `.avatar.popup-message.popup-close-button` |
| Header Text | `.bot-title` |
| Header Logo | `.avatar--title` |
| Meta date information | `.meta-info.meta-info--label` |
| Text message in the chat section | `.text-message` |
| Time-stamp & typing indicator | `.timestamp` |
| Options / Buttons dialog | `.option-button` |
| Carousel Title / Subtitle / Buttons | `.carousel-title.carousel-subtitle.carousel-button` |
| Calendar Submit Button | `.submit-button` |
| Carousel Image | `.card-view-image` |
| Slider title and submit button | `.popup-title.submit-button` |
| File Upload, Submit, Add more button | `.popup-title.submit-file.add-file` |
| Home Button | `.home--button.reset--button` |
| Action Buttons | `.action-button` |
| Input box on the chat widget | `.chat-input` |
| Avatar for title | `.avatar` |
| Header of the chat widget | `.message-screen-header` |
| Carousel Root, Image, Carousel slider frame | `.carousel.carousel-image.slider-frame.card-image` |
| File List item Root and Classes for title, icon | `.filepond--root.iconwrap.filepond--file-wrapper.filepond--action-remove-item` |
| Form Input | `.form-input` |
| Phone Input, Search box for country dropdown, Country list | `.phone-input.search-box-sub-container.country-list` |
| Google Calendar Drawer | `.google-calendar` |

**Common CSS customizations:**

* **Change the background for the Chat Widget :** To modify the chat widget icon’s background, use the following CSS:

```javascript theme={null}
#chat-bubble-open {
    background: url(https://www.hemfrid.se/_next/static/media/logo-chat.9d3ab5d1.png) 50% / cover no-repeat;
}
```

* **Adjust the Chatbot Size (Consistent on Web & Mobile) :**  To ensure the chatbot doesn’t take up the entire screen, you need to add the chat bubble code using widget-container-id and apply the following styles to the root element using a media query:

```javascript theme={null}
<script src="https://app.talkie.se/chat-widget/7JQoJfxPNVAd193002441108qMitvJJh.js" defer></script> widget-container-id="root" widget-height="500px" widget-width="600px" defer
```

* **Responsive chatbot sizing :** To adjust the chatbot size for mobile screens, use this media query:

```javascript theme={null}
@media screen and (max-width: 499px) {
    iframe#widget-chat-window {
        width: 100% !important;
        height: 300px !important;
    }
}
```

* **Reduce the bot size through CSS below**

```css theme={null}
.app-container{
width: 400px !important;
height: 425px !important;
}
```

> [!WARNING]
>
> Custom CSS depends on the widget's underlying HTML and CSS classes. WotNot may change the widget markup or class names in future releases. Such changes can cause existing custom CSS to stop working or behave differently.

# Voice chat widget

The voice chat widget allows visitors to **talk to an agent instead of chatting through text**.

![Image](https://mintcdn.com/wotnot/rJU1ndzQnO6IbxAg/images/image-716.png?fit=max\&auto=format\&n=rJU1ndzQnO6IbxAg\&q=85\&s=e900cd7519a960e1df9c81d3f6eed173)

Let's look at how you can enable it:

* Go to Settings
* Navigate to **Channels > Web > Appearance**
* Under **Branding & Visual desing**, choose the Widget mode as **VOICE**
* choose from a variety of voice options on how you want your voice agent to sound.

![Screenshot 2026 09 02 152108](https://mintcdn.com/wotnot/PKybgkZax_5VziX5/images/Screenshot-2026-09-02-152108.jpg?fit=max\&auto=format\&n=PKybgkZax_5VziX5\&q=85\&s=3612946506820416a415270526d2ab79)

> [!WARNING]
>
> **When using VOICE mode, certain action blocks will not execute.**

### Provisional structure

Because voice mode uses the visitor's microphone, the browser may ask the visitor to grant microphone access.

If microphone access is denied, the visitor cannot use the voice experience until permission is granted in the browser.

For voice-agent connection and channel configuration, see [Voice channel](https://help.wotnot.io/deploy/channels/voice.md#web-based-calling).

# Troubleshooting

> [accordion] Widget styling does not match the configured accent colour
>
> Check whether custom CSS is overriding the configured accent colour. Also inspect your website's CSS for rules that target the widget or its parent elements.
>
> If the issue occurs only after adding custom CSS, temporarily remove the custom CSS to identify whether it is causing the conflict.

> [accordion] Chat is not retained when visitors move between pages
>
> Check the **Chat session behaviour** setting first.
>
> If **Retain existing chat** is selected, verify that the WotNot cookie is actually stored in the browser. Go to **Inspect > Application > Cookies** and search for `cuid` under `app.wotnot.io`.
>
> If your cookie setting is **Manually added**, make sure your consent flow calls:
>
> ```text theme={null}
> wn.cookieSettings({"is_allowed":true})
> ```
>
> Chat retention will not work until the WotNot cookie is available.

> [accordion] Images appear stretched or cropped
>
> Check the image dimensions and file size before uploading the image.
>
> Images that are larger than the available display area may be cropped. Also make sure the image uses an appropriate aspect ratio and does not exceed the **5 MB** file-size limit.

> [accordion] Custom CSS stopped working
>
> Check whether the widget's CSS classes or markup have changed.
>
> Custom CSS depends on the widget's underlying classes, so a WotNot release that changes the widget structure may require your CSS to be updated.

> [accordion] JavaScript methods are not triggering the widget
>
> Make sure the WotNot widget script is installed and has loaded before your JavaScript calls run.
>
> If you are using a custom button or event handler, verify that the function is executed in the visitor's browser after the widget has loaded.
>
> See [Web channel](https://app.mintlify.com/wotnot/wotnot/~/2430cbd5-5d6d-4ab5-9293-a45bfab38917) for widget installation.

> [accordion] Microphone permission is denied for the voice widget
>
> Check the browser's microphone permissions for your website.
>
> The visitor must allow microphone access for the voice widget to work. If permission was previously denied, update the browser's site permissions and try again.

> [accordion] Powered by WotNot branding is still visible
>
> Removing the **Powered by WotNot** branding is available on the **Premium plan and above**.
>
> If your account is not on an eligible plan, the branding cannot be removed from the widget


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.