> For the complete documentation index, see [llms.txt](https://docs.intelliticks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intelliticks.com/customizing-platform/widget/advanced-customization/how-to-easily-add-custom-css-to-chat-widget.md).

# How to Easily Add Custom CSS to Chat Widget

## Changing look-and-feel using Custom CSS

{% embed url="<https://youtu.be/E_ciA1j8oUo>" %}

### Steps to add your Custom CSS

1. Login to [Admin Portal](https://app.intelliticks.com/)
2. Go to Settings > Chat widget > [Custom CSS](https://app.intelliticks.com/v2/settings/chat-widget/custom-css)
3. Add your Custom CSS and save.
4. You are done.

## Examples of Custom CSS change&#x20;

#### 1. Changing Bot's Text

To change bot or agent's text, modify classes "***.agent .iticks-message-text***"

For example - To change the bot's text color to blue and capitalize all words, we can use this custom CSS.

```bash
.agent .iticks-message-text {
    color: blue;
    text-transform: uppercase;

}
```

|             **From**             |                                                                                       |              **To**              |
| :------------------------------: | :-----------------------------------------------------------------------------------: | :------------------------------: |
| ![](/files/-MRlDlkEaNPl2pOYLVPK) | <p></p><p><a href="https://emojidictionary.emojifoundation.com/right_arrow">➡</a></p> | ![](/files/-MRlDjAR9xIjWNAovFns) |

#### 2. Changing Submit button of Form Node

To change the submit button of the Form node, modify class "**.it-button**"

For example - To change the background and text color of Submit button, we can use this custom CSS.

```bash
.it-button {
    background: burlywood;
    border: burlywood;
    color: black;
}
```

From&#x20;

![](/files/-MRlFK2CL84Vud4jb5Gd)

to

![](/files/-MRlFPvMHmsIHIjmTUl_)

#### 3. Changing Quick Reply node's buttons

To change the buttons of the QuickReply node, modify class "**.qrnode**"

For example - To change the background and text color of the QuickReply node's button, we can use this custom CSS.

```bash
.qrnode {
   background: chartreuse;
   border: 1px solid black;
   color: black;
}
```

From&#x20;

![](/files/-MRlG7iCOhFo-YDQarrt)

to

![](/files/-MRlGBAnwY1IFiavJDCH)