Skip to main content
The embed widget ships with three layout types. Each is optimized for a different use case. Set the type when calling embedWidget(): 
const widget = embedWidget({
  url: 'https://console.thesys.dev/app/your-slug',
  type: 'tray', // 'tray' | 'full-screen' | 'chatbar'
});

​
Tray

embedWidget({ url: '...', type: 'tray' });
The default layout. A floating circular button appears in the bottom-right corner. Clicking it opens a compact chat panel (583 × 800px, capped at 100vh - 100px). Best for: Help widgets, customer support, contextual assistants that shouldn’t dominate the page.
On mobile devices (viewport under 768px), the tray automatically switches to a full-screen layout for better usability. See Mobile Behavior.

​
Full-screen

embedWidget({ url: '...', type: 'full-screen' });
Same floating button as the tray, but clicking it opens the agent as a full-screen overlay. The agent fills the entire viewport. Best for: Dedicated AI assistant pages, onboarding flows, or experiences where you want the agent to be the primary focus.

​
Chatbar

embedWidget({ url: '...', type: 'chatbar' });
An inline input bar fixed to the bottom center of the page — no floating button. The user types directly into the bar, and a chat window opens above it. Best for: Search-like experiences, landing pages, AI-native products where the agent is the main interaction point.

​
Chatbar-Specific Options

The chatbar type accepts additional configuration through the options property: 
embedWidget({
  url: 'https://console.thesys.dev/app/your-slug',
  type: 'chatbar',
  options: {
    placeholder: 'Ask me anything about our product...',
    keyboardShortcutEnabled: true,
    conversationStarters: [
      'What can you help me with?',
      'Show me pricing plans',
      'How do I get started?',
    ],
  },
});
OptionTypeDefaultDescription
placeholderstring"Ask me anything"Placeholder text in the input field
keyboardShortcutEnabledbooleantruePress Space anywhere on the page to focus the input (only when no other input is focused)
conversationStartersstring[][]Suggested prompts displayed above the input when focused
themeChatbarTheme—Visual overrides for the chatbar. See Customization

​
Keyboard Shortcuts

When keyboardShortcutEnabled is true (the default):
  • Space — Focuses the chatbar input (only when no other text field is active)
  • Escape — Blurs the chatbar input

​
Conversation Starters

When the input is focused and the chat window is closed, the starters appear as clickable chips labeled A, B, C, etc. Clicking one sends it as the first message and opens the chat window.

​
Choosing a Type

CriteriaTrayFull-screenChatbar
Presence on pageFloating buttonFloating buttonInline input bar
Space when openCompact panelFull viewportWindow above input
Best forHelp / supportFocused AI tasksSearch / main UX
Mobile behaviorFull-screenFull-screenInput stays; window goes full-screen