> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

> Theme the chatbar, set placeholders, and style the widget to match your brand.

## Theme

Set the overall color scheme with the `theme` option:

```javascript theme={null}
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.

```javascript theme={null}
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.

<Tip>
  To match your site's design exactly, inspect the chatbar element in DevTools and override additional CSS variables on the `.thesys--chatbar-widget` selector.
</Tip>

***

## Chatbar Options

Beyond theming, the chatbar accepts functional options:

```javascript theme={null}
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](/agent-builder/embed-widget/widget-types#chatbar) for more details on chatbar behavior.

***

## Hiding the Login UI

If you're using [BYOI](/agent-builder/byoi) to identify users, you'll typically want to hide the built-in Thesys login interface:

```javascript theme={null}
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:

```javascript theme={null}
// 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.