Skip to content
Widget & appearance

Change widget colours and contrast

Adjust the messenger palette while keeping messages, input fields and buttons readable.

CCorthex product guidesUpdated October 15, 20262 min read
Where to find itAppearance → Widget styles → Colors

Before you begin

Select the correct AI agent and open Appearance. Keep the public website available in another tab so you can check the customer experience after saving.

Example workspace · Demo data. 1 — Choose a control, then inspect its preview before saving. Select the image to enlarge it.
Widget style color controls and live preview

Example workspace · Demo data. 1 — Choose a control, then inspect its preview before saving. Select the image to enlarge it.

Step by step

  1. 1

    Start with a preset

    Choose an existing palette close to your brand rather than changing every field at once.

  2. 2

    Set key colours

    Adjust the background, text, message, border and action colours in the relevant color controls. Use consistent accent colors for actions.

  3. 3

    Check all states

    Inspect customer messages, assistant messages, placeholders, links, disabled controls and staff notices. Light text on a light background is easy to miss in a single preview.

  4. 4

    Save and check the website

    Review desktop and mobile with both an open chat and a closed-widget reply card.

Good to know

The website’s background may differ from the dashboard preview. Test the actual installed widget for contrast and visual separation.

Check the result

Save the change and reload a page that loads this agent. Check desktop and mobile, including text contrast and the collapsed launcher.

Questions & troubleshooting

One field became unreadable

Restore a preset or adjust its paired background/text values together. Avoid matching foreground and background colors.

Was this article helpful?

Rate this guide on this device. Ratings are not sent to Corthex.