Customization

Theme

Set the overall color scheme with the theme option:

embedWidget({
  url: 'https://console.thesys.dev/app/your-slug',
  theme: 'light', // 'dark' (default) or 'light'
});

This affects the floating button, loading screen, and the overall widget chrome. The agent content inside the iframe is styled independently through the Agent Builder style settings.

Chatbar Theming

The chatbar layout supports fine-grained visual customization through the options.theme property. Each value maps to a CSS variable on the chatbar container.

embedWidget({
  url: 'https://console.thesys.dev/app/your-slug',
  type: 'chatbar',
  options: {
    theme: {
      containerFills: '#1a1a2e',
      strokeDefault: '#333366',
      roundedL: '24px',
      primaryText: '#e0e0ff',
      interactiveAccent: '#7c3aed',
      accentPrimaryText: '#ffffff',
      roundedS: '12px',
    },
  },
});

Theme Properties

Property	CSS Variable	Description
`containerFills`	`--crayon-container-fills`	Background color of the chatbar input area
`strokeDefault`	`--crayon-stroke-default`	Border color of the input area
`roundedL`	`--crayon-rounded-l`	Border radius of the entire chatbar
`primaryText`	`--crayon-primary-text`	Color of the input text
`interactiveAccent`	`--crayon-interactive-accent`	Background color of the send button
`accentPrimaryText`	`--crayon-accent-primary-text`	Icon/text color on the send button
`roundedS`	`--crayon-rounded-s`	Border radius of the send button

All properties are optional. Unset properties use the defaults from the widget’s dark or light theme.

To match your site’s design exactly, inspect the chatbar element in DevTools and override additional CSS variables on the .thesys--chatbar-widget selector.

Chatbar Options

Beyond theming, the chatbar accepts functional options:

embedWidget({
  url: '...',
  type: 'chatbar',
  options: {
    placeholder: 'Search our knowledge base...',
    keyboardShortcutEnabled: false,
    conversationStarters: [
      'What features do you offer?',
      'How does pricing work?',
    ],
  },
});

Option	Type	Default	Description
`placeholder`	`string`	`"Ask me anything"`	Input placeholder text
`keyboardShortcutEnabled`	`boolean`	`true`	Allow Space to focus the input from anywhere on the page
`conversationStarters`	`string[]`	`[]`	Suggested prompts shown when the input is focused

See Widget Types — Chatbar for more details on chatbar behavior.

If you’re using BYOI to identify users, you’ll typically want to hide the built-in Thesys login interface:

embedWidget({
  url: '...',
  hideLogin: true,
  identityToken: yourJwt,
});

Preloading

By default, the agent iframe loads when the user first opens the widget. To eliminate that initial load delay, enable preloading:

// Preload immediately
const widget = embedWidget({
  url: '...',
  preload: true,
});

// Or preload later based on user behavior
widget.preload();

The iframe loads invisibly in the background so the agent is ready instantly when the user opens it.

Getting Started

Embed Widget

Features

Advanced

Theme

Chatbar Theming

Theme Properties

Chatbar Options

Preloading

​Theme

​Chatbar Theming

​Theme Properties

​Chatbar Options

​Hiding the Login UI

​Preloading

Theme

Chatbar Theming

Theme Properties

Chatbar Options

Hiding the Login UI

Preloading