Appearance

By the end of this page your Copilot will match your brand.

Open the Brand tab in the Studio. Every change previews instantly on the right and auto-saves. To undo all customization, use Reset to defaults (you’ll confirm before it applies).

Brand tab showing theme presets, asset uploads, colors, and text fields

Theme presets

The fastest start. Pick one preset to set the four colors at once:

Preset	Look
Dark	qRaptor green on a dark background (the default)
Light	Blue on a white background
Brand Blue	Blue accents on a dark slate background
Brand Green	Green accents on a dark background

You can fine-tune any color afterward.

Colors

Each color has a picker, a hex field, and a Swatches shortcut for common brand colors:

Field	Default	Controls
Primary Color	`#1dc690`	Header, buttons, user message accents
Secondary Color	`#278ab0`	Secondary accents
Background Color	`#0a0e13`	Chat background
Text Color	`#eaeae0`	Message text

Logo and images

Upload brand assets (max 1 MB each):

Logo

PNG/JPEG/WebP/SVG. Shown in the Copilot header. Click Upload, then Change or Remove later.

Favicon

PNG ≥ 64×64 or .ico. Auto-resized to 16 / 32 / 48 / 180 px for the browser tab and home-screen icon of the hosted chat page.

1200×630 recommended. Used as the preview image when the Copilot’s link is shared. Defaults to your logo on a background if not set.

Text

Three fields control the widget’s wording:

Field	Default
Header Text	`AI Assistant`
Welcome Message	`Hi! How can I help you today?`
Input Placeholder	`Type a message...`

Set these to your brand’s voice — for example, a header of Aurora Support and a welcome of Hi! I can help with orders, returns, and products.

Custom CSS (advanced)

For fine control, add CSS in the Custom CSS field. Target the widget’s elements, for example:


.copilot-header {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

🚨

Custom CSS is sanitized server-side — @import rules and <script> content are blocked. Use it for styling only.

Common issues

“File too large (max 1 MB)” — Compress or resize the image and upload again.
A preset didn’t seem to apply — It sets all four colors; if you’d already customized one, it’s overwritten. Adjust individual colors afterward.
Custom CSS had no effect — Confirm your selector matches the widget’s markup and that you didn’t use a blocked rule like @import.