Webchat Widget CSS Selectors
- Hammad Siddiqui
- Matthew Miao
- Mark van der Made
These CSS Selectors can be used to further customize the chat widget iframe
CSS Selectors | Function |
|---|---|
mr-1 | targets the heading text on top beside the logo |
text-xs | targets the reply status text below the heading text |
custom_chat_header | targets the background section of the heading |
message-content | targets the text in conversation bubbles on the chatbot side |
chat-bubble | targets the text in conversation bubbles on the user side |
bot-widget-bubble | targets the chat bubble showing up on the bottom corner of the website |
text-slate-700 | targets the divider line and text that shows the date section of a conversation |
agent | targets the reply box from chatbot and live chat agents side of the conversation |
user | targets the reply box from the user’s side of the conversation |
chat-message--input | targets the box section where you type your message |
bg-white | targets the background behind the chatboxes |