Krzysztof Kraus avatar
by Krzysztof Kraus on 11 May, 2016 ~4 minutes read

What’s essential for resellers and experts working within LiveChat Partner Program, our product has the ability to customize a chat window with the use of the pre-made tools. Moreover, you can even also tweak a chat window with the use of more advanced tools: advanced window tweaks and CSS chat customization. These features will allow you to meet your customers’ demands and tweak the chat window so that it’ll match the website perfectly. Below, you will see few examples on how to use the advanced window customization.

Advanced window customization

In order to use this option:

  • go to the LiveChat settings,
  • click on the Advanced window tweaks link on the bottom right side of the Theme section.

livechat agent app advanced window settings Advanced window tweaks

In the advanced windows tweaks you can customize your chat window by using the following options:

  • Social buttons for Google+, Facebook and Twitter. With the implementation of those buttons you give people an opportunity to instantly like your customer’s Facebook Fanpage or share the Google+ or Twitter on their profiles
  • Display your own logo. You can upload your customer’s company logo to the chat window or/and decide whether this logo should be displayed in the chat window.
  • Display agent’s picture. You can decide whether the agent’s picture should be displayed during a conversation.

    Protip: visitors are more prone to trust you when using your own agent’s picture. Nobody likes stock photos.

  • Display mobile icon when agent uses mobile device. With this option you can decide whether to inform the website visitors that the agent uses a mobile device. You may actually find this feature useful to display whenever agents are ‘on the go’ and their response time is lower than usual.

how to customize livechat window

After making changes, don’t forget to save your customization by clicking on the I’m done editing and the Save changes button.

CSS chat customization

The CSS customization is an advanced way to change the appearance of your customer’s chat window. With the use of it, you can change chat’s position, size and whitelabel the chat window completely… and much much more!

In order to start customizing your chat window with the use of CSS:

  • go to LiveChat settings,
  • click on the Customize using own CSS link on the bottom right side of the Theme section

css customize section Customizing using own CSS

While making CSS changes, you will see the real-time preview of the changes that you have made. Note that not all of the changes reflect in this preview. Some of them you can only check directly on the website. Because of that, it is always useful to look at what you have done on your customer’s website.

whitelabeling livechat info

Using the whitelabel example, let’s remove the Powered by LiveChat phrase from the bottom right side of the chat window. In order to do that, use the following CSS code:

#powered {

By adding this code you can remove the phrase straight away. What’s extremely convenient, you can check it directly on the live preview. In order to keep it that way, don’t forget to save by clicking on the I’m done editing and the Save changes button.

whitelabeling livechat info

Importance for LiveChat Partner Program members

While the customization of a chat window is of the utmost importance for customers using it on their websites, we are aware at LiveChat Partner Program, that it’s not necessarily the issue our partners would like to dwell on. We created advanced window tweaks and CSS chat customization to make their job as easy as it gets. Thanks to such approach, they can focus on providing their customers with high-quality services, using LiveChat either as a complementary product or as a customer service efficiency boosting tool.

Merely an example

There are numerous possibilities when using the CSS customization. In fact, the whitelabel option was merely an example. If you would like to see more pre-made codes, check out our customize the chat window with CSS article available in our knowledge base.

We hope that this article will help you impress your customers and meet their expectations. Customizable chat window should definitely delight them and help you sell LiveChat as a complementary product. Remember that within LiveChat Partner Program, you can purchase each license with 20% discount.

About the author:
Krzysztof Kraus avatar

Krzysztof Kraus

When not helping LiveChat customers with technical issues, Krzysztof runs our Knowledge Base and is responsible for most newsletters dedicated to our Updates page. Occasionally, he also helps with content on our Partnership page, giving his technical insight to our partners.

Get updates from our blog in one, monthly email

Subscribe →
comments powered by Disqus