Customising appearance
Match your agent's look to your brand: background, colours, header, fonts, launcher, avatar, and custom CSS.
Open your agent's Publish page, then go to the Appearance tab →
Edit any control and the chat preview on the right updates live. When it looks right, save your changes to publish them to the widget.
Right after you get your AI agent live during onboarding, we bring you straight here and preload the question you tried in the preview, so you can pick your User message color against the real conversation you just created rather than a placeholder.
Background
The chat window's background colour. Pick a preset swatch (White, Cream, Sky, Sage, Dark, or Night) or use the colour picker to enter a custom hex. Available on every plan.
User message color
The colour of the visitor's chat bubbles. Choose a solid colour from the swatches or the colour picker, or pick a gradient from the User message gradients row below for a more energetic look. You can also build a custom gradient with the Custom swatch. Available on every plan.
This colour or gradient only paints the visitor's message bubbles, so watch the sample visitor message in the live preview to see it update the moment you pick a swatch. The header bar is set separately under Advanced customisation below.
Header color
The header controls live under Advanced customisation and need Starter Advanced Pro. There are two ways to set the header:
- Match user message color with header color, a toggle. When it is on, the header bar uses the same colour as the user message bubbles. Turn it off and the header reverts to your last custom header colour, or to the default header if you never set one.
- Header color, a swatch and hex picker. Pick a colour here to give the header its own independent colour. Doing so turns the match toggle off. Use the reset button to clear it and fall back to the default.
Agent avatar
The face shown in the agent's header. Upload a square image at least 64px on its smallest side, we crop it to a circle. Starter Advanced Pro
Launcher icon
The icon on the launcher button visitors click to open the chat. Choose one of three presets (chat, sparkle, headset) or upload your own, a transparent PNG or SVG works best. Starter Advanced Pro
Launcher color
The fill colour of the launcher button. Pick a preset swatch or a custom hex. Starter Advanced Pro
Launcher size
The size of the floating launcher button: Medium, Large, or Extra large. Starter Advanced Pro
Font
Set the typeface, base text size, and text colour for the widget. Choose from the built-in fonts (Default, System, Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans, Georgia, Merriweather, Playfair Display, or Monospace) and a base size between 12px and 24px. Starter Advanced Pro
Custom CSS
Inject your own CSS into the widget for full control over the look. Scope your rules with the [data-dante-widget-root] attribute selector. CSS is sanitised on save, so script-execution vectors are rejected. Advanced Pro
Dante AI branding
On the Appearance tab, the Dante AI branding switch controls the "Powered by Dante AI" badge. By default the badge shows; turn the switch on to hide it so the widget is fully white-labelled. Bundled with Pro, or available on any plan as the Branding add-on.
Still stuck? We'll help.
Every plan, including Free, comes with human support. If something isn't behaving the way you expect after following the steps above, send us a note and we'll get back to you within one business day.