> For the complete documentation index, see [llms.txt](https://help.wotnot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.wotnot.io/deploy/web-chat-widget/custom-css.md).

# Custom CSS

You can customize the CSS of the chat widget to suit your needs

{% hint style="info" %}
Available on **PREMIUM** plan and above.
{% endhint %}

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:

<table data-full-width="false"><thead><tr><th align="center">Field</th><th align="center">Class Name</th></tr></thead><tbody><tr><td align="center">Pop-up message</td><td align="center">.avatar<br>.popup-message<br>.popup-close-button</td></tr><tr><td align="center">Header Text</td><td align="center">.bot-title</td></tr><tr><td align="center">Header Logo</td><td align="center">.avatar--title</td></tr><tr><td align="center">Meta date information</td><td align="center">.meta-info<br>.meta-info--label</td></tr><tr><td align="center">Text message in the chat section</td><td align="center">.text-message</td></tr><tr><td align="center">Time-stamp &#x26; typing indicator</td><td align="center">.timestamp</td></tr><tr><td align="center">Options / Buttons dialog</td><td align="center">.option-button</td></tr><tr><td align="center">Carousel Title/ Subtitle / Buttons</td><td align="center">.carousel-title<br>.carousel-subtitle<br>.carousel-button</td></tr><tr><td align="center">Calendar Submit Button</td><td align="center">.submit-button</td></tr><tr><td align="center">Carousel Image</td><td align="center">.card-view-image</td></tr><tr><td align="center">Slider title and submit button</td><td align="center">.popup-title<br>.submit-button</td></tr><tr><td align="center">File Upload , Submit, Add more button</td><td align="center">.popup-title<br>.submit-file<br>.add-file</td></tr><tr><td align="center">Home Button</td><td align="center">.home--button<br>.reset--button</td></tr><tr><td align="center">Action Buttons</td><td align="center">.action-button</td></tr><tr><td align="center">Input box on the chat widget</td><td align="center">.chat-input</td></tr><tr><td align="center">Avatar for title</td><td align="center">.avatar</td></tr><tr><td align="center">Header of the chat widget</td><td align="center">.message-screen-header</td></tr><tr><td align="center">Carousel Root, Image , Carousel slider frame,</td><td align="center"><strong>carousel &#x26; carousel-image</strong>:<br>.slider-frame<br>.card-image</td></tr><tr><td align="center">File List item Root and Classes for title , icon</td><td align="center"><strong>file-preview: label:</strong><br>.filepond--root<br>.iconwrap<br><strong>textwrap file listitem</strong>:<br>.filepond--file-wrapper<br>.filepond--action-remove-item</td></tr><tr><td align="center">Form Input</td><td align="center">.form-input</td></tr><tr><td align="center">Phone Input, Seach box for country dropdown , Country list</td><td align="center">.phone-input:<br>.search-box-sub-container<br>.country-list</td></tr><tr><td align="center">Google Calendar Drawer</td><td align="center">.google-calendar</td></tr></tbody></table>

## **Common CSS customizations**

#### **1. Change the background for the Chat Widget**

To modify the chat widget icon’s background, use the following CSS:

{% code overflow="wrap" %}

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

{% endcode %}

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

{% code overflow="wrap" %}

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

{% endcode %}

#### **3. Responsive chatbot sizing**

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

{% code overflow="wrap" %}

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

{% endcode %}

#### **4. Reduce the bot size through CSS below**

{% code overflow="wrap" %}

```javascript
.app-container{
width: 400px !important;
height: 425px !important;
}
```

{% endcode %}