Back to docs
Your chat widget should look like a natural part of your website, not a third-party add-on. The Widget settings let you customize colors, shape, and behavior so the chat experience matches your brand perfectly.
To access these settings, go to Widget in your dashboard sidebar.
Kilo comes with six built-in color presets that work great out of the box:
Kilo Green — the default dark theme with green accents
Midnight Blue — a deep blue theme for corporate brands
Warm Dark — dark with warm amber tones
Purple Night — dark with purple highlights
Clean Dark — minimal dark theme with neutral accents
Light — a light background for brands with bright websites
To apply a preset: Go to Widget settings and click on any preset swatch. The preview updates immediately so you can see how it looks.
To set custom colors: If none of the presets match your brand, you can set individual colors for every element:
Accent — the primary brand color used for buttons, highlights, and your agent's chat bubbles. This is the most visible color. Set it to your brand's primary color for instant recognition.
Background — the main background of the chat window.
Surface — the header bar and input area at the bottom of the chat. Usually a slightly different shade from the background to create visual separation.
Text — the primary text color for messages and headings.
Border — lines and separators between sections.
Muted — secondary text like timestamps, placeholders, and helper text.
Tip: If you're unsure about custom colors, start with the preset closest to your brand and then adjust just the accent color to match your exact brand hex code. This usually gives you a polished result with minimal effort.
The corner radius controls how rounded the edges of the widget, buttons, and chat bubbles look:
Sharp (2px) — clean, minimal, and modern. Works well for brands with a sleek or enterprise aesthetic.
Rounded (8px) — the default. A balanced look that works for most brands.
Pill (16px) — soft, friendly, and approachable. Great for consumer-facing brands or companies with a playful identity.
On the free trial, a small "Powered by Kilo" badge appears at the bottom of the chat widget. On all paid plans (Starter and Growth), you can remove this badge so the widget feels completely native to your site.
To toggle it off: go to Widget settings and disable the "Show Kilo branding" option. The change applies immediately.
By default, the floating chat bubble appears on both desktop and mobile. However, on mobile screens, the bubble can sometimes overlap important elements like a "Book a Demo" button or a sticky navigation bar.
To hide the widget on mobile:Go to Widget settings.
Toggle on "Hide widget on mobile."
Save.
The widget will still appear on tablets and desktops — it only hides on screens smaller than 768 pixels wide (standard mobile breakpoint).
Common question: "Should I hide the widget on mobile?" It depends on your audience. If most of your qualified traffic comes from desktop (common in B2B), hiding on mobile can improve the mobile experience without losing much. Check your analytics to see what percentage of your visitors are on mobile before deciding.
As you adjust any widget setting, the preview in your dashboard updates in real time. This makes it easy to experiment with different combinations before saving. Changes only apply to your live website when you click Save.
"Will changing widget settings affect active conversations?" No. Visitors who already have the chat open will see the old styling until they refresh the page. New visitors will see the updated design immediately.
"Can I use different widget styles on different pages?" Currently, the widget styling is global — it looks the same on every page. If you need a different look on specific pages, the inline or fullscreen deployment modes give you more layout flexibility.
"What colors work best?" Dark themes with a bright accent color (green, blue, or orange) tend to have the highest engagement rates because they're visually distinct from most website backgrounds without being distracting.
Widget Customization
Widget Appearance
Your chat widget should look like a natural part of your website, not a third-party add-on. The Widget settings let you customize colors, shape, and behavior so the chat experience matches your brand perfectly.
To access these settings, go to Widget in your dashboard sidebar.
Color scheme
Kilo comes with six built-in color presets that work great out of the box:
To apply a preset: Go to Widget settings and click on any preset swatch. The preview updates immediately so you can see how it looks.
To set custom colors: If none of the presets match your brand, you can set individual colors for every element:
Tip: If you're unsure about custom colors, start with the preset closest to your brand and then adjust just the accent color to match your exact brand hex code. This usually gives you a polished result with minimal effort.
Corner style
The corner radius controls how rounded the edges of the widget, buttons, and chat bubbles look:
Branding
On the free trial, a small "Powered by Kilo" badge appears at the bottom of the chat widget. On all paid plans (Starter and Growth), you can remove this badge so the widget feels completely native to your site.
To toggle it off: go to Widget settings and disable the "Show Kilo branding" option. The change applies immediately.
Mobile settings
By default, the floating chat bubble appears on both desktop and mobile. However, on mobile screens, the bubble can sometimes overlap important elements like a "Book a Demo" button or a sticky navigation bar.
To hide the widget on mobile:
The widget will still appear on tablets and desktops — it only hides on screens smaller than 768 pixels wide (standard mobile breakpoint).
Common question: "Should I hide the widget on mobile?" It depends on your audience. If most of your qualified traffic comes from desktop (common in B2B), hiding on mobile can improve the mobile experience without losing much. Check your analytics to see what percentage of your visitors are on mobile before deciding.
Live preview
As you adjust any widget setting, the preview in your dashboard updates in real time. This makes it easy to experiment with different combinations before saving. Changes only apply to your live website when you click Save.
Common questions
"Will changing widget settings affect active conversations?" No. Visitors who already have the chat open will see the old styling until they refresh the page. New visitors will see the updated design immediately.
"Can I use different widget styles on different pages?" Currently, the widget styling is global — it looks the same on every page. If you need a different look on specific pages, the inline or fullscreen deployment modes give you more layout flexibility.
"What colors work best?" Dark themes with a bright accent color (green, blue, or orange) tend to have the highest engagement rates because they're visually distinct from most website backgrounds without being distracting.