See our other products: ChatBot.com - bot platform | helpdesk.com - support ticket system | 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.

Chat widget configurator overview

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 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 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.

Customize your chat widget: available options

Appearance

  • Choose your theme

Chat configurator gives you the option to pick a theme of your chat window. You can currently choose between Smooth and Modern.

Chat widget configurator: pick your theme

In addition to changing the theme of your chat, you can also 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. You can also change themes to their dark versions by turning on the Dark mode switch (it will change to green).

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

Position

  • 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

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 widget

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

    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!

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