Custom CSS

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

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:

FieldClass Name

Pop-up message

.avatar .popup-message .popup-close-button

Header Text


Header Logo


Meta date information

.meta-info .meta-info--label

Text message in the chat section


Time-stamp & typing indicator


Options / Buttons dialog


Carousel Title/ Subtitle / Buttons

.carousel-title .carousel-subtitle .carousel-button

Calendar Submit Button


Carousel 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


Input box on the chat widget


Avatar for title


Header of the chat widget


Carousel Root, Image , Carousel slider frame,

carousel & carousel-image: .slider-frame .card-image

File List item Root and Classes for title , icon

file-preview: label: .filepond--root .iconwrap textwrap file listitem: .filepond--file-wrapper .filepond--action-remove-item

Form Input


Phone Input, Seach box for country dropdown , Country list

.phone-input: .search-box-sub-container .country-list

Google Calendar Drawer


Last updated