In this article, we will present the main CSS classes, how to change the style, and some examples of customization of Live Chat.
- Inserting the <style> tag next to the publication
- Inserting the classes next to the source code of the site
- Header Color
- Main Live Chat background-color
- Input messages field background
To change the chat style via CSS you can add the <style> tag next to the embed code in your post or you can insert the classes inside the <head> and <style> tag of your website's source code.
Inserting the <style> tag next to the publication
For this example, we added the <style> tag (1) within the same page where we publish the embed code of the chat (2).
Inserting the classes next to the source code of the site
background-color: #BDBDBD !important;
Next to the header, we have a container border that inherits the main color settings, to change it just include the class:
border-top: 1px solid #BDBDBD !important;
Main Live Chat background-color
This class changes the background color of the main chat structure and most of the tabs.
Input messages field background
Main tab settings:
if there are direct and channels, the style of the main tab must also be configured:
Click here to access the full list of Live Chat CSS classes.
If there is any doubt is to contact our support by chat.