See our other products: ChatBot - AI bot platform | - support ticket system | KnowledgeBase - help center for website

Help and support

Resources that will teach you everything about LiveChat.

Chat window customization

by Jacob Firuta
LiveChat’s new design brings more customization options with an easy to use Chat widget configurator. If you are still using the old design, learn why you should switch.

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.

We have an idea about each part of our chat window, so feel free to check them out!

  • Chat window theme – learn how to change the theme of your chat window;
  • Color schemes – learn how to change the color scheme of your chat;
  • Mobile chat window – see how the changes will look on mobile devices;
  • Social media – learn how to enrich your chat with Social Media buttons;
  • Logo – upload your own logo and make your chat more credible;
  • Mobile icon – see how to inform your customers that you are chatting on mobile!
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

Pick one of the available themes from the theme section

… or you can choose one of skins available in LiveChat Marketplace. To do that, go to Apps section.

Go to Apps available in your LiveChat account

There you will find all of the available Chat Widget Themes, simply by clicking on Browse All Themes button.

Click on Browse All Themes to find out what else have we got!

After choosing a theme, click on Install and we will automatically add it to your theme section.

Click on Install to add a new theme to your Theme Section

There’s one thing left to do: pick your brand new theme and click on Save changes button. That will automatically apply a new theme to your website, without any changes to LiveChat code!

Pick your brand new team and save changes!

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

After uploading your logo, click on I’m done editing and then on Save changes button to proceed. Remember that your logo will also be visible in the templates of your tickets and chat transcripts, ensuring much smoother experience for your customers!

Looking for the best size that will make your logo fit both, chat window and chat transcripts/tickets? Try going with 180x100px and make sure that your logo will look perfect in every situation, just like on the image below!
Upload your own logo to LiveChat!

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.
55% of people found this helpful.

Start free LiveChat trial!

5-minute setup, test out the Team plan features for 30 days, no credit card required.

Rate us! Rate this chat to help us become better support. +