Help and support

Resources that will teach you everything about LiveChat.
by Jacob Firuta

Customize your chat window with CSS

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-compact-container,
#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-compact-container,
#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-compact-container,
#livechat-full {
     right: 40px !important;
     bottom: 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.