Help and support

Resources that will teach you everything about LiveChat.

Chat window customization

by Jacob Firuta

You can use several different tools when trying to raise your brand awareness and one of those tools is the LiveChat window customization. By creating a customized look of your chat window you can make it an integral part of your website and the whole customer service process.

It’s like entering an Ikea – you expect a blue shirted employe there and you also expect that he or she will help you. You simply have to recreate that feeling.

To achieve this, follow these simple guidelines.

You can set up different chat window look and feel for each of your groups. Read our tutorial about dividing LiveChat by groups.

Chat window theme

You can choose from several chat window skins. You can pick one of them in the theme section. Simply select one and click on the Save changes button.

Chat window customization options in LiveChat
When changing the chat window skin, you can change the Start chat button color too to make those two fit. You can do that by using this piece of code.

Color schemes

You can choose the color of your chat window. Do this by going to your Theme section. You can use the color picker or type in the hex code for the desired color.

Editing window color in LiveChat

Choosing a color scheme similar to that of your company colors or logo will increase your visitors’ website immersion and provide a great experience.

Colorcombos is an easy way to select color for your chat window. When you provide your URL address, this site will provide you with the right color for your chat window.

Remember to Save changes when you are done.

Use CSS styles to customize your chat window look further.

Mobile chat window

You can test how the mobile chat window will look. To do that, go to the Theme and use the desktop | mobile switcher.

Mobile window preview in LiveChat

Social media

By allowing your visitors to access your social media channels straight from the chat window, you can considerably boost your reach.

To add Facebook, Twitter and Google+ buttons to your chat window, go to your Themes section, and select the Advanced window tweaks option.

Adding FB button in LiveChat

Next, select the social media button you want to add and type in your profile address. Click on I’m done editing and then on Save changes to finalize.

You can integrate LiveChat with your social media channels, here are the integrations we offer.


Uploading your company’s logo will increase your chat window’s credibility. To do this, go to your Theme section and click on the Advanced window tweaks. You need to enable the Display logo box and then click on the Upload your logo option.

Uploading logo in LiveChat

Hit I’m done editing and Save changes when you are done.

Try not to go overboard with the logo size, you don’t want to focus all the visitors attention on your logo, they should primarily focus on the chat itself. Bigger is not always better! Try starting with a 180px by 100px logo and see if it fits.

Mobile icon

When you are on the move, the ability to stay online and chat with visitors is very important – that is why we created mobile apps. However, this also means that your are not always able to answer the chat, or your response time can be a bit slower. It may be very useful to let your visitors know that you are chatting from a mobile device.

To turn this function on, go to your Theme section, select Advanced widow tweaks and enable the Display mobile icon when agent is using a mobile device option.

Displaying mobile icon in chat

Remember to click on Save changes to finalize your decision.

Mobile devices allow you to stay online while away from your desk. You can also have several instances of LiveChat running on different devices.

To learn more about window customization, watch our webinar.

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