Contents x
- Getting Started
- Guides
- Connecting to Server API (Restful)
- Extend Comm100 by Apps
- Mobile SDK
- Bot Integration
- SSO (Single Sign-On)
- VoIP Integration
- Embed Comm100 into other system
- Custom CSS
- Apps
- Server API (Restful) Reference
- Introduction
- Authentication
- Contact
- LiveChat
- Agent Private Message
- Audio & Video Chat
- Auto Distribution
- Auto Invitation
- Banned Visitor
- Banned IP
- Campaign
- Chat
- Custom Variable
- Custom Variable Config
- Chat Server
- Conversion Action
- Dynamic Campaign
- Field
- Installation
- Integration Calendly
- Offline Message
- Real Time
- Segment
- Segment Config
- Secure Forms
- Screen Sharing Config
- Shift
- Shift Config
- Visitor History
- Visitor Single Sign-On (SSO)
- Webhook
- Wrapup Category Config
- Wrap-Up Field
- Bot
- Agent Assist
- Agent Assist Learning Question
- Agent Assist Synonym
- Chatbot
- Chatbot Canned Quick Reply
- Chatbot Entity
- Chatbot Intent
- Chatbot Engine
- Chatbot Intent Answer
- Chatbot Action
- Chatbot Intent Category
- Chatbot Intent Question
- Chatbot Learning Question
- Chatbot Message When A Visitor Start A Chat
- Chatbot Message When Not Helpful
- Chatbot Message When Providing Possible Answer
- Chatbot No Answer Message
- Chatbot Smart Trigger
- Chatbot Generative Answers Source
- Chatbot Generative Answers Content
- Prebuilt Entity
- Task Bot
- Taskbot Booked Calendly Meeting
- Taskbot Version
- Bot Message API
- Bot Session API
- VoiceBot
- Ticketing
- KB
- Global Setting
- Action Type
- Agent
- Custom Agent Away Status
- Audit Log
- Agent Single Sign-On Config
- Credit Card Masking Config
- Department
- Login IP Allowlist
- Auto Translation
- Module
- Password Policy Config
- Permission
- Private Canned Message
- Private Canned Message Category
- Public Canned Message
- Public Canned Message Category
- Restricted Words Config
- Role
- Role Config
- Site Profile
- System Avatar
- Visitor
- Department Config
- Secure Forms
- Reporting
- Visitor Side API (JavaScript) Reference
- Partner API Reference
Custom CSS
Article summary
Did you find this summary helpful?
Thank you for your feedback
Comm100 Live Chat Window can be fully customized by using your own CSS code. This allows you to deliver a consistent and professional image that resonates with your branding and website.
This article introduces typical examples of how you can customize the live chat window with CSS code to achieve various customization requirements. You can also read more at How to Customize the Chat Window with CSS Code.
The following is a full template of custom CSS.
/**
* Live Chat Window Customization Example
*
* ## README ##
*
* The class name shown in this example will remain intact during later
* upgrades, while the HTML structure might be adjusted. We hence
* recommend you use CSS selector based on class names instead of
* element selectors. In other words, ".title" is better than "div.title".
*
* A live preview of how Chat Window looks like after the customization
* is available, enabling you to conveniently adjust your CSS in real time.
*
/**
* CSS Selectors named window--classic is for the Classic style chat window,
* CSS Selectors named window--circle is for the Circle style chat window
*/
/**
* == General Customization ==
*/
body,
html {
margin: 0;
}
html {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 15px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "SourceSans Pro", Arial;
line-height: 1.42857143;
overflow: hidden;
}
::-webkit-input-placeholder {
color: #bbb;
}
::-moz-placeholder {
color: #bbb;
}
:-ms-input-placeholder {
color: #bbb;
}
.multipleText {
-webkit-appearance: none;
}
.multipleText {
border: 1px solid #ddd;
padding: 5px 10px;
outline: 0;
transition: border-color 0.2s;
border-radius: 5px;
width: 100%;
font-size: 1.0666667rem;
overflow: auto;
}
/**
* == Header Area ==
* It displays your Banner Image, or Agent Avatar with Company Logo,
* depending on which header style you choose.
*/
.window--classic .window__headerBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.window__operation .window__operation-menu ul li > a > svg {
fill: #333;
margin-right: 10px;
float: left;
margin-top: 7px;
}
.window__operation > a > svg,
.window__operation > button > svg {
fill: #fff;
opacity: 0.7;
}
.window--circle .window__operation > a > svg,
.window--circle .window__operation > button > svg {
fill: #5d5d5d;
}
.window--classic .header__bannerImg {
display: block;
max-width: calc(100% + 54px);
margin: 0 -27px -23px;
}
.window--classic .header__avatar {
float: left;
margin-right: 17px;
width: 45px;
height: 45px;
-ms-flex-item-align: start;
align-self: flex-start;
}
.window--classic .header__avatarImage {
display: block;
border-radius: 100%;
width: 45px;
height: 45px;
}
.window--classic .header__agent {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.window--classic .header__agentName {
font-size: 1.133333rem;
line-height: 1.29;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.window--classic .header__agentTitle {
font-size: 0.8rem;
line-height: 1.25;
color: #fff;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.window--classic .header__agentBio {
font-size: 0.8rem;
line-height: 1.17;
color: #fff;
opacity: 0.8;
margin-top: 4px;
padding-left: 60px;
padding-bottom: 2px;
margin-bottom: -2px;
max-height: 84px;
overflow-y: auto;
}
.window--classic .header__logo {
margin-left: auto;
margin-top: 9px;
margin-bottom: 5px;
}
.window--classic .header__logoImg {
max-height: 45px;
max-width: 100px;
display: block;
float: right;
width: auto;
height: auto;
}
.window--classic .header__teamName {
font-size: 1.133333rem;
line-height: 1.29;
color: #fff;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 8px;
}
.window--classic .header__teamAvatar {
position: relative;
width: 142px;
height: 40px;
margin: 9px auto;
}
.window--classic .header__teamAvatarImg {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
}
.window--classic .header__teamAvatarImg:nth-child(1) {
left: 0;
z-index: 9;
}
.window--classic .header__teamAvatarImg:nth-child(2) {
left: 49px;
z-index: 8;
}
.window--classic .header__teamAvatarImg:nth-child(3) {
left: 99px;
z-index: 7;
}
.window--circle .header__bannerImg {
display: block;
max-width: calc(100% + 40px);
margin: 0 0 -15px -20px;
}
.window--circle .header__avatar {
position: absolute;
top: -69.5px;
left: 50%;
margin-left: -35px;
}
.window--circle .header__avatarImage {
display: block;
border-radius: 100%;
width: 65px;
height: 65px;
margin: 0 auto;
}
.window--circle .header__agentName {
max-width: calc(100% - 90px);
margin: 0 auto;
font-size: 1.13333333rem;
color: #333;
line-height: 1.29;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.window--circle .header__agentTitle {
font-size: 0.8rem;
color: #333;
margin-top: 2px;
line-height: 1.25;
opacity: 0.5;
}
.window--circle .header__agentBio {
text-align: center;
margin-top: 2px;
margin-bottom: 1px;
padding-bottom: 2px;
font-size: 0.8rem;
color: grey;
line-height: 1.17;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
max-height: 70px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
width: 100%;
opacity: 0.8;
overflow-y: auto;
}
.window--circle .header__teamName {
font-size: 1.133333333333333rem;
line-height: 1.29;
color: #333;
margin-top: 21px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.window--circle .header__teamAvatar {
position: absolute;
left: 50%;
top: -22px;
width: 112px;
height: 42px;
margin-bottom: 10px;
margin-left: -56px;
-webkit-animation: fadeInDown 292ms cubic-bezier(0.785, 0.135, 0.15, 0.86)
both;
animation: fadeInDown 292ms cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.window--circle .header__teamAvatarImg {
position: absolute;
width: 44px;
height: 44px;
border: 2px solid #fff;
border-radius: 100%;
top: 0;
}
.window--circle .header__teamAvatarImg:nth-child(1) {
z-index: 8;
}
.window--circle .header__teamAvatarImg:nth-child(2) {
left: 36px;
z-index: 9;
}
.window--circle .header__teamAvatarImg:nth-child(3) {
right: 0;
z-index: 10;
}
.window--circle .window__headerBox {
border-bottom: 1px solid #ddd;
width: calc(100% - 40px);
margin: 0 auto;
padding-left: 0;
padding-right: 0;
padding-bottom: 15px;
}
/**
* == Form ==
*/
.form-fields .field__label {
font-size: 0.8rem;
line-height: 1rem;
float: left;
font-family: "SourceSans Pro Bold";
}
.form__input {
height: 35px;
width: 100%;
}
/**
* == Chat Message ==
*/
.window__chat {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
padding: 18px 27px 0;
margin-bottom: 0;
}
.chat__greetingContainer .window__chatSystemMessage a[href],
.chat__greetingContainer .window__formGreeting a[href] {
color: #666;
border-bottom: 1px solid rgba(102, 102, 102, 0.6) !important;
}
.window__chatSystemMessage {
color: #bbb;
font-size: 1rem;
text-align: center;
-webkit-animation: message--show 458ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: message--show 458ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
word-wrap: break-word;
}
.window__chatAgentMessage {
max-width: calc(100% - 67px);
}
.window__chatAgent,
.window__chatVisitor {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-animation: message--show 458ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: message--show 458ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
position: relative;
}
.window__chatVisitor {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.agentMessage__avatar {
margin-right: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.agentMessage__avatarImg {
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
background: #f4f5f6;
margin-bottom: 15px;
}
.window__chatAgentMessage,
.window__chatVisitorMessage {
position: relative;
font-size: 0.93333333rem;
line-height: 1.57;
padding: 17px 22px 19px;
word-wrap: break-word;
word-break: break-word;
border-radius: 5px;
}
.window--mobile .window__chatAgentMessage {
border: 1px solid #ccc;
}
.window__chatVisitorMessage {
margin-left: 67px;
max-width: calc(100% - 67px);
background-color: #329fd9;
color: #fff;
border-bottom-right-radius: 0;
}
.window__chatAgentMessage {
border-bottom-left-radius: 0;
}
.chat-time {
opacity: 0;
color: #fff;
font-size: 0.8rem;
background: rgba(0, 0, 0, 0.6);
padding: 0 5px;
line-height: 17px;
height: 17px;
border-radius: 8px;
transition: opacity 50ms linear;
position: absolute;
z-index: 1;
}
.window__chatAgentMessage {
background: #f5f7f9;
color: #333;
}
/**
* == Text Area in Input Area ==
*/
.chat-input__controlbox {
padding: 10px 10px 10px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.window__chatInputControl {
display: block;
width: 100%;
padding-top: 0;
padding-bottom: 0;
font-size: 1.06667rem;
color: #333;
outline: 0;
}
.window__chatSender {
position: absolute;
right: 26px;
bottom: 16px;
width: 20px;
height: 20px;
border: none;
background: 0 0;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.chat-input__toolbox button svg {
fill: #bbb;
}
.window__chatInputControl {
border: none;
background-color: transparent;
padding: 0 10px 0 25px;
max-height: 84px;
min-height: 27px;
overflow-y: hidden;
overflow-x: hidden;
height: 27px;
line-height: 1.27;
}
/**
* == Footer ==
*/
.footer {
-ms-flex-negative: 0;
flex-shrink: 0;
z-index: 999;
width: 100%;
padding-left: 15px;
padding-right: 15px;
font-size: 0.8rem;
height: 23px;
background: 0 0;
border-radius: 0 0 5px 5px;
}
CSS
Was this article helpful?
Thank you for your feedback! Our team will get back to you
How can we improve this article?
Your feedback
Comment
Comment (Optional)
Character limit : 500
Please enter your comment
Email (Optional)
Email
Please enter a valid email