Get the latest live chat benchmark data broken down by team size & industry

Read more
Comm100 Help > Live Chat > Settings & Customizations
How to Customize Your Chat Window with CSS Code

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. You can also read our Fully Commented CSS File for more examples.

To customize chat window with CSS, please log into your Comm100 control panel, and go to Campaign>Chat Window>Customize Style with Your Own CSS.

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:600px;
 }

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

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

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 Text and Background Color for Messages

The color of the message bubbles appearing in your chat window can be customized as follows (The example code for Agent Message in Classic chat window):

.window--classic .window__chatAgentMessage {
 color:#fff;
 background-color: #4f4f4f!important;
 }

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);
 background-repeat: repeat;
 background-position: left top;
 }

Note: If you also would like to change the background of Pre-chat form and Post-chat form, you can use following code instead:

.chat,.window__form{
 background: url(your_background_file.jpg);
 background-repeat: repeat;
 background-position: left top;
 }

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:

.window__chatInput:not(.chatInputContainer--typed) .window__chatSender svg {
 fill: #bbb;
}
.window__chatInput.chatInputContainer--typed .window__chatSender svg {
 fill: #db4237;
}

Remove Powered by Comm100 text from Chat Window

To reinforce your branding and create a clean look for your live chat, you can remove the “Powered by Comm100” text from Chat Window using following code:

.poweredby {
 display:none;
}

Square Avatar in Chat Window

When you use the Agent Avatar & Company Logo style, the chatting agent’s avatar will be displayed in a round shape by default. To make the avatar in a square shape as our classic one, you can input the following sample code:

.window--classic .header__avatarImage {
 display: block;
 border-radius: 0%;
 width: 50px;
 height: 50px;
}
.window--classic .agentMessage__avatarImg {
 display: block;
 width: 30px;
 height: 30px;
 border-radius: 0%;
}

Change the System Message Text Color Appearing in the Chat Window

To better fit your website, you can modify the color of the system text message displayed in the chat window.

.window--classic .window__chatSystemMessage {
 color: #e9b49c;
 font-size: 1em;
 margin-bottom:17px;
 text-align: center;
}

Change the Color of Minimize/Maximize/Close Icon

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:

.window__operation>a>svg, .window__operation>button>svg {
 fill: #7835b1;
}

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, and even add the rounded borders to the buttons:

.window--classic .btn {
 border-radius: 10px;
}
.btn-primary {
 color: #f0f0f0;
 background: #0c7c80;
 border: 1px solid #0c7c80;
}
.btn-primary:focus, .btn-primary:hover {
 background: #339fd9;
 border: 1px solid #339fd9;
}

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.

.form-fields .field-name {
 color: #329fd9;
 font-weight: bold; 
 }

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 change agents‘ chat messages text color and its background on mobile chat window:

.window--mobile .window--classic .window__chatAgentMessage {
 background: #c8c8c8;
 color: #4ca1d5;
}

Display Logo Image in Smaller Size

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

.window--mobile .window--classic .header__logoImg {
 max-height: 26px;
 max-width: 85px;
}

Change the Color of Close/Send Button on Chat Window

To change the color of the Close and Send buttons, you can customize your CSS code as below.

.window--mobile .window--classic .window__operation .icon-endchat,
.window--mobile .chatInputContainer--typed .window__chatSender svg {
 fill: #0b7286;
}

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:

.window--classic .input.input--effect01, .window--classic .select-box .select {
 border: 1px solid #d5964b; 
}

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.

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.