Web Chat Widget CSS Selectors
Use these CSS selectors to further customize the Web Chat Widget iframe
CSS Selectors
Function
mr-1
selects the title text at the top, next to the logo
text-xs
selects the response status text, below the title text
custom_chat_header
selects the background of the header section
message-content
selects the text of the conversation bubbles on the chatbot side
chat-bubble
selects the text of the conversation bubbles on the user side
bot-widget-bubble
selects the chat bubble that appears in the bottom corner of the website
text-slate-700
selects the divider line and the text that mark the date section of a conversation
agent
selects the reply box of the chatbot and of the LiveChat agents in the conversation
user
selects the reply box on the user side in the conversation
chat-message--input
selects the section of the box where you type your message
bg-white
selects the background behind the chat boxes