Skip to main content

Widget Appearance

Make your chatbot look like it belongs on your website by customizing its colors, icon, logo, and more. All appearance settings are found in the Settings tab of your agent’s dashboard.

Primary Color

The primary color sets the main accent color for your chat widget. This color is used for the chat bubble button, message highlights, and interactive elements.
  • Click the color picker to choose any color
  • Enter a hex code directly (e.g., #0070f3) for exact brand matching
  • The default color is Chatref blue (#0070f3)
Choose a color that stands out against your website’s background so visitors can easily find the chat widget.

Widget Icon

Choose from 8 icon styles for the chat bubble button that appears on your website:
IconDescription
DefaultThe standard Chatref chat icon
MessageCircleA circular message bubble
BotA robot face icon
HelpCircleA question mark in a circle
ChatA speech bubble icon
SupportA headset/support icon
HeadphonesA headphones icon
MessageSquareA square message bubble
Pick the icon that best represents the purpose of your chatbot (support, help, chat, etc.).

Dark Mode

Toggle Dark Mode on or off to switch between light and dark themes for the chat widget.
  • Dark mode on — The widget uses a dark background with light text
  • Dark mode off — The widget uses a light background with dark text
Choose whichever matches your website’s design best. Dark mode is enabled by default. Upload your company or brand logo to replace the default Chatref branding in the chat widget header.
Custom logo is available on Plus and Pro plans. Compare plans
  • Upload a square image for best results
  • PNG or JPG format recommended
  • The logo appears in the chat widget header
Add custom text to the bottom of your chat widget, such as “Powered by YourBrand” or a disclaimer.
Custom footer is available on Plus and Pro plans. Compare plans

Button Label

Add a text label next to the chat bubble button. For example, you could add “Chat with us” or “Need help?” so visitors know exactly what the button does.
Button label is available on Plus and Pro plans. Compare plans

Persistent Greeting

When enabled, the persistent greeting keeps your welcome message visible above the chat bubble even before visitors open the widget. This acts as a gentle invitation to start a conversation.
  • On — The greeting message stays visible as a small popup near the chat button
  • Off — The greeting only appears after the visitor opens the chat widget
This is useful for encouraging visitors to interact with your chatbot, especially if they might not notice the chat button on its own.