Skip to content
AskVault Docs
Try Free →

Custom CSS for the widget

Written by , Founder, AskVault · Reviewed by Aashiq
Last updated: · 3 min read

When to use custom CSS

Three cases the dashboard knobs don't cover:

  1. Brand font. Loading a custom font from Google Fonts or your CDN.
  2. Button or bubble shape. Pill vs rounded-square vs square corners.
  3. Spacing and density. Tighter or looser layout for specific brand systems.

About 90% of teams stick with dashboard knobs. Custom CSS is for brand-strict deployments.

How to add custom CSS

  1. Open Widget Studio > CSS Override.
  2. Paste your CSS (up to 20 KB).
  3. Preview live in the right panel.
  4. Save. Changes apply within 30 seconds via CDN.

CSS selectors available

The widget uses Shadow DOM; CSS scopes to the widget only. Common selectors:

  • .aw-launcher. The bubble button.
  • .aw-window. The opened chat window.
  • .aw-message. Each message bubble.
  • .aw-message-bot and .aw-message-user. Bot vs user messages.
  • .aw-input. The text input.
  • .aw-button. Action buttons (Send, Suggested chips).

Full class reference under Widget Studio > CSS Override > Reference.

Example: load a custom font

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


.aw-window {
  font-family: 'Inter', system-ui, sans-serif;
}

Loads Inter at 400 and 600 weights, applies across the widget.

Example: pill buttons

.aw-button {
  border-radius: 9999px;
  padding: 8px 20px;
}

Example: tighter density

.aw-message {
  padding: 8px 12px;
  margin-bottom: 4px;
  line-height: 1.4;
}

CSS variables exposed

For runtime theming, the widget reads CSS variables:

  • --aw-accent. Accent color hex.
  • --aw-bg. Background color.
  • --aw-text. Primary text color.
  • --aw-radius. Border radius default.

Override:

:host {
  --aw-accent: #FF6B35;
  --aw-radius: 12px;
}

Limits

  • CSS size. 20 KB max.
  • No external assets other than fonts via @import from approved hosts.
  • No JavaScript in CSS (no behavior: quirks).
  • No position: fixed overrides that break layout.

Common pitfalls

CSS breaks layout. Test in preview before saving. Roll back via History.

Font flicker on load. Use font-display: swap in your @import.

Mobile breaks. Test under viewport toggle. Mobile-specific overrides via @media queries.

CSS doesn't apply. Shadow DOM scoping; only AskVault widget selectors work, not global CSS.

Planned features (on the roadmap)

  • Visual CSS editor. Today, paste raw CSS. Block-based editor planned.
  • CSS asset upload beyond inline. Planned for image overrides.

FAQ

Does custom CSS work on lower tiers?

No. Enterprise only. Lower tiers use Widget Studio knobs.

Can I import external CSS files?

Only fonts via approved CDNs. Other external CSS blocked for security.

How do I revert?

Widget Studio > CSS Override > History > Rollback. 90-day window.

Was this page helpful?