New More Than Just Live Chat — Announcing Facebook and Twitter Integration in Comm100 Live Chat >> ×

Customize Your Chat Window with CSS Code

March 7th, 2016 | Settings & Customizations

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 about how you can customize live chat window with CSS code to achieve various customization requirements.

Change Chat Window Size

Change the width and the height of your chat window by using your own CSS code. Both of the popup and embedded chat windows will be of the same size as you’ve defined in the code.

For example, you may want to make your chat window a little wide when you display your banner image or agent avatars and company logo in your chat window:

#chat-window {
  width:500px;{
  height:360px;
}
Change Chat Window Size

While if you use a simple appearance without agent avatar and company logo, you may want to make the window size smaller:

#chat-window {
  width:280px;
  height:360px;
}
Change Chat Window to Smaller Size

Show Embedded Chat Window in Bottom Left

When you use the embedded chat window, by default, your chat window will be displayed in the bottom right of your page. You can make the chat window to appear in the bottom left if you have important content at the bottom right to show to your visitors. To achieve it, you just need to add a piece of custom CSS code as follows:

#chat-window {
  left:10px;
}
Embedded Chat Window in Bottom Left

You can decrease/increase the left value to move the chat window more/less to the left edge. While you’re doing so, you’re also suggested to adjust the position of your chat button for consistency.

Change Message Bubble Color

The color of the message bubbles appearing in your chat window can be customized as follows:

.chat-operator-message {
  color:#fff;
  background-color: #329fd9;
}
.chat-operator-message:before {
  border-color: transparent #329fd9 transparent transparent;
}
Change Message Bubble Color

Change Background Image of Chat Window

You can set a custom background image for your chat window by adding the following CSS code:

.chat {
  background: url(your_background_file.jpg);
}
Change Chat Window Background Img

Customize Send Message Button in Chat Window

You can define your own rules to customize the Send button in the Message Input Area of your chat window:

.chat-send {
  color:#fff;
  background-color: #329fd9;
}
.chat-send:hover {
  background-color: #51b8ef;
}
.chat-send:active {
  background-color: #248bc1;
}
Customize Send Message Button in Chat Window

Round Avatar in Chat Window

When you use the Agent Avatar & Company Logo style, the chatting agent’s avatar will be displayed in a rectangular shape. To make the avatar rounded and move down the avatar a little, you can input the following sample code:

.header-operator-avatar {
  border: none;
  border-radius: 30px;
  left:15px;
  top: 4px;
}
.header-operator-avatar-image {
  border-radius: 30px;
  max-height: 55px;
  min-height: 55px;
  max-width: 55px;
  min-width: 55px;
}
Round Avatar in Chat Window

Change the Color of Text Appearing in Window Title

To better fit your website, you can modify the color of the text in the title and footer bars of your pre-chat, chat, post-chat and offline message windows.

.title-text, .footer {
  color: #48befd;
}
Change Window Title Color

Remove the Border of Embedded Chat Window

You can remove the border of your embedded chat window, and in the meanwhile add modern shadow effect by adding the CSS code as follows:

#chat-window {
  border:none;
  box-shadow:0 2px 25px rgba(0,0,0,.2);
}
Remove Embedded Chat Window Border

Change the Color of Minimize/Maximize/Close Icon in the Window Title

You can add the following CSS code to customize the color of the minimize, maximize and close icons in the title of your pre-chat, chat, post-chat and offline message windows:

.title, .footer, .minimized {
  color: #48befd;
}
Change Min/Close Icon Color
Change Max Icon Color

Change the Color of Button Appearing on Pre-Chat/Post-Chat/Offline Message Window

The color of the buttons on your pre-chat, post-chat and offline message windows changes with the theme color you picked for your live chat. You can modify the color as you like:

input[type=button] {
  color: #fff;
  background-color: #329fd9;
}
input[type=button]:hover {
  background-color: #51b8ef;
}
input[type=button]:active {
  background-color: #248bc1;
}
Change Button Color on Pre-chat/Post-chat/Offline Message Windows

Customize the Style of Field Name Shown on Pre-Chat/Post-Chat/Offline Message Window

Customize the style of field names appearing in your pre-chat, post-chat and offline message windows.

.field-name {
  color: #329fd9;
  font-weight: bold;
}
Vertical Field Name Style
Horizontal Field Name Style

Customize Chat Window Style on Mobile Devices

If you want to deliver optimized experiences on mobile devices, you can define the style of your mobile chat window separately by adding the .mobile-window class name to the beginning of your CSS code.

  • Make Agent Chat Message in Blue

    Here is the sample CSS code of how to make agents‘ chat messages in blue on mobile chat window:

    .mobile-window .chat-operator-message {
      color: #329fd9;
    }
    Make Agent Chat Message in Blue
  • Display Logo Image in Smaller Size

    You can display your logo image in a smaller size on mobile devices by adding the code below:

    .mobile-window .header-logo-image {
      max-height: 26px;
      max-width: 85px;
    }
    Display Logo Image in Smaller Size
  • Change the Color of Close/More Option/Send Button on Chat Window

    To change the color of the Close, More Option and Send buttons, you can customize your CSS code as below. Note that these buttons are mobile specific so you don’t have to add .mobile-window.

    .icon-endchat, .icon-send, .icon-function, .icon-return {
      color: #48befd;
    }
    Change Close/More Option/Send Button Color
  • Change Window Title Color

    The color of the text, i.e. Chatting, in title bar can be customized as follows. Note that this element is mobile specific so you don’t have to add .mobile-window.

    .ui-title {
      color: #48befd;
    }
    Change Window Title Color
  • Change the Border Color of Text and Dropdown List Fields

    You can change the border color of text or dropdown list fields appearing in your pre-chat, post-chat and offline message windows by adding CSS code below:

    .ui-input-text, .ui-select {
      border-color: #329fd9;
    }
    Change Fields Border Color

Conclusion

There, you have it. You can customize the CSS code to have live chat in your own style. For more CSS customization instructions, please refer to our fully commented CSS file.

And here we’ve also outlined the structure of our chat window, offering a better view of each element in Comm100 Live Chat Window.

Structure of Chat Window with Branding Image
Structure of Chat Window with Agent Avatar

If you have any questions or require any assistance, please go to Comm100 website and click on the chat button floating on the left to chat with our online support team.