Customize your chat window with CSS

by Justyna Kraszewska

You can spice up your chat window using custom CSS styles.

Here are some examples of possible customizations and instructions on how to achieve them. If you are planning on modifying the look of your chat window on a mobile or responsive website, make sure to add an additional piece of code to the CSS.

Transparent chat window
Full-sized chat window
Placing the chat window on the bottom left of the page
Chat window in the bottom right, closer to the center
Rounded avatars in the chat window
Custom chat window background
Taller or lower chat window
Moving the eye-catcher
Changing the color of the buttons in the chat window
Changing the chat window width
Removing the get chat transcript option for your customer
Removing ‘thumbs up’ and ‘thumbs down’ icons
Sticking the chat bar to the right edge of the screen
Changing the gray icons in Circle Theme
Changing color of the icons
Hiding the chat window when printing website
Using your custom font in chat window
Using CSS window customization on mobile and responsive websites

After you save the changes to your CSS styles, you can check the new look of your chat window on your Sample Page. To access it, go to Installation section and click on Preview your chat window on a sample page link there.

If you need help with customization, chat with us 24/7 or check the Experts market for implementation specialists.

Transparent chat window

Do you like the transparent chat window that we use on our website? Copy the CSS styles from below and feel free to use it on your own as well!

Please note that this style does not work for mobile devices. Also, make sure that you are using it with Modern as your chat window theme.

CSS for desktop view:

#operator_avatar {
border: none !important;
}

#livechat-full {
  bottom: 0 !important;
  right: 0 !important;
  height: 740px !important;
  max-height: 100% !important;
  width: 400px !important;
}

#wrapper {
  padding: 2rem 2rem 2rem 2rem !important;
  top: -20px !important;
}

.pop-in #content, #wrapper {
  background: none;
  border-radius: 0.5rem !important;
}

.title-bg, #body-inner, #operators td, #survey-after-greeting, #footer td {
  background: rgba(0,0,0,.65) !important;
  box-shadow: none !important;
}

.operators-bar .wrapper, .title-button, .title-button:hover {
  background: none !important;
}

.operator-name, .operator-role, .icon-thumbs-down, .icon-thumbs-up, .icon-email {
  color: #fff !important;
  border-right-color: #fff !important;
}

.avatar {
  border-radius: 100% !important;
}

#title {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

#body-container p {
  padding: .25rem 1rem;
}

.msg-text {
  padding: .9rem 1.1rem;
  width:auto;
  display: inline-block;
  margin-bottom: .125rem !important;
}

.msg-text a {
  color: inherit!important;
}

.client .msg-text {
  background: #3e7ce4;
  color: #fff;
  border-radius: 1.4rem 1.4rem .3rem 1.4rem;
}

.client.same-author .msg-text {
  border-radius: 1.4rem .3rem .3rem 1.4rem;
}

.client.last-sent .msg-text {
  border-radius: 1.4rem .3rem 1.4rem 1.4rem;
}

.operator .msg-text {
  background: #fff;
  color: #000;
  border-radius: 1.3rem 1.4rem 1.4rem .3rem;
}

.operator.same-author .msg-text {
  border-radius: .3rem 1.4rem 1.4rem .3rem;
}

.client .author, .operator .author {
  color: #fff !important;
}

.client {
  text-align: right;
}

.time {
  display: none;
}

.last-sent .delivered-indicator, .last-seen .last-seen-indicator {
  display: block !important;
  color: hsla(0,0%,100%,.8);
  font-size: .65rem;
  clear: both;
  padding: .2rem;
}

.last-seen .delivered-indicator {
  display: none !important;
}

#typing-indicator {
  color: hsla(0,0%,100%,.8);
  text-align: right;
}

#rate_me_feedback_form, #email_transcript_form, #view-offline-form-sent div, #view-offline-message-sent p {
  margin: 2rem 1rem 1rem !important;
  border-radius: 1rem;
  background: #fff;
  color: #000;
  text-align: center;
  padding: 1rem .5rem !important;
  box-shadow: 0px 0px 20px 2px rgba(0,0,0,1) !important;
}

