Appearance

The Appearance tab controls how the assistant looks on your page: which presentation it uses, where it sits, its colours and type, what it says before anyone talks to it, and your own branding. Nothing here changes what the assistant says — that lives on General and Intelligence.

As everywhere in the editor, changes are held locally until you click Save (or press ⌘S / Ctrl+S), and Preview always opens the last saved version.

Display Mode

Two presentations, picked with the cards at the top of the tab:

Choose Widget for a normal website where the assistant is a helper in the corner. Choose Minimal when the assistant is part of the page experience and visitors need to keep using the page while they talk to it.

Minimal Settings

This section appears only while Minimal is selected.

• Waves at the Bottom — shows the full-width ambient waves band along the bottom of the page. Off by default, so Minimal is just the pill and its gear.

In Minimal mode the chat panel and controls dock to the side that Position picks below: a …-left position docks them left, a …-right position docks them right.

Position & Layout

If the assistant's name is wider than the orb, the widget widens the horizontal offset by itself so the name does not run off the side of the screen.

Theme Colors

Chat surfaces (panel background, message text) follow the visitor's own light or dark theme automatically, so the assistant stays readable on any site. The colours here style the accents.

Quick Presets

Five preset chips write a whole palette at once — Accent/Ring, Primary, all four wave state colours, and the glow, speed and height values:

All five presets set Wave Speed and Wave Height to 1.0x. The chip stays highlighted only while every colour still matches the preset — edit any colour or animation value and the highlight clears, which is your cue that the palette is now custom.

The two accent colours

• Accent/Ring — borders, rings and dividers.
• Primary — the voice icon, buttons and focus rings.

Each field takes a colour swatch or a hex value you can type or paste.

Wave Appearance

• Show waves — off by default, so a new assistant is a plain orb. Turn it on for the wave skin. This applies to the corner Widget presentation only; Minimal has its own Waves at the Bottom switch, and the control is hidden while Minimal is selected.

The four state colours

The orb changes colour and movement to tell a visitor what the assistant is doing. Each state has its own colour field:

Pick colours a visitor can tell apart at a glance — Listening and Speaking especially, since those two carry the "is it my turn?" signal during a voice conversation.

Animation

Typography & Layout

• Font Family — System Default plus 28 web fonts (Inter, Roboto, Poppins, Playfair Display, Fraunces and so on). The box underneath previews the family you pick. Anything other than System Default is loaded from Google Fonts on the visitor's page.
• Display Font — 10px – 20px. The size of the caption bubble that appears beside the orb.
• Chat Font — 10px – 20px. The size of the messages inside the chat panel.
• Bubble Width — 200px – 600px. The maximum width of that caption bubble.
• Chat Width — 280px – 500px. The width of the chat panel.

Pick a font that matches your site, and keep Chat Font at a comfortable reading size — the chat panel is where visitors do all their reading.

Widget Display

Once the welcome message times out it fades away and stays hidden for the rest of that browser session, so a visitor who moves between pages is not nagged by it on every one.

Branding

Logo (optional) takes the address of an image you already host — paste a URL into the field (https://example.com/logo.png). There is no upload: the address must be an http:// or https:// URL of at most 2,048 characters, and anything else — including a data: URL — is rejected on save. Host the file yourself and point at it.

Once a logo is set, a preview card appears with a Remove button, along with one more switch:

• Always show logo — keeps the logo visible, faded, behind the waveform animation while the assistant is active. With it off, the logo shows only while the assistant is idle.

Powered By

• Hide Branding — removes the small by hiroi badge that sits under the orb and links to hiroi.ai.

This one is a paid feature. On a free account the switch carries a PAID badge, refuses to turn on, and tells you Hide Branding is a paid feature. Add credits to unlock it. Add credits and it flips normally. The server enforces the paid-feature check separately, and twice over: it rejects the setting on save if your account cannot use it, and it only sends the "hide branding" flag to the widget when the account behind the assistant is allowed to hide it.

Custom CSS

Custom CSS Rules (optional) takes raw CSS that the widget injects into the page as a <style> element when it loads.

.va-container .va-name-text {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Two things worth knowing before you use it:

• Widget class names all start with va- — .va-container, .va-orb, .va-chat-backdrop. Those are the handles to target. Sizes, colours and offsets you set in this tab are applied as inline variables on .va-container, so a plain rule will not override them.
• The rules are injected into the host page's <head> and are not scoped to the widget, so a loose selector can restyle the surrounding page. Keep every selector anchored to a va- class.

Custom CSS is an escape hatch. Everything above survives widget updates; custom rules are written against the current markup and can break when the widget changes. Reach for the built-in controls first.

See Theming the widget for the developer-side detail.

Related pages

• Managing assistants — the editor header, saving and previewing.
• General settings — name, instructions and the greetings visitors read first.
• Deploying your assistant — putting the widget on your site.