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

.bot-title

Header Logo

.avatar--title

Meta date information

.meta-info .meta-info--label

Text message in the chat section

.text-message

Time-stamp & 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, Seach box for country dropdown , Country list

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

Google Calendar Drawer

.google-calendar

Last updated