---
title: BottomTray
description: A floating support-style chat widget.
---

`BottomTray` provides a floating chat widget instead of a full-page chat surface.

This page covers the widget-style layout for support flows, product assistants, and experiences where chat stays collapsed until a user opens it.

```tsx
import { BottomTray } from "@openuidev/react-ui";

export function App() {
  return (
    <>
      <main>{/* Your app */}</main>
      <BottomTray apiUrl="/api/chat" agentName="Support" />
    </>
  );
}
```

![BottomTray widget in collapsed and expanded states](/docs/images/chat/bottom-tray.gif)

## Controlled open state

```tsx
<BottomTray apiUrl="/api/chat" isOpen={isOpen} onOpenChange={setIsOpen} />
```

Use the same backend configuration props as the other layouts. The only layout-specific props are the open-state controls.

That means you can start with `BottomTray` for the UI and still reuse the same `apiUrl`, `processMessage`, `streamProtocol`, and `threadApiUrl` setup from the other layouts.

## Related guides

<Cards>
  <Card title="Connecting to LLM" href="/docs/chat/connecting">
    Configure endpoint, adapters, and auth headers.
  </Card>
  <Card title="Connect Thread History" href="/docs/chat/persistence">
    Load saved threads and previous messages into the widget.
  </Card>
  <Card title="Welcome & Starters" href="/docs/chat/welcome">
    Configure the empty-state content and starter prompts.
  </Card>
  <Card title="Theming" href="/docs/chat/theming">
    Adjust mode and theme overrides.
  </Card>
</Cards>
