Support widgetPro
An in-app help launcher that grows into live article search, reading, and a chat with your team.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SupportWidget } from 'animui/support-widget';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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.
import { SupportWidget } from "animui/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.
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.