Pricing
Go to app
User Name
Upgrade Help Center

Customize your chat widget

Krzysztof Kraus
8 min read
updated: Feb 2, 2024

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.

With just a few easy steps, you can not only change the looks of your chat window 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 ado, let’s dive in and see how you can use the chat widget configurator to your advantage.

Chat widget configurator overview

Customize your chat widget: how to?Link icon

To start customizing your chat, go to the Settings → Chat window → Customization.

Chat widget configurator: go to chat widget settings

  1. If you’re using Groups at LiveChat, choose the group for which you’d like to customize your chat widget.

Chat widget configurator: choose a group

  1. Now, choose which element of the chat widget you would like to customize. You can, for example, choose a Ready sets of colors for your chat window.

Chat widget configurator: choose what you want to edit

  1. When customizing your chat widget, take a look at the Preview section located on the right side of the screen. You can see all changes reflected in real-time, before applying them to your website. Preview feature provides separate views for both desktop and mobile devices.

Chat widget configurator: preview changes

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

Chat widget configurator: 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.

Live EditorLink icon

The live editor allows you to seamlessly match chat window looks and position with your website. You can use it to safely test your design on a live website without the need to save it and make it visible to the public.

You can adjust:

  • Light and dark mode
  • Colors
  • Chat widget theme for maximized and minimized states
  • Position, including alignment and spacings

How to use the configuratorLink icon

1
Enter Settings -> Chat widget -> Customization.
2

Select Customize on website.

3
Enter URL address of the website you want to edit the widget on. If LiveChat is already installed on a website, its address will populate automatically.
4

Select Go to website to proceed.

5
Edit the chat widget looks using settings available on the Live Editor. Preview your modifications on the widget visible on the website.
6
If you want to keep your new setup select Save. Otherwise, select Undo changes.

And that’s it! Go and experiment with your designs directly on your website!

Customize your chat widget: available optionsLink icon

Looking for a custom chat widget theme for your website? Our recommended partners can develop one for you.
Looking for a custom chat widget theme for your website? Our recommended partners can develop one for you.

AppearanceLink icon

  • Choose your minimized theme

Chat window gives you the option to change the style of the minimized window. Choose between a simple yet functional Bar and a modern and minimalistic Bubble!

Chat widget configurator edit minimized widget icon style

  • Pick your color

Select Theme color to use one of our predefined sets. If you want to edit the accent color, click on the first option on the right. A color picker will pop-up.

Chat widget configurator: pick your theme color

We also realize that each website is different. That is why, in addition to the prefabricated sets of colors, you can choose any combination that suits you. Click on More color settings to create your own color scheme.

Chat widget configurator: Set custom colors

You are able to change the color of both minimized and maximized widget elements, either by providing a hexadecimal representation or by using our built-in color picker!

Chat widget configurator: Choose any color you like

  • Dark modeLink icon

The dark mode makes your widget display texts in white color on a dark background. It affects all of the widget elements, including rich messages and forms.

Toggle the Dark mode switch to set the dark mode for your chat window.

Enable dark mode

PositionLink icon

  • Widget position

Decide where the chat widget should be placed on your website. You can choose between left and right. It is also possible to define the spacing between your chat widget and corresponding bottom and side edges.

Chat widget configurator Set widgets position

  • Visibility

Control when to display the chat widget icon on your website. If you want to learn more about the differences between the options described below head to our article on Chat widget visibility.

The chat widget is always visible.

The widget icon on your site is always visible so your customers can start a chat by clicking on it.

Chat widget configurator: set widget to always visible

Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other services you can benefit from.
Our partners offer a wide range of services that can increase your chat widget engagement. Check out the engagement health check and other services you can benefit from.

Hide widget until it gets activated

This option allows you to keep your chat widget hidden until it gets activated via: a greeting, an interaction with a custom start chat button added to your website, or an open chat window API method. Once a chat starts, a customer can initiate a conversation by clicking on the chat widget icon as well.

Chat widget configurator: hide widget until it gets activated

Always hide minimized widget icon

The widget icon is never displayed, hence your visitor can’t initiate a chat by clicking on it. Chats can start when either a visitor interacts with a custom start chat button added to your website, or if you implemented an open chat window API method, that builds a custom mechanism responsible for opening a chat.

Chat widget configurator: always hide minimized widget icon

Mobile chat widgetLink icon

In this section, you can control if you want to Show your chat widget on mobile (this option is turned on by default). Once you turn it off (the switch button will grey out) your mobile users won’t be able to chat with you.

Chat widget configurator: show/hide chat widget on mobile

If you decide to have it displayed on mobile, you can choose to have it appear Same as on desktop.

Chat widget configurator: set mobile chat widget settings to be the same as on desktop

If you want your chat widget to be displayed differently on mobile devices (than on desktop) select Custom for mobile devices.

Chat widget configurator: set custom widget settings for mobile devices

You can customize Mobile widget type, position on screen and visibility (read more about Chat widget visibility).

Additional tweaksLink icon

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: Additional tweaks

  • Show logo - you can upload your own logo that will be displayed in the top right corner, next to agent’s details (note that it will only be visible in tickets if you use the Smooth theme).

Chat widget configurator: show logo in chat

  • 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 agents photo in 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.
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: Mute chat

  • 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: 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.
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: Send transcript

To make sure that the transcripts are sent only to the customers who want them, we send a verification email to customers requesting a transcript for the first time. Once their email address is verified, the requested transcripts are sent immediately.
To make sure that the transcripts are sent only to the customers who want them, we send a verification email to customers requesting a transcript for the first time. Once their email address is verified, the requested transcripts are sent immediately.

As to this tutorial, that’s it for now! If you have any questions or feature requests, feel free to start a chat with us. Our Support Heroes are available 24/7/365!

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

RELATED ARTICLES

Sales Tracker: Monitor the value of your chats

Set up a Sales Tracker for your website and see which chats with customers turn into sales and how much revenue you get from them.

Read the article

Chat page and QR code explained

Give your customers the possibility to contact you instantly with the chat page. Read on and learn how to implement it on each touchpoint with your customers.

Read the article

Start using LiveChat now!

Free 14-day trial Team plan features No credit card required

Still not convinced? Discover all LiveChat features

Discover text| products: