Tutorial: Chatwee customization. Part one – colors and fonts

You have installed the chat, everything works fine, but could use a bit to give it a style that fits perfectly to the design of the page. Decent widget needs perfectly coexist with the site on which it was implemented.

In this tutorial, we’ll show you what you can do to make your chat widget stood out from the crowd.

The choice of colors

Sign in to control panel go to “Customize” tab and find the “Colors & Fonts” section. There are several controls for color settings of your widget. If you want, you can always use one of the many specially created templates and choose the one that best suits you.

The selected template you can modify. To specify a custom color for a group of elements just use kolorpikerów or manually type color (Hex format is acceptable for color values).

Below is a full description of controls for colors. The elements described in each section are presented on the screenshot.

Chat Box Color Customize


1. Primary color

Background-color of the top and bottom panels.

2. Secondary color

Colorize your chat widget name, icons, menu button when focused. Perfectly fitted when secondary main color contrasts with primary main color.

3. Border color

Border-color of the top and bottom panels. We suggest applying here primary main color with Increased darkness for better results.

4. Titles color

Colors the text (user names and user count) appears in the upper and lower panels. Perfectly fitted when titles color also contrasts with primary main color.

5. Text color

Using this control you control the color of the message and the list of users inside the chat.


The choice of fonts

Speaking about color of the text must mention about fonts styling.

1. Font family

You can pick a font family from the available drop-down list.

2. Font size

Select the font size of text in messages and the list of users.


Both options are presented in the picture below.


Chat Box Customize Font


As you can see in the picture we have prepared for you a small bonus. You can set the transparency of your chat. This will make the chat will be translucent, and the content will be visible underneath. Sometimes it is very useful when you want to chat box was as little as possible attention-grabbing.

With these options to style, we believe that each chat will be able to become well matched to the website on which it is found. However, we are open for suggestions on your part, because we realize that our human needs and tastes are endless.

Personally, I think we should go further in making even more advanced customization of the appearance of almost every element, including the ability to make editing the CSS file for each client. What do you think?

Chatwee logo

Get your community engaged. Sign up and start growing.

65k+ sites served

By clicking the Create my account button, you acknowledge that you have read and agree to the Terms of Use and Privacy Policy.
We keep your details to ourselves. No spam or third-party communication will be sent to you.
Already have an account? Log in.