Support widget
ProAn in-app help launcher that grows into live article search, reading, and a chat with your team.
Live block · sample data
- An in-app help launcher with article search, an article reader, and chat.
- SaaS products that want one help entry point mounted near the app root.
- Use support-conversation for a full page support chat.
- Use ai-composer for an AI prompt input without help articles.
- Use popover for a small anchored tip.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the help entry point inside a SaaS app. Load articles from your help center into support-widget-data.ts and connect onSend to your inbox or chat provider; replies in the preview are simulated.
example.tsx
import { SupportWidget } from "@/components/arc/blocks/support-widget/support-widget"; export function AppShell() { return ( <SupportWidget onSend={message => sendToInbox(message)} onOpenChange={open => track(open ? "help_opened" : "help_closed")} /> );}SupportWidget
A help launcher that grows into article search, an article reader and a chat thread. Articles, team and suggested replies are sample data in support-widget-data.ts; agent replies are simulated.
PropTypeDefaultDescription
onSend(message: string) => void–Called with each message the person sends, so you can forward it to your inbox or chat provider.onOpenChange(open: boolean) => void–Called when the launcher opens or closes the panel.- Escape
- Closes the panel and returns focus to the launcher.
- Arrow down
- From the search field, moves focus into the article list.
- Arrow uporArrow down
- Moves between articles; up from the first article returns to search.
- Enter
- In search, opens the top result.
- The open panel is a role="dialog" whose label switches between Help and the conversation.
- The chat thread is a role="log" with a screen reader only typing indicator, and a polite live region announces view changes.
- The launcher uses aria-haspopup="dialog" and includes the unread reply count in its label.
- The launcher springs open into the panel, and views slide in the direction of travel.
- Unread badges and the launcher icon pop in on a snappy spring; changing text crossfades with a short rise.
- Reduced motion replaces scale, slide and rotate with plain fades.
- The dock is positioned absolute inside the block's 680px demo stage; move it to position fixed when you mount it in a real app.
- Below a 519px container the stage is 640px tall, the dock sits closer to the corner, and the sample app nav hides.
- On coarse pointers opening chat focuses the panel instead of the text field, so the keyboard does not pop up on its own.
- Views mount one at a time and ResizeObservers animate the panel size between them.
- Article search filters an in-memory list; move it to your search API for a large help center.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the in-app help entry point of a SaaS product, mounted once near the app root.
- Replace ARTICLES, TEAM, SUGGESTIONS and replyTo in support-widget-data.ts with your help center and real replies.
- Wire onSend to your inbox or chat provider; the sample app page behind the launcher is decoration to remove.
The full library index for assistants is at /llms.txt.