# Custom CSS

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                                             | <p>.avatar<br>.popup-message<br>.popup-close-button</p>                                                                                                                                                  |
| Header Logo                                                | .avatar--title                                                                                                                                                                                           |
| Header Text                                                | .bot-title                                                                                                                                                                                               |
| Meta date information                                      | <p>.meta-info<br>.meta-info--label</p>                                                                                                                                                                   |
| Text message in the chat section                           | .text-message                                                                                                                                                                                            |
| Time-stamp & typing indicator                              | .timestamp                                                                                                                                                                                               |
| Options / Buttons dialog                                   | .option-button                                                                                                                                                                                           |
| Carousel Title/ Subtitle / Buttons                         | <p>.carousel-title<br>.carousel-subtitle<br>.carousel-button</p>                                                                                                                                         |
| Calendar Submit Button                                     | .submit-button                                                                                                                                                                                           |
| Carousel Image                                             | .card-view-image                                                                                                                                                                                         |
| Slider title and submit button                             | <p>.popup-title<br>.submit-button</p>                                                                                                                                                                    |
| File Upload , Submit, Add more button                      | <p>.popup-title<br>.submit-file<br>.add-file</p>                                                                                                                                                         |
| Home Button                                                | <p>.home--button<br>.reset--button</p>                                                                                                                                                                   |
| 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           | <p><strong>file-preview: label:</strong> </p><p>.filepond--root </p><p>.iconwrap </p><p><strong>textwrap file listitem</strong>: </p><p>.filepond--file-wrapper .</p><p>filepond--action-remove-item</p> |
| Form Input                                                 | .form-input                                                                                                                                                                                              |
| Phone Input, Seach box for country dropdown , Country list | <p>.phone-input:<br>.search-box-sub-container<br>.country-list</p>                                                                                                                                       |
| Google Calendar Drawer                                     | .google-calendar                                                                                                                                                                                         |