# Support Chat Widget

> An Intercom-style support messenger. A round launcher with an unread badge opens a panel with three tabs. Home greets the visitor beside the team's faces and reply time, resumes the recent chat and searches help. Messages is a live chat with a human agent: typing, quick-reply chips, attachments and a five-face rating once the chat ends. Help lists and searches articles.

- Slug: `support-chat-widget`
- Category: [Messaging](https://www.assembli.design/category/messaging.md)
- Type: component
- Tags: support, chat, widget, launcher, help-center, live-chat, rating, customer-support
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/support-chat-widget
- Page: https://www.assembli.design/components/support-chat-widget

![Support Chat Widget preview](https://www.assembli.design/thumbnails/support-chat-widget-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` (required) | `{ name: string; logo?: React.ReactNode }` |  | Your product's name and mark, shown in the header. |
| `team` | `SupportAgent[]` | `[]` | People shown on the home screen. |
| `greeting` | `React.ReactNode` | `"How can we help?"` | The home screen's big line. |
| `replyTime` | `React.ReactNode` | `"We typically reply in a few minutes"` |  |
| `conversation` (required) | `SupportConversation` |  |  |
| `quickReplies` | `string[]` | `[]` | Suggested answers offered under the agent's latest message. |
| `articles` | `SupportArticle[]` | `[]` |  |
| `onSend` | `(message: SupportMessage, file?: File) => void` |  |  |
| `onRate` | `(rating: number, comment: string) => void` |  | Called with 1–5 and an optional comment when the visitor rates an ended conversation. |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `defaultView` | `"home" \| "chat" \| "help"` | `"home"` |  |
| `initialUnread` | `number` | `0` | Agent messages the visitor hasn't seen yet when the widget mounts. |
| `position` | `"fixed" \| "absolute"` | `"fixed"` | "fixed" pins the launcher to the viewport's corner, as on a real site. "absolute" pins it to the nearest positioned ancestor, for previews and app frames. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/support-chat-widget/support-chat-widget.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/support-chat-widget
```

Registry item JSON: https://www.assembli.design/r/support-chat-widget.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.