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, put the following CSS code in your website’s code:

#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, insert the following css code in your website’s code:

#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, place the following CSS code in your website’s code:

#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… 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… 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, insert the following CSS code in your website’s 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;
}

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