Custom Chat Colors – Adjusting a Chat to Your Website

Adjusting a third-party application to your own website is very important not only for technical purposes, but also for improving the aesthetics. If you want to set up a chat widget for your website that can have its display and colors adjusted to your preferences, Chatwee is the perfect choice. Chats offered by Chatwee are highly customizable – the color of each element in the chat window can be altered to match the design of your own website. There are also ready-made color schemes you can use. What is more, if you know how to code, you can use your skills to write a custom CSS code and paste it into a special box in the settings – this will also modify the appearance of your chat.

All these changes can be observed in a live preview before saving the final work. The process itself is not difficult – we prepared a detailed guide with a list of elements and descriptions that can be found here.

Below you can find a general guide on how to find the options and work with them to set up your own custom chat colors, plus an instruction on how to sign up for a free trial. 🙂

Ways of setting up your custom chat colors

The looks of your chat can be altered in your Dashboard, in the Appearance tab. To access your Dashboard, please sign up for free here and log in.

Chatwee webpage showing the Appearance Tab in the Dashboard. On the left there is a menu with tabs, a color customization tool with color pickers, on the right there is a live preview of a chat.
The Appearance tab

On the right side, you can see a live preview with four tabs. Each tab represents a different display mode. Some elements are shared between the modes, while some are specific to a given mode. For a detailed guide with a list of elements click here.

On the left side you can find a link to our color customization guide, then a list with various options: you can reset the settings in case you don’t like the effect of your work. Choose a font family, a text template, and a color scheme.

Below these options there is a list of all the adjustable elements. Click on the box with a color code beside the name of an element to display a gradient with a color picker. You can either choose a color from the gradient and adjust its hue, or simply input a hex color code into the box. The element will change in the live preview. Make sure to save your work before leaving the page!

Chatwee color change tool with hex codes,  a color gradient and a color picker.
Color picker and the hex color code

At the end of the list of elements, you can find a box for custom CSS code that will override the settings chosen above. The CSS code can change not only colors, but also fonts and formatting.

A window for writing or pasting a custom CSS code, with an example code in it.
Custom CSS box – allows for more freedom in customization of your chat

What else can be adjusted?

Basically everything. There are four display modes (embedded chat, fixed tab, tabbed layout, mobile mode) and several categories. You can adjust the colors of the menu, chatrooms, messages, user icons, and other elements. 

It is also possible to change the logo of the chat and the image in the bubble, which is clicked to open the widget. These can be adjusted in the Customize tab.

Two tools for uploading custom pictures: chat bubble icon and chat logo. Below the example icons there are buttons with options titled remove image and select image.
Chat bubble icon and chat logo in the Customize tab

As you can see, the chat can be adjusted to the color scheme of your own website very easily. You can also set up a custom chat logo and a custom chat icon. If you’d like to have a bit more freedom in terms of customization, there is a special box for writing your own CSS code, where you can change not only colors, but also fonts and formatting.

Want to try it out?

We hope that our customization options will help you adjust the chat app perfectly to the looks of your website. If you’d like to try Chatwee out, you can register for free here and request a trial of any paid plan to see what the app has to offer.
If you’d like to send us feedback or ask for assistance, here’s our contact form. Hope to see you soon in our community!

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.