See our other products: BotEngine - chatbot platform | chat.io - customer messaging platform | KnowledgeBase - help center for website

Help and support

Resources that will teach you everything about LiveChat.

Customize your chat widget

by Krzysztof Kraus

At LiveChat, we know how important it is to maintain the awareness of your brand among customers. That’s why each LiveChat account comes pre-equipped with a powerful yet easy to use chat widget configurator. All so that you can customize your chat quickly and efficiently!

Chat widget configurator: customize your chat!

With just a few easy steps, you can not only change the looks of your chat but also tweak the behaviour of your widget, for example by disabling it for customers visiting your website from mobile devices. And all of that without using any additional CSS or JavaScript configuration!

So, without further due, let’s dive in and see how you can use the chat widget configurator to your advantage.

Customize your chat widget: how to?

  1. To start customizing your chat, go to the Customization section of your Chat window settings.
Chat widget configurator: go to the chat window settings
  1. If you’re using Groups at LiveChat, choose the group for which you’d like to customize your chat.
Chat widget configurator: choose the group for which you'd like to customize the chat window
  1. Now, choose which element of the chat widget would you like to customize. You can, for example, choose a Ready sets of colors for your chat window.
Chat widget configurator: choose which part of your widget would you like to edit
  1. Here’s a useful tip: When customizing your chat widget, take a look at the Preview section, available at the top right of your configurator.
Chat widget configurator: preview changes made to your chat widget

Use Preview to your advantage, by seeing all changes to your chat reflected in real-time, before applying them to your website. You can also get a grasp on how your chat will look like on desktop and mobile devices.

  1. If you’re done with your chat widget configuration, simply hit Save changes button, available at the bottom of the configurator. This will apply all the changes to your website.
Chat widget configurator: don't forget to Save changes

And that’s it! So, now that you know how to use the chat widget configurator, let us review each option that it has to offer.

Customize your chat widget: available options

Pick your theme

Chat configurator gives you the option to pick a theme of your chat window. You can currently choose between Smooth and Modern, but keep in mind that there are more themes coming really soon!

Chat widget configurator: pick your theme

In addition to changing the theme of your chat, you can also change the style of your minimized chat widget. Amaze your customers with a simple yet functional Bar or a modern and minimalistic Bubble!

Chat widget configurator: choose the looks of your minimized widget

Pick your color

With the Pick your color option, you can choose a color scheme similar to that of your company’s brand. Picking a carefully pre-selected set of colors will increase your visitors’ website immersion, providing a much greater browsing experience.

Chat widget configurator: choose the color of your widget

We also realize that each website is different. That is why, in addition to the ready sets of colors, we’re giving you a feature called Custom Colors. A tool allowing you to adjust the color of your chat perfectly.

Chat widget configurator: apply Custom Colors to your chat widget!

From now on, you can change the color of your minimized and maximized widget elements, either by providing a hexadecimal representation of a color or by using our built-in color palette!

Chat widget configurator: choose among many different colors!

Widget position

With widget position, you can decide on which side of your website your customers should expect to interact with the chat window. Either on the left or, as set-up by default, on the right! And all of that without any additional CSS customization.

Chat widget configurator: choose your widget position!

Oh, and did we mentioned that it works great on mobile devices as well? But don’t take our words for it: try for yourself, with just a click of a button!

Additional tweaks

With additional tweaks, we want to bring you the possibility to change the behaviour of your chat window, without modifying LiveChat script added to the source code of your website. And what exactly can you modify? As there are quite a few options, we will go through each of them below.

Chat widget configurator: change the behaviour of your chat window
  • Show agent’s photo – decide whether you’d like to display your agent’s photo during a chat and in the chat bubble, after your customer will minimize the chat window or receive a greeting.
  • Chat widget configurator: show your agents photo during a chat
  • Enable sound notifications for customers – by default, your customers will be notified about a new greeting and a new message received in a chat by a sound notification. This should get their attention whenever they, for example, minimized their browser while talking with your agents. However, if you’d like to disable those sound notifications, simply switch this option off.
  • Your customers can also mute the sounds of the chat widget themselves! They can do this by clicking on the Mute button, available under three little dots in the chat widget.
    Chat widget configurator: let your customer mute the chat widget themselves
  • Let customers rate agents – with this option, you can decide whether your customers can rate your agents during or after the chat.
  • Chat widget configurator: let your customer rate agents
  • Let customers get chat transcripts – turn on this option to give your customers the possibility to request the transcript of their current chat. The chat transcript will be sent to their email.
  • Your customers can receive the transcript by clicking on the Send transcript button, available under three little dots in the chat widget.
    Chat widget configurator: let your customer receive a chat transcript
  • Hide widget until it gets activated – if you’d like to keep your chat widget hidden until your customer will either: receive a greeting or interact with a custom start chat button added to your website (more on this subject here), this option is the way to go. Oh, and it’ll also work in case that you’d like to implement our open chat window API method, to build your custom mechanism responsible for opening a chat.

  • Display widget on mobile – enabled by default, this option will make sure that your customer can chat with you when browsing through your store on their phones or tablets. If you wouldn’t like that however, simply switch this option off.

Chat configurator: what will we bring in the future?

We hope that the current chat widget configurator will meet most of your expectations, but keeping in mind that there are millions of different use cases, we are doing our best constantly improve your LiveChat experience.

In a near future, you can expect a dedicated JSON configurator. That will allow you to push some of the custom CSS styles to that chat widget of yours. Also, we’re working hard on bringing you exciting new chat themes.

Chat widget configurator: more advanced options are on the way!

As to this tutorial, that’s it for now! Hopefully, you have found this article helpful but if you have any additional questions or feature requests as to what would you like to see in our chat widget, feel free to start a chat with us. Our Support Heroes are available 24/7/365!

Did you find this helpful? Yes No
Thanks for your feedback.
100% 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. +