Custom CSS

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;
}