The Styles tab lets you customise the look and behavior of the AI chat interface. Open it from Agent Builder → Settings → Styles.
Changes apply to every chat surface — the admin chat page, the frontend shortcode, and shortcode-embedded chat widgets — and take effect immediately after saving.
Chat Theme
Choose a visual theme for the chat interface. Four presets are available, each shown as a live-preview card so you can see exactly what you are selecting before you save.
| Theme | Description | Accent Colour | Best For |
|---|---|---|---|
| Dark (default) | Deep purple dark theme. The original Agent Builder look. | Purple (#8b5cf6) | WordPress admin use, dark-mode sites, reduced eye-strain |
| Light | Clean white background with WordPress blue accents. | WordPress Blue (#2271b1) | Sites with a light design, matching the WordPress admin colour scheme |
| Midnight | Pure dark background with emerald green accents. | Emerald (#10b981) | Developer-oriented sites, dark themes with a modern feel |
| Ocean | Deep blue background with teal highlights. | Teal (#06b6d4) | Marine, travel, or tech-focused sites |
Click a theme card in the grid to select it, then click Save Settings. The selected card is highlighted with a blue border.
Chat Settings
Below the theme selector, four toggles control which features appear in the chat interface. All are enabled by default except White-label.
Audio (Voice Input)
When enabled, a microphone button appears in the chat input area. Users can press it to dictate their message using their device microphone via the browser’s built-in Web Speech API. The transcribed text is inserted into the message field automatically.
Disable this toggle to hide the microphone button — useful if voice input is not relevant to your site or audience.
Vision (Image Uploads)
When enabled, a paperclip button appears in the chat input area. Users can attach images for the AI assistant to analyse. This is useful for tasks like “describe this screenshot”, “what’s wrong with this layout?”, or analysing product photos.
Vision requires an LLM provider and model that supports image input (for example, OpenAI GPT-4o, Anthropic Claude, or Google Gemini). If your active model does not support images, attached files will be ignored by the AI but the button will still appear.
Disable this toggle to hide the image upload button entirely.
Costs (Token and Cost Display)
When enabled, the chat footer displays token usage and estimated cost information after each message exchange. This helps site administrators monitor AI spending in real time without leaving the chat.
Cost data is calculated from the token count returned by your LLM provider and the per-token rates associated with your selected model. For a detailed breakdown over time, see the Provider Costs page.
Disable this toggle to hide the cost display — recommended when embedding the chat on your frontend for visitors using the shortcode, so end-users do not see internal cost information.
White-label (Remove Branding)
When enabled, the “Powered by Agent Builder” footer text is removed from all chat surfaces, giving you a completely clean, branded experience.
Requires a paid license. White-label is only available on Personal and Agency plans. Free users will see the branding regardless of this toggle’s state. If you try to enable it without a license, a notice will appear with a link to upgrade.
When disabled (or on the Free plan), the chat footer displays a “Powered by Agent Builder” line along with the active AI provider and model name.
Where Styles Apply
The theme and feature toggles apply consistently across all three chat surfaces:
- Admin Chat Page — the full-screen chat at Agent Builder → Chat in the WordPress admin.
- Frontend Shortcode — the
[agent_chat]shortcode you can embed in any page or post for logged-in users or visitors. - Shortcode Overlay — the floating chat widget that appears when using the shortcode in an overlay configuration.
There is no per-page or per-assistant override for styles — the chosen theme and settings apply globally.
Tips
- If you embed the chat on a public page using the shortcode, consider disabling Costs so visitors do not see token and spending data.
- Use a theme that matches your site’s design. Light works well on white-background sites; Dark, Midnight, or Ocean suit darker designs.
- White-label combined with a matching theme gives a fully branded AI experience — visitors will not know the chat is powered by a plugin.
- Audio and Vision can be enabled together — both buttons appear side by side in the input area.
Related Documentation
- Chat Interface — How the chat works, message types, and keyboard shortcuts
- Settings — Overview of all Agent Builder settings tabs
- Agent Deployment — Embedding the chat on frontend pages with shortcodes
- Provider Costs — Detailed cost tracking and spending dashboards