How to Customize Your Chat Widget

You’ve spent time and money creating a website that looks great. Now that you've added live chat, you want a Chat Widget that fits your style while still popping enough for your visitors to notice. Here's how to do that!

Video Transcription

Go to the Userlike Dashboard and then to Config – Widgets . Select your Widget and click on the "Appearance" tab.

Here you control how your chat button and chat window should appear on your site. You can adjust your chat's style, wording, and position.

1

Color

We offer several themes that you can use to get started. They also give you an impression of what customization options are possible.

You are the hero of the customers you're helping. That's why we've given our chat themes superhero names. Are you more of a Batman, Superman, or Joker kind of person? :)

As you can see, you can choose from different fonts or even use your custom font to fit your Corporate Identity.

Now it’s time to get creative. You can adjust every little element of your Chat Widget, like the main color, background, and text color.

Maybe you want to use the colors from your website or the color palette from your brand.

While adjusting the colors, keep in mind that the Chat Widget should catch your customers’ attention. For this, it needs to stand out a bit from the rest. We recommend not to make it blend in too much with your website. For example, you could use a complementary color that allows your Chat Widget to both stand out and be in harmony with your style.

For the chat bubbles colors, use two colors that can easily be distinguished from one another. This allows your customer to see at one glance which text was sent by her and which by the Operator.

2

Position

Once you’ve found the right look for your Chat Widget, you can move on to the positioning.

You can position the button on the left or right side of your website, or use the offset function to put it at the precise spot you want it to be.

We recommend placing it in the bottom right position. Web visitors have come to expect to see contact options like live chat, and it is related to the way people's eyes move over web pages as well. That's why this position leads to the most engagement.

Choose between two button styles plus several icons for both online and offline buttons.

You can change the button as well as offline text.

3

Eyecatcher

Set an eyecatcher to really catch the attention of your web visitors.

It's the perfect way to highlight your chat button and boost interactions with your Webvisitors. Here you can choose between three different versions of "Eyecatchers". Decide on an individual form of address and add an Operator picture. A friendly human face is a nice, natural, and non-disturbing way to attract attention.

Another way to boost chat interactions is the proactive feature which we cover in our video on chat behavior .

Once you’re finished, be sure to change the saves at the bottom to see them on your website.

So this is how our Chat Widget looks now. It fits the style of the website, while popping enough and revealing a personal spirit at the same time. It invites your web visitors to start a chat if they’re looking for assistance, without disrupting their flow so they can continue with their purchase.

If you need help customizing your Chat Widget, feel free to reach out to us through the chat on our website. Thanks for watching and happy chatting! :)