These docs describe the current Dante AI platform. On the earlier platform? Your API reference is at api-v2.dante-ai.com/docs (sign-in needed), and your key goes in the x-api-key header.
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. At any other time the preview shows no visitor message until you type one, so it never puts a question in your visitors' mouths.
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 type a message into the live preview (or use the question carried over from onboarding) and watch your bubble update the moment you pick a swatch. The text inside those bubbles switches between dark and white on its own so it stays readable on whichever colour you pick, including bright yellows. 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.
You can also ask for a header colour in Backstage, including the Style step of a chat build, for example "dark green #1F6F43 for the header". The change turns the coloured header on at the same time, so the preview and Test it privately show the new header straight away. On the change card it is one change, Header colour, Accent colour in the header.
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. For example, [data-dante-widget-root] { background: #fafafa; } changes the chat window's background. The preview on the Publish page shows your Custom CSS as you type, before you save, and it only styles the preview, never the rest of the page. CSS that loads outside resources (url(...) images, web fonts, image-set(...)) or uses backslash escapes in a value is left out of the preview, though the live widget still applies it, and the preview shows no Custom CSS while a rule is unfinished. CSS is sanitised on save, so script-execution vectors are rejected. Advanced Pro
Remove Dante AI branding
On the Appearance tab, the Remove Dante AI branding switch hides the "Powered by Dante AI" badge so the widget is fully white-labelled. When your workspace gets white-label, the switch turns on for all your agents; you can turn the badge back on per agent. Included on Advanced and Pro. On Starter it is a $50 a month add-on. Add-ons need an active paid plan, so Free workspaces upgrade first.
The "AI Agent" label
Each AI reply in the chat window carries a small AI Agent label, so visitors know they are talking to an AI. The EU AI Act requires that disclosure, so the label is always shown. Under AI label on the Appearance tab you can rename it per agent, as long as the new name keeps the word "AI" (for example "Support AI" or "AI Assistant", up to 40 characters; leave it blank for "AI Agent"). Names without "AI", such as "Support Agent", are not accepted. Replies from a human teammate after a handover never carry it. Starter Advanced Pro
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 promptly.