Help and support

Resources that will teach you everything about LiveChat.

Customize your chat window with CSS

by Justyna Kraszewska

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.

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.

If you need help with customization, chat with us 24/7 or check the Experts market for implementation specialists.

Full-sized chat window

Extending the chat window from top to bottom

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:

Moving the chat window to the bottom left of the page

Placing chat window to the left

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:

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.

Moving the chat window with CSS, don’t forget 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, paste the following code to the custom CSS box and save changes.

CSS for desktop view:


Such placement is useful when you have some static element in the bottom right portion of you site. If you have no such element, this customization may need 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:

CSS for desktop view:

CSS for mobile devices:

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:

CSS for desktop view:

CSS for mobile devices:

Remember to substitute http://www.example.com/your_background.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:

CSS for desktop view:

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:

To move it to the right, you need a slightly different code:

Changing the color of the buttons in the chat window

Chat window button color

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:

CSS for mobile devices:


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

Removing the ‘Powered by LiveChat’ label

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

Removing the 'Powered by LiveChat' stamp

To do that, go to the Theme section, click on Customize using own CSS… paste the following code there. Remember to click on I’m done with editing and then on Save changes to save the settings.

CSS for desktop view:

CSS for mobile devices:

Changing the chat window width

You can easily manipulate the size of your chat window and make it wider or narrower.

Alter chat window size

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

CSS for desktop view:

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:

Removing the envelope icon

No transcript icon

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:

Removing ‘thumbs up’ and ‘thumbs down’ icons

No rating icon

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:

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.

Stick chat bar on the right hand side of the screen

Do that by using the following CSS code:

CSS for desktop view:

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

Changing the Circle icon color

The following piece of code will change the color of the minimized chat window in the Circle theme:

CSS for desktop view:

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.

Changing icon color for LiveChat chat window

Use the following piece of code to change the color of minimize chat, maximize chat and close icons:

CSS for desktop view:

To change the thumbs up, thumbs down, chat transcript and send a file icons, you need to use this code:

CSS for desktop view:

Using CSS window customization on mobile and responsive websites

If you want to use CSS custmization on a mobile or responsive site, you need to add an additional bit of code to your CSS styles. Simply add @livechat-mobile { at the beginning of the style and a closing bracket ( }) at the end.

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

Did you find this helpful? Yes No
Thanks for your feedback.
70% of people found this helpful.