Help and support

Resources that will teach you everything about LiveChat.

Customize your chat window with CSS

by Jacob Firuta

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

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

If you need help customizing your live chat, check out our Experts page. A number of implementation specialists listed there will help you change the look of your live chat.

Placing the chat window on the bottom left of the page

Placing chat window to the left

To place your chat window in the bottom left portion of your website, go to the Theme section, click on Customize using own CSS… and copy and paste the following code there. Remember to click on I’m done with editing and then on Save changes to save the settings.

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

To move the chat window more to the left edge, decrease the left value.

If you are moving the chat window, remember to move the eye-catcher too!

Chat window in the bottom right, closer to the center

Chat window towards 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, place the following code there and save changes.

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

This type of change can be useful if you have some kind of static element at the bottom or right side of you website. If there is no such element present, this modification may require a custom graphic for the chat button to look good.

Rounded avatars in the chat window

Rounded avatar 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:

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

Custom chat window background

Custom chat 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:

#body-inner {
     background: url(your_background_file.jpg);
}

Remember to substitute your_background_file.jpg with a full path to your custom background.

Taller or shorter chat window

Chat window height

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:

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

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

Moving the eye-catcher

If you plan to move your chat window around, you might want to move the eye-catcher as well. In order to achieve that, you have to use the codes below.

To move it 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 chat button color

If you are a modern LiveChat skin user and you want to customize the chat button color, you can do it by customizing and then using the following piece of code:

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

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

Removing the ‘Powered by LiveChat’ message

If you’d like to provide a truly brand-less chatting experience, you can remove the small ‘Powered by LiveChat’ message from the chat window.

Removing the 'Powered by LiveChat' message

To do that, you need to add the following piece of code to your CSS:

	#powered
	{
	display:none;
	}

Changing the chat window size

You can easily manipulate the size of your chat window and make it bigger or smaller.

Bigger chat window size

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

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

Adjusting the width value will make the minimized chat window bigger or smaller.

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

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

Removing the transcript icon

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

	#email_transcript {display: none!important;}

Removing ‘thumbs up’ and ‘thumbs down’ buttons

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

	#rating {
		display:none;	
	}

Sticking the chat window to the right portion of the screen

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

Sticky chat window on the right hand side of the screen

Do that by using the following CSS code:

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

Changing the gray icons in Circle Theme

If you don’t like the gray icons available in the Circle theme, you can change them to a different color

Changing the Circle icon color

The following piece of code will allow you to change the color of the minimized Circle chat window

	#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 the icon color

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 minimize chat, maximize chat and close icons color:

	.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 using this code:

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

Using CSS window customization on mobile and responsive websites

If you have a mobile or responsive site and you want to modify your chat window using CSS, you need to add an additional bit of code to your CSS code. You need to add @livechat-mobile { at the beginning of the code and close the bracket (}) at the end.

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

	@livechat-mobile {

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

		#body-inner {
			color: #F0F0F0;
		}

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