Widget appearance

Set the widget's accent color, position, light or dark theme and launcher label on the Agents page, preview the result and understand the contrast warning.

Last updated October 21, 2026

On this page

The widget is the chat button and panel your visitors see. You change how it looks on the dashboard's Agents page, and the change reaches your site on the next page view, without touching the script on your pages.

Where to change it

Open Agents

In the dashboard, open Agents. If your workspace has more than one site, the line at the top says which site you are editing ("Settings of acme.com"); use the site picker next to it to switch.

Edit the Appearance section

Scroll to Appearance. The preview on the right (below the form on a phone, via Jump to the preview) updates as you type.

Save

Choose Save changes in the bar at the bottom. Discard goes back to the saved settings. After saving, the bar says "Saved. Visitors see the new settings on the next page view."

Only owners and admins can change widget settings. Members see the page read-only.

Accent color

The accent colors the launcher button and the buttons in the panel. Enter a hex color such as #2f5bea, or use the color picker next to the field.

You don't need to pick a text color: the widget writes black or white on the accent, whichever reads better. Where the accent is used for text on the panel, such as links, it is darkened or lightened just enough to stay readable.

The contrast warning

If the launcher would be hard to see, the form shows a warning such as: "This color has a contrast of 2.1:1 against white pages (3:1 is the minimum for buttons), so the launcher may be hard to see. Text on it stays readable."

The rule behind it is the accessibility guideline that a control should stand out from its background by at least 3 to 1. Very light colors, such as pale yellow or light gray, fall below that on white pages. You can still save such a color; consider a darker shade of your brand color for the launcher instead.

Position

Choose Bottom right or Bottom left. Bottom right is the default and what most visitors expect. Choose bottom left if something else already sits in the right corner, such as a cookie banner button or a "back to top" link.

To use a different position on one page only, add data-position="left" or data-position="right" to the script tag on that page. The attribute wins over the dashboard setting.

Theme

Option	What visitors see
Match the visitor	Light or dark, from their system setting. The default.
Light	Always the light panel
Dark	Always the dark panel

Choose a fixed theme if your site has only one look, for example a dark site where a light panel would stand out too much.

Launcher label

By default the launcher is a round button with a chat icon. Write a Launcher label, such as "Ask us" or "Questions?", to show text next to the icon. Keep it short: up to 40 characters, and two or three words work best on phones. Leave it empty to show the icon only.

What you can't change

A few things are the same on every site, on purpose:

The AI disclosure under the title. You can reword it on the same page, but not remove it. See AI disclosure to visitors.
The "Powered by ASDK" badge shows on the Free and Starter plans and is removed from the Pro plan up. See Plans and limits.
Fonts. The widget uses the visitor's system font, so it loads no font files and looks native on every device.
Size. The panel is 380 by 640 pixels on desktop and opens full screen on phones.

The widget runs in its own isolated part of the page, so your site's CSS doesn't change it and its styles don't leak into your site. It sits above almost everything on the page. A cookie banner or another overlay that you deliberately place on top can still cover it.

The widget follows accessibility rules on its own: the launcher is a real button, the panel can be used with the keyboard alone, Escape closes it, and animations turn off for visitors who ask their system for reduced motion.

The preview next to the form shows your unsaved changes. To try the real widget with the saved settings, choose Try the real widget: it answers from your knowledge, like on your site.