Configure the widget without touching compiled CSS

Switch between a fixed-look example and a mode-scoped example, preview the embedded widget, and copy the resulting config or host embed snippet.

HomeOpen Canvas

Theme Controls

Pick the example shape you want to preview and edit its tokens below.

Preview example

Fixed-look example

The flat token bag is the simplest option when the host does not want the widget to change with theme mode.

Fixed-look tokens

These tokens apply as one fixed look.

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Custom color

Widget Config

Current `window.csWidgetConfig` output for the selected example.

{
  "theme": {
    "tokens": {
      "primary": "#4f6600",
      "background": "#fafaeb",
      "foreground": "#1a1c14",
      "card": "#fafaeb",
      "cardForeground": "#1a1c14",
      "popover": "#fafaeb",
      "popoverForeground": "#1a1c14",
      "secondary": "#566431",
      "secondaryForeground": "#ffffff",
      "muted": "#e1e5cd",
      "mutedForeground": "#454937",
      "accent": "#e1e5cd",
      "accentForeground": "#454937",
      "border": "#c5c9b2",
      "input": "#c5c9b2",
      "ring": "#4f6600",
      "destructive": "#ba1a1a",
      "radius": "0.5rem",
      "fontSans": "\"Inter Variable\", sans-serif",
      "widgetToggleBg": "#4f6600",
      "widgetToggleFg": "#ffffff",
      "widgetHeaderBg": "#d9eaaa",
      "widgetSurfaceRaised": "#eeefe0"
    }
  },
  "showToggleButton": false,
  "showThemeToggleButton": false,
  "invertLogoVariant": false
}

Embed Snippet

Uses `WIDGET_BASE_URL` when present.

<script>
  window.csWidgetConfig = {
    "theme": {
      "tokens": {
        "primary": "#4f6600",
        "background": "#fafaeb",
        "foreground": "#1a1c14",
        "card": "#fafaeb",
        "cardForeground": "#1a1c14",
        "popover": "#fafaeb",
        "popoverForeground": "#1a1c14",
        "secondary": "#566431",
        "secondaryForeground": "#ffffff",
        "muted": "#e1e5cd",
        "mutedForeground": "#454937",
        "accent": "#e1e5cd",
        "accentForeground": "#454937",
        "border": "#c5c9b2",
        "input": "#c5c9b2",
        "ring": "#4f6600",
        "destructive": "#ba1a1a",
        "radius": "0.5rem",
        "fontSans": "\"Inter Variable\", sans-serif",
        "widgetToggleBg": "#4f6600",
        "widgetToggleFg": "#ffffff",
        "widgetHeaderBg": "#d9eaaa",
        "widgetSurfaceRaised": "#eeefe0"
      }
    },
    "showToggleButton": false,
    "showThemeToggleButton": false,
    "invertLogoVariant": false
  };
</script>
<script src="https://ms-widget.pixelaitech.com/widget.js"></script>