Widget

Customization

Theme, position, copy, locales, and the few CSS hooks you can override without breaking the bubble.

Where to configure

Most styling lives in the dashboard → Widget appearance. Changes propagate to live sites within a few seconds — no re-deploy required.

Theme

Pick light, dark, or auto (follows the user's OS). Each theme has:

  • Accent color — the bubble's primary color and the user-message bubble.
  • Background — the chat panel surface.
  • Border — outer frame, defaults to a subtle hairline.
  • Bubble icon — your logo or the default chat glyph.

The bubble uses a CSS Shadow DOM so your global styles can't leak in.

Welcome message

The first message a user sees when they open the bubble:

text
Hi! I'm the support agent for Acme. I'm trained on the docs and I can
help with installs, billing, and most product questions. If I get stuck,
I'll loop in the team.

Keep it short, set expectations, and tell users what the bot can and can't do. Users behave better when they know.

Suggested first prompts

Up to four chips that appear under the welcome message. Tap-to-send. Best when they're actually the questions you're tired of answering manually.

Allowed domains

Lock the widget to specific origins. From the dashboard, list the domains where the widget is allowed to load. Requests from anywhere else get a 403 from the API. Useful to prevent your key from being lifted and used on someone else's site.

Localization

The widget UI ships in English by default. Set data-locale on the script tag to switch.

Built-in locales: en, es, fr, de, pt-BR, ja, zh-CN.

The agent itself auto-detects user language from the message and replies in kind, regardless of UI locale.

Position

Four positions via data-position: bottom-right (default), bottom-left, top-right, top-left. If you have a cookie banner that conflicts, the widget auto-shifts up while it's visible.

Z-index

The bubble defaults to z-index: 2147483000 — high enough to sit above most modals. If your modal stack reaches that high, override with data-z-index.

Don't try to inject CSS
Because the widget is in a Shadow DOM, your stylesheet rules won't apply to the internal markup. If you need styling we don't offer, file a request — we'd rather expose a clean knob than have you fight the encapsulation.

Removing the "Powered by" badge

The badge ships with Free and Starter plans. Pro and above can hide it from dashboard → Widget appearance.