How do I customize the widget with CSS?

Before you write CSS: try Advanced colors

Most color changes don't need custom CSS anymore. In the dashboard, open your widget's Style tab → Brand section → expand Advanced colors. There you can override eight individual color tokens:

• bg — the chat window background.
• surface — the input field and secondary panels.
• border — dividers and outlines.
• text — primary copy.
• textMuted — placeholders and captions.
• assistantBubble — the assistant reply background.
• userBubble — the user message background (defaults to your accent).
• userBubbleText — text inside the user bubble (auto-contrasts with the bubble color).

Any token you leave unset stays on "auto" and is derived from your theme and accent, so partial overrides always compose with light/dark mode. Two things to keep in mind: choosing a style preset resets your color overrides, and custom CSS still wins for anything beyond colors — layout, fonts, radii, animations, or selectors these tokens don't cover.

Where to add custom CSS

Go to your widget → Advanced tab → Custom CSS field. Changes are saved with the global Save button and take effect for all new sessions within a few seconds.

Basic examples

Change the font

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

.cmdk-root {
  font-family: "Inter", system-ui, sans-serif;
}

Rounder / squarer panel

/* Square look */
.cmdk-root * {
  border-radius: 4px !important;
}

/* Very round look */
.cmdk-root * {
  border-radius: 16px !important;
}

Message bubble colors

/* User message */
.cmdk-bubble-user {
  background: #4f46e5;
  color: #fff;
}

/* Assistant message */
.cmdk-bubble-assistant {
  background: #1e1e2e;
  color: #e2e8f0;
}

Custom panel header

.cmdk-header {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-bottom: none;
}

.cmdk-header-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

Style the input bar

.cmdk-input-wrap {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #0f0f1a;
}

.cmdk-input {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #e2e8f0;
}

Light and dark theme

The widget root element carries a data-theme attribute ("light" or "dark") that you can use to write theme-aware overrides:

/* Dark theme overrides */
.cmdk-root[data-theme="dark"] .cmdk-input {
  background: #111827;
}

/* Light theme overrides */
.cmdk-root[data-theme="light"] .cmdk-input {
  background: #f9fafb;
  color: #111827;
}

Accent color token

The accent color you set in the Overview tab is available as a CSS custom property. You can read it or override it:

/* Read the operator-configured accent */
.cmdk-send-button {
  background: var(--cmdk-accent);
}

/* Override it */
.cmdk-root {
  --cmdk-accent: #10b981;
}

Watermark protection

Custom CSS is injected into the widget before the platform's system stylesheet. The system sheet runs last in document order and enforces the following rules with !important:

.cmdk-branding-wrap {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cmdk-branding-wrap img {
  display: inline !important;
  max-height: none !important;
}

Because the system CSS loads last, its !important declarations win over any conflicting !important in your custom CSS for the same property and specificity. The only supported way to remove the logo is to disable branding in widget settings — available on the AI Pilot plan.

Inspecting class names

1. Open your site with the widget loaded.
2. Right-click any element inside the chat panel.
3. Select Inspect — browser devtools will focus the iframe's DOM.
4. All CMD+K internal classes are prefixed with cmdk- for easy targeting.