FAQ as a support widget: tap a suggested question, watch the typing dots, read the answer, and get follow-up questions chosen from that answer so the conversation branches. Each answer has helpful buttons and a hand-off to a person.
Instant answers
Pick a question and the next ones follow from your answer, so you reach the detail you need in two or three taps.
npx shadcn@latest add https://hyperblur.dev/r/faq-branching-chat.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-branching-chat.tsx.
import { FaqBranchingChat } from "@/components/hyperblur/faq-branching-chat"
<FaqBranchingChat onFeedback={(id, ok) => console.log(id, ok)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Instant answers" | Line above the title. |
| title | string | "Ask like you would ask a friend." | Heading. |
| subtitle | string | Paragraph under the heading. | |
| agentName | string | "Fern & Field support" | Name in the widget header. |
| greeting | string | First message from support. | |
| nodes | Record<string, { question: string; answer: string; next?: string[] }> | 8 nodes | The question tree. next lists the ids offered after this answer. |
| roots | string[] | ["shipping", "returns", "care"] | Ids offered at the start. |
| initialPath | string[] | ["shipping"] | Exchanges already shown on load. |
| contact | { label: string; href: string } | { label: "Talk to a person", href: "#" } | Hand-off link, shown beside the copy and as the last chip. |
| typingDelay | number | 900 | Base milliseconds of typing before an answer appears. |
| onAsk | (id: string) => void | Called when a question is chosen. | |
| onFeedback | (id: string, helpful: boolean) => void | Called when an answer is rated. | |
| accent | string | "#ff6b4a" | Visitor bubble and chip color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |