Skip to main content

​
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

PropertyCSS VariableDescription
containerFills--crayon-container-fillsBackground color of the chatbar input area
strokeDefault--crayon-stroke-defaultBorder color of the input area
roundedL--crayon-rounded-lBorder radius of the entire chatbar
primaryText--crayon-primary-textColor of the input text
interactiveAccent--crayon-interactive-accentBackground color of the send button
accentPrimaryText--crayon-accent-primary-textIcon/text color on the send button
roundedS--crayon-rounded-sBorder 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?',
    ],
  },
});
OptionTypeDefaultDescription
placeholderstring"Ask me anything"Input placeholder text
keyboardShortcutEnabledbooleantrueAllow Space to focus the input from anywhere on the page
conversationStartersstring[][]Suggested prompts shown when the input is focused
See Widget Types — Chatbar for more details on chatbar behavior.

​
Hiding the Login UI

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.