The AI Concierge’s launcher and chat panel are themed from its settings screen, and that is where nearly all appearance changes belong. This page covers the settings, the one CSS variable intended for site-level theming, and an advanced appendix of structural classes for agencies that need deeper hooks.
The Chatbot settings #
All under the plugin’s Chatbot settings section:
- Chatbot Position places the launcher and drawer on the right or left edge.
- Vertical Offset raises the launcher from its resting position, useful when it collides with a cookie bar or another floating element.
- Tab Gradient Start / End set the launcher’s two gradient colors. These two colors also drive the animated orb’s palette automatically; there is no separate orb color to manage.
- Accent Light Color tints the intro light sweep and the launcher hairline. Leave it blank and a soft tint is derived from your gradient.
- Tab Tooltip sets the hover bubble text, with companion settings for showing it automatically after a delay and on hover.
- Reveal Delay controls how long after page load the launcher slides in.
- Concierge Name sets the title in the drawer header.
Changes here restyle the concierge everywhere it appears, survive plugin updates, and never fight your theme.
On phones and small tablets the launcher keeps the same edge-tab shape, just sized down, rather than switching to a separate round button, so your Chatbot Position and gradient colors carry over automatically. Opening it there fills the screen with the chat panel instead of sliding out a side panel.
Theming from CSS #
One variable is intended as the site-level CSS hook. Setting it re-brands the accent used by notices, highlights, the loading spinner, and focus rings inside the chat:
“`
:root {
–hr-chat-accent: #0a7d4f;
–hr-chat-accent-hover: #08663f;
–hr-chat-accent-soft: rgba(10, 125, 79, 0.06);
–hr-chat-accent-ring: rgba(10, 125, 79, 0.18);
}
“`
The three companions are optional; sensible values are derived if you set only the first. A few supporting tokens also live at :root if you need them: --hr-chat-bg, --hr-chat-bg-subtle, --hr-chat-text, --hr-chat-text-muted, --hr-chat-border, --hr-chat-sans, --hr-chat-radius, --hr-chat-shadow.
Advanced: structural classes #
Everything below is rendered by JavaScript after page load and is not a supported theming surface. In particular, the launcher gradient, orb palette, and drawer dimensions are recomputed from your settings on every save, so CSS pinned against them is fragile. Use these hooks sparingly, and prefer the settings above wherever they cover your case.
.hr-chat-tab– the launcher button; inside it.hr-chat-tab-inner,.hr-chat-tab-orb(the animated orb),.hr-chat-tab-icon,.hr-chat-tab-tooltip.hr-chat-overlay– the dim backdrop behind the open drawer.hr-chat-drawer– the chat panel; inside it.hr-chat-header(with.hr-chat-header-name),.hr-chat-messages,.hr-chat-input-area(with.hr-chat-input,.hr-chat-send-btn,.hr-chat-mic-btn)- Message bubbles, added as the conversation runs:
.hr-chat-bubble-user,.hr-chat-bubble-assistant,.hr-chat-bubble-operator,.hr-chat-cardswith.hr-chat-card(property suggestion cards and their-thumb,-title,-meta,-priceparts),.hr-chat-chipswith.hr-chat-chip(quick-reply chips) - Launcher state classes toggled at runtime:
.hr-chat-tab-open,.hr-chat-has-unread,.hr-chat-tab-pulse
A small number of the concierge’s own rules use !important to protect its geometry and icon colors from theme resets; if a rule of yours doesn’t take on those properties, that protection is why.
More styling references #
Machine-readable version: all four styling references are also published as a single plain-text file at homerunner.io/llms-styling.txt. Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately.