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