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 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-full {
     left: 20px;
     right: auto;

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!

Wider chat window

Wider chat window

To make your chat window wider, go to the Theme section, select Customize using own CSS… and place the code below there. Save changes when you are done.

#livechat-full {
     width: 450px !important;

By changing the width value you can make the window wider or thinner.

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


Custom social media icons in the chat window

If you want to completely stylize the chat window, you should change the design of your social media buttons to make them more in line with your design.

Custom social media icons

You change the icons by using the following piece of code:

	.s-facebook { 
	background-image:url('link') !important; 
	background-position: 0px 0px !important;
	width: 16px !important;
	height: 16px !important;
	background-size: 16px 16px !important;

In this particular example, the Facebook icon will be changed. By modifying the background-image:url, you can change the look of the icon. Simply provide a link to the new icon file.

You can change the size, shape and position by modifying the background-position, width, height and background-size values.

In the same way, you can change the icons for Twitter (.s-social-twitter) and Google+ (.s-google).

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:

	#full-view-button span + span {
	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:

	height: 400px !important; 
	width: 400px !important;