Customize your chat window with CSS

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.

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!

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

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.

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

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

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.

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.

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.

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.

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

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!