The "widget" is the chat bubble and chat window your visitors see on your website. This page covers the Appearance tab, where you make it match your brand. The best part: a Live Preview on the right updates the moment you change anything, so you never have to guess.

Where to find it

Go to Chatbots in the left sidebar and click your bot.
Click Configure.
In the left menu, click Appearance.

Look to the right side of this tab — that's the Live Preview. It shows a mini version of your actual widget and reacts instantly to every setting below.

What it is: the background color scheme of the chat window. Why it matters: it should feel at home on your website. How: pick one.

Light — bright background (best on light websites).
Dark — dark background (best on dark websites).
Auto — follows the visitor's own device setting automatically. A safe default.

Brand color — your accent

What it is: the main color used for the header, buttons, and the chat bubble. Why it matters: this is the single change that makes the bot instantly yours. How: drag inside the color picker, click a preset swatch, or type your exact hex code (like #f97316) in the box. Watch the Live Preview change color as you go.

Avatar — the bot's little face

What it is: the small image shown next to the bot's name. Why it matters: a face makes the chat feel friendlier and more trustworthy. How: avatar is set on the Identity tab (and also in the create wizard). You have three choices:

Initials — auto-made from the bot's name. Simplest option.
Preset — pick a colorful emoji character from the grid.
Custom — click Upload to use your logo or a photo, or paste an image URL.

Banner image — a header background

What it is: a custom image behind the widget's header, instead of a plain color. Why it matters: a nice banner (a product shot, a team photo) makes the widget feel polished. How: in the Banner image section, click Upload and crop your image, or paste an image URL. Leave it empty to use your brand color instead. When a banner is set, a Banner header section appears letting you fine-tune the layout (hide the avatar, adjust text color, etc.).

Typography — fonts and text size

What it is: the font family and text size used in the widget. Why it matters: matching your site's font keeps everything feeling consistent. How: in the Typography section, pick a Default Font Family from the list and a Default Font Size (Small / Medium / Large). You can even set different fonts per part of the widget (header, bot name, messages, buttons) — but the defaults are fine for most people.

What it is: where the chat bubble sits on your site. Why it matters: you may want to avoid covering other buttons or a cookie banner. How: choose Bottom Right (the classic spot) or Bottom Left.

"Powered by wrrk.ai" — the attribution footer

What it is: a small "Powered by wrrk.ai" line at the bottom of the widget. Why it matters: some brands prefer a fully clean, unbranded look. How: toggle Show "Powered by wrrk.ai" on or off. (Whether you can hide it may depend on your plan.)

What it is: a list of website addresses allowed to show your widget. Why it matters: it stops someone from copying your embed code and running your bot (and spending your AI credits) on their site. How: in the Allowed domains section, type a domain like example.com and click Add. Repeat for each site. Leave the list empty to allow every domain — that's the default and it's fine when you're just getting started. When you're ready to lock things down, add only the domains you actually use.

Watch the Live Preview

Every change above reflects immediately in the Live Preview on the right — the mini widget, the header, the color, the position marker, even the fonts. Use it to fine-tune until it looks right, then save.

After you save

Open the Test Bot preview (top-right of the bot's dashboard) to see the full-size widget, and once it's live, check it on your real website too. See Testing Your Bot Before You Launch.