.system {
  text-align: center;
}

.system .msg-text, .system .msg-text a {
  padding: .5rem;
  color: hsla(0,0%,100%,.8);
}

#email_transcript_form input[type=submit], #operators #rate_me_feedback_form input[type=submit], .submit input, #send-file, #leave-chat {
  background-color: #3e7ce4 !important;
  box-shadow: none !important;
}

.submit input:hover {
  opacity: 1 !important;
}

#confirm-closing p.actions {
  width: 100% !important;
}

#confirm-closing {
  color: hsla(0,0%,100%,.8);
}

.form {
  border-radius: 1rem;
  background: #fff;
  color: #000;
}

#body label {
  color: #000;
}

.message-wrapper {
  padding: 0 !important;
}

#footer td {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 3px;
}

#powered .footer {
  background: none!important;
  color:#fff;
}

#footer #powered {
  text-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.7);
}

#content .form .form_header {
  margin: 10px 0px !important;
}

#message-wrapper .btn-send {
  display: block;
  right: 2.75rem!important;
  position: absolute;
  color:transparent;
  height: 20px;
  z-index: 3;
  bottom: 3.5rem;
  border: none;
  background: url('https://static.livechatinc.com/1520/R5WJ1/c8fc72cefff281b99213b7bb921b6fb6/send_blue.png') transparent no-repeat center center;
  background-size: auto 100%;
}

#message {
  padding-right: 2.65rem;
}

#send-file-clip {
  right: 1.05rem;
  top: .5rem;
}

#send-file-clip .icon-clip {
  font-weight: bold;
  color: #1556c1;
  text-shadow: 0 0.1rem 0.1rem rgba(0,0,0,.175);
}

#popup-file {
  border-radius: 1rem;
  background: #fff;
  color: #000;
  left: 10%;
  width: 80%;
}

.thumbnail {
  border: none!important;
  margin: 5px auto;
}

.integration {
  text-align:center;
}

.integration .msg-text {
  padding: .9rem 1.1rem;
  width:auto;
  display: inline-block;
  margin-bottom: .125rem !important;
  background: #fff;
  border-radius: 1.4rem;
}

.url-preview {
  background: #fff;
  padding: .5rem;
  border: none;
  border-radius: 1.4rem;
  margin-bottom: 10px;
}

.details .title, .details .description {
  color: #000 !important;
}

.url-preview.hover .details .title {
  color: #3e7ce4!important;
}

#invitation_message_text {
  color: white;
  background: #2095F2;
}

.invitation_message:after {
  border-color: transparent;
}

.rating .icon-thumbs-up, .rating .icon-thumbs-down {
color: #646669!important;
}

Full-sized chat window

Extending the chat window from top to bottom

To extend your chat window so that it’ll look like a full-sized one, go to the Theme section and click Customize using own CSS…. Paste the following code in the custom CSS box. After pasting the code, click I’m done with editing and Save changes to finalize.

CSS for desktop view:

#livechat-full {
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  height: auto !important;
}

#wrapper {
  padding-right: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

#title {
  border-radius: 0;
}

Moving the chat window to the bottom left of the page

To move your chat window to the left of your website, go to the Theme section and click Customize using own CSS…. Paste the following code in the custom CSS box. When you are happy with the results, click I’m done with editing and Save changes to finalize.

CSS for desktop view:

#livechat-compact-container,
#livechat-full {
  left: 20px!important;
  right: auto!important;
}

To move the chat window more to the left, decrease the left value. So instead of left: 20px !important;, you may try left: 10px !important; and see how it looks like on your sample page.

Moving the chat window with CSS, don’t forget to move the eye-catcher too!

Chat window in the bottom right, closer to the center

To have your window placed in the bottom right, a bit more to the center, open the Theme section and click on the Customize using own CSS… link. Next, paste the following code to the custom CSS box and save changes.

CSS for desktop view:

#livechat-compact-container,
#livechat-full {
  right: 40px !important;
}

Such placement is useful when you have some static element in the bottom right portion of you site. If you have no such element, this customization may need a custom graphic for the chat button to look good.

