Custom CSS

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

Available on PREMIUM plan and above.

Go to Channel Configuration > Web > Appearance to make changes in the UI using CSS

Here are the classes that you can customize:

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 and 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	file-preview: label: .filepond--root .iconwrap textwrap file listitem: .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