UI Design

The UI Design screen lets you customise the visual appearance of your Airgentic chat widget by editing its stylesheet and icon files.

The File List

The Design screen lists all the files available to edit for your service:

Click any row or its pencil icon to open the file editor.

For Site Search, Airgentic also emits stable air-* classes plus common search and Bootstrap-style classes such as search-results, search-facet, nav-tabs, nav-item, card, pagination, and page-link. This makes it easier to reuse an existing search stylesheet while still keeping Airgentic-specific selectors available for precise overrides. See Styling Site Search.

The Editor

Each file opens in a syntax-highlighted code editor with line numbers.

• CSS files — edited with CSS syntax highlighting. The style.css editor includes a live Service Hub preview above the editor. As you type, unsaved CSS is applied to the preview only.
• SVG files — edited with XML syntax highlighting. A live preview of the SVG renders above the editor and updates as you type, so you can see your changes immediately without saving.

Saving Changes

Click Submit to save. You will be asked to confirm before the file is written.

After saving, allow a few minutes for changes to propagate and appear on the live website.

If your organisation already has a hosted search stylesheet, Airgentic support can add that URL to Search Configuration > Superuser. External search stylesheets load before your Airgentic-managed style.css, so the Design screen remains the final override layer. For search-specific selector examples, see Styling Site Search.

UI Themes

Existing services keep the legacy widget design unless a newer UI theme is explicitly enabled in service.conf.

New services use the April 2026 UI theme by default:

"ui_theme": "202604"

When this theme is active, the widget root includes the class .air-design-202604, so your style.css can target version-specific overrides without affecting legacy services. Future themes will use the same YYYYMM format, such as .air-design-202607.

The style.css editor includes a Preview theme selector so you can see how your CSS looks against a theme before saving. This selector is for preview only; the live service theme is controlled by service.conf.

The older key is still supported as a legacy alias:

"service_hub.design_version": "202604"

Modern Theme Variables

For modern themes, the easiest way to customise common colours and surfaces is to set CSS variables on #air-widget in style.css.

#air-widget {
  --air-header-background: #0d68bb;
  --air-chip-text: #0d68bb;
  --air-chip-border: rgba(13, 104, 187, 0.3);
}

These variables work in both the Service Hub and Hover Widget for themes that support them, including 202604. The live preview updates immediately as you edit them.

Common variables:

• Shell: --air-widget-background, --air-widget-text, --air-widget-muted-text, --air-widget-border, --air-widget-shadow, --air-widget-radius.
• Brand: --air-brand, --air-brand-deep, --air-brand-soft.
• Header: --air-header-background, --air-header-text, --air-header-icon-background, --air-header-icon-border, --air-header-decoration-primary, --air-header-decoration-secondary.
• Messages: --air-assistant-background, --air-assistant-text, --air-assistant-border, --air-assistant-shadow, --air-user-background, --air-user-text.
• Welcome chips: --air-chip-text, --air-chip-background, --air-chip-border, --air-chip-shadow, --air-chip-hover-background, --air-chip-hover-border, --air-chip-hover-shadow.
• Input: --air-input-background, --air-input-text, --air-input-placeholder, --air-input-border, --air-input-focus-border, --air-input-shadow, --air-input-focus-shadow.
• Footer: --air-footer-background, --air-footer-text.

Legacy/default widgets can still be customised with normal CSS selectors. Modern theme variables are the recommended starting point because they are simpler and less likely to conflict with theme selectors.

Cancelling

Click Cancel to go back to the file list. If you have unsaved changes, you will be prompted to confirm before leaving — changes will be lost if you proceed.