Chat Widget7 min read

How to Customize Your Chat Widget: Colors, Logo, Dark Mode, and Features

Brand your AI chat widget with custom colors, logo, and welcome message. Enable dark mode in the dashboard, configure file uploads, voice messages, emoji picker, and set the default language for your chatbot.

Sam Turner·

SupportHQ gives you full control over how your dashboard looks and how your chat widget appears to visitors. This guide covers everything from switching to dark mode, to branding your widget with custom colors, to enabling features like file uploads and voice messages.

Dashboard Theme: Light and Dark Mode

The dashboard supports both light and dark themes. You can toggle between them at any time using the theme button in the top-right corner of the dashboard header — look for the sun/moon icon.

  • Light mode — clean white interface, ideal for well-lit environments
  • Dark mode — slate-toned interface that's easier on the eyes in low light

The theme defaults to your system preference and applies instantly across the entire dashboard. Every team member can set their own preference — it doesn't affect what your visitors see in the widget.

Branding Settings

Navigate to Settings → Branding to customize how your chat widget looks to visitors. These settings are available to account owners.

Bot Name

Set the name displayed in the chat header. This is what visitors see when they open the widget. If left empty, it falls back to your company name.

Welcome Message

The first message visitors see when they open the chat. Use this to set expectations or invite questions. For example: "Hi! I'm your AI assistant. Ask me anything about our product."

Brand Color

This is the primary color used for the chat header, buttons, and accent elements throughout the widget. Enter a hex color code or use the color picker to match your brand. The default is #6e31de (indigo purple).

Bubble Background Color

Customize the background color of the floating chat button that appears in the corner of your site. By default, it uses the same color as your brand color. Set a different color if you want the bubble to stand out or blend differently with your site.

Header Icon Color

Control the color of action icons in the chat header (close button, minimize, etc.). The default is a neutral gray (#6b7280). Adjust this if your brand color makes the default icons hard to see.

Logo

Add your company logo to the chat header. You can either:

  • Upload an image — supports JPEG, PNG, GIF, and WebP (max 2 MB)
  • Paste a URL — link to an externally hosted logo

The logo appears as a small circular icon next to your bot name in the chat header.

Widget Features

Navigate to Settings → Features to toggle specific capabilities on or off in your chat widget.

Default Response Language

Set the initial language your AI agent uses when responding. Visitors can still switch languages during the conversation. SupportHQ supports over 20 languages including English, Spanish, French, German, Arabic, Hindi, Japanese, Korean, Chinese, and more.

Emoji Picker

Enabled by default. When turned on, visitors see an emoji button in the chat input that opens a picker with a curated set of emojis. You can customize which emojis appear:

  • Remove emojis you don't want by hovering and clicking the × icon
  • Add new emojis using the emoji adder input
  • Reset to the default set of 51 emojis at any time

File Upload

Disabled by default. When enabled, visitors can attach files to their messages. You control exactly which file types are accepted:

  • Images — JPG, PNG, GIF, WebP
  • PDF documents
  • Text files (.txt)
  • Word documents (.doc, .docx)
  • Videos

You can also specify custom MIME types for additional file formats (e.g., .csv, .xlsx, application/zip).

Audio Recording

Disabled by default. When enabled, visitors can record and send voice messages directly in the chat. The AI processes the audio and responds accordingly. This is great for mobile users or accessibility.

Tips for Effective Customization

  • Match your brand — use your exact brand color hex code so the widget feels native to your site
  • Keep the welcome message short — one or two sentences is ideal. Visitors should immediately know they can ask questions.
  • Upload a clear logo — a square logo with transparent background works best at the small sizes used in the header
  • Enable features gradually — start with the defaults, then enable file upload or audio as your use case requires
  • Test on mobile — the widget is fully responsive, but check that your color choices and logo look good on smaller screens
Tags:customize chat widgetchat widget brandingchatbot dark modewidget logo and colorsenable file upload in chatbotvoice messages chat widget