The CSS Editor available in the Web Chat channel appearance settings allows advanced customization of the chat window interface. It is recommended when standard settings (such as color, avatar, and logo) do not meet the project’s requirements, whether for business needs or visual criteria.
| ⚠️ Attention: The CSS Editor only affects the chat window and does not impact other elements of the page where the Web Chat is embedded. |
Below, we show you how to visually customize the Web Chat using the CSS Editor, including changes to the header, conversation background, message bubbles, font, and input field.
Where to modify?
💡 Tips
|
Header
| Change | CSS Code | Result |
| Change the background color of the header (the color behind the logo) | .chat-header { background: #FFD300 !important; } |  |
| Remove the header (to hide both the logo and the header space) | .chat-header { display: none !important; } |  |
Conversation Background
| Modification | CSS Code | Result |
| Change conversation background color | body { background-color: #FFD300 !important; } |  |
| Insert background image in the conversation. A valid image URL is required. | body { background-image: url(link) !important; } |  |
Chat bubbles and font
| Modification | CSS Code | Result |
| Change font size | .message-thread .message { |  |
| Change font color | .message-received .message-content { |  |
| Change user response font color | .message-sent .message-content { |  |
| Change bubble color | .message-received .message-content { |  |
| Change user response bubble color | .message-sent .message-content { |  |
User input field and actions
| Modification | CSS Code | Result |
| Remove file upload clip | .chat-footer form .clip.enabled { |  |
| Remove input field | .chat-footer { .message-thread { .message-thread-wrapper { |  |