Rounded avatars in the chat window

This piece of code will make your chat window avatars rounded. Go to the Theme section, click on Customize using own CSS… and input the following code there:

CSS for desktop view:

.operators-bar img {
  border-radius: 30px !important;
}

CSS for mobile devices:

@livechat-mobile {
  .operators-bar img {
    border-radius: 3rem !important;
  }
}

Custom chat window background

You can set up a custom background for your chat window. To do that, go to the Theme, click on Customize using own CSS… and put the following code there:

CSS for desktop view:

#body-inner {
  background: url('http://www.example.com/your_background.jpg');
  background-repeat: no-repeat !important;
}

CSS for mobile devices:

@livechat-mobile {
  #body-inner {
    background: url('http://www.example.com/your_background.jpg');
    background-repeat: no-repeat !important;
  }
}

Remember to substitute http://www.example.com/your_background.jpg with a full path to your custom background.

Taller or shorter chat window

To make your chat window taller or shorter, go to the Theme settings, click on Customize using own CSS… and type in the following code:

CSS for desktop view:

#livechat-full {
  height: 350px !important;
}

Changing the height value will make the chat window taller or shorter.

Moving the eye-catcher

When moving your chat window, you may want to move the eye-catcher too. In order to do that, use the following code snippets:

Following CSS styles work for desktop view. The eye-catcher is not displayed on mobile sites.

To move your eye-catcher to the left, use this code:

#livechat-eye-catcher {
  left: 20px !important;
  width: 250px !important;
}

To move it to the right, you need a slightly different code:

#livechat-eye-catcher {
  right: 20px !important;
}

Changing the color of the buttons in the chat window

If you are using the Modern theme for your LiveChat window and want to customize the chat button color, you can do it with the following piece of code:

CSS for desktop view:

.submit input {
  background-color: #6363CF !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1),
  inset 0 -3px 0 rgba(0, 0, 0, 0.05) !important;
}

CSS for mobile devices:

@livechat-mobile {
  .form .submit input, .submit input {
    background-color: #00FFFF !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1),
                inset 0 -3px 0 rgba(0, 0, 0, 0.05) !important;
  }
}

For additional information on the CSS customization you can check out this documented CSS example file.

Changing the chat window width

You can easily manipulate the size of your chat window and make it wider or narrower.

Start with changing the size of the minimized (closed) chat window by using the following piece of code:

CSS for desktop view:

#livechat-compact-container {
  width: 500px !important;
}

Adjusting the width value will make the minimized chat window wider or narrower.

Next, you should change the same value for the maximized (open) chat window. You can also decide about the height of chat window:

CSS for desktop view:

#livechat-full{
  height: 500px !important;
  width: 500px !important;
}

Removing the get chat transcript option for your customer

You can remove the chat transcript icon from the chat window by adding a single line of code to your custom CSS.

CSS for desktop view:

#email_transcript {
  display: none !important;
}

Removing ‘thumbs up’ and ‘thumbs down’ icons

If you don’t want your customers to have the rating option, you can remove it completely from the chat window. Do that by adding the following CSS to your custom CSS.

CSS for desktop view:

#rating {
  display:none !important;
}

Sticking the chat bar to the middle right of the screen

You can stick the minimized chat window to the right border of the page.

Note that only the minimized chat bar will be moved, the chat window will still open at the bottom of the page.

Stick chat bar on the right hand side of the screen

Do that by using the following CSS code:

CSS for desktop view:

#livechat-compact-container {
  bottom: 50%!important;
  right: -99px!important;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

We strongly advise not to use this CSS style for mobile displays. It doesn’t work well on them due to various mobile screens resolutions.

Changing the gray icons in Circle Theme

If you don’t like the gray icons of the Circle theme, you can change their color

The following piece of code will change the color of the minimized chat window in the Circle theme:

CSS for desktop view:

#content-container #content {
  background: #4781D9;
}

#open-icon, #open-label {
  color: #ffffff;
}

In the example, we changed the default icon color to white (color: #ffffff;) and the background color to blue (background: #4781D9;).

Changing color of the icons

You can freely modify the color of the icons in the chat window. This will help you adjust the chat window look to better fit your website’s design.

Changing icon color for LiveChat chat window

Use the following piece of code to change the color of minimize chat, maximize chat and close icons:

CSS for desktop view:

.icon-minimize, .icon-close, #open-icon {
  color: #F00;
}

To change the thumbs up, thumbs down, chat transcript and send a file icons, you need to use this code:

CSS for desktop view:

#operators .icon-thumbs-up, #operators .icon-thumbs-down, #operators #email_transcript .icon-email, #send-file-clip .icon-clip {
  color: #0081FF;
}

Hiding the chat window when printing website

If you or your website visitors print the content of your website, you can easily hide the chat window just during the printing process. All that you have to do is to add the below CSS code to the HTML source code of your website or to the CSS stylesheet that you use to style the elements your page.

CSS for desktop view:

@media print {
	#livechat-full, #livechat-compact-container, #livechat-eye-catcher {
	   display: none!important;
	}
}

Using your custom font in chat window

If you wish to personalize your chat window with your custom font, you can do that with the CSS code below. There are just few things that you have to remember about:

the CSS code below includes the direct URL to the font itself – remember that you have to replace it with the link to your own font;
make sure to replace the name of the font as well, making sure that it’ll match the name of the font from your URL address.

The best way to load your own font is to create a ticket on your LiveChat license and upload the font itself as the attachment. After doing so, copy the link to the attachment and use it to replace the link in the CSS code below.

CSS for desktop view:

@font-face {
font-family: 'FuturaPTWebBook';
font-style: normal;
font-weight: 400;
src: local('FuturaPTWebBook'), local('FuturaPTWebBook'), url(https://static.livechatinc.com/4182101/BLENI/e98914814d6e2fbfa47d1e07389bc4bf/FTN45__W.woff) format('woff');
}

#body input, #body label, #body select, #body table, #body textarea, a, body, input, label, select, table, table#content, textarea {
font-family: 'FuturaPTWebBook'!important;
}

Using CSS window customization on mobile websites

All of the above CSS codes apply to the desktop version of your website. And what about using them on your mobile website as well? All that you have to do is to copy the CSS code that you are already using for desktop. After that, simply add @livechat-mobile { at the beginning of the style and a closing bracket (}) at the end of it and paste the code onto LiveChat’s Customize using own CSS section.

By adding the same CSS codes, but one of them with additional mobile container, you will make sure that your CSS customization will work for both, desktop and mobile.

Here’s how an example CSS code looks like with the added component for mobile:

@livechat-mobile {
  .style-background-color, .operators-bar .wrapper {
    background: #292929 !important;
  }

  #body-inner {
    color: #F0F0F0;
  }

  #message-placeholder {
    color: #f0f0f0;
  }
}

Note that customizing your mobile chat window with CSS will not work on Firefox browser. It may also not work properly on older versions of Android systems.

Hopefully, you have found this article helpful but if you have any additional questions, feel free to start a chat with us – we are available 24/7/365!

Did you find this helpful? Yes No

Thanks for your feedback.

77% of people found this helpful.

Help and support

Resources that will teach you everything about LiveChat.

No LiveChat account yet? Try it for free now!

Customize your chat window with CSS

Transparent chat window

Full-sized chat window

Moving the chat window to the bottom left of the page

Chat window in the bottom right, closer to the center

Rounded avatars in the chat window

Custom chat window background

Taller or shorter chat window

Moving the eye-catcher

Changing the color of the buttons in the chat window

Changing the chat window width

Removing the get chat transcript option for your customer

Removing ‘thumbs up’ and ‘thumbs down’ icons

Sticking the chat bar to the middle right of the screen

Changing the gray icons in Circle Theme

Changing color of the icons

Hiding the chat window when printing website

Using your custom font in chat window

Using CSS window customization on mobile websites

Related

Start free LiveChat trial!

5-minute setup, test out the Team plan features for 30 days, no credit card required.