A dark contact section with a support chat card: the greeting types in, quick replies stream an answer, and an inline email card validates, loads and confirms.
4 people online now
Our support team is spread across three time zones, so someone who knows the product answers within minutes, any day of the week.
npx shadcn@latest add https://hyperblur.dev/r/contact-chat-widget.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-chat-widget.tsx.
import { ContactChatWidget } from "@/components/hyperblur/contact-chat-widget"
<ContactChatWidget onSubmit={(v) => console.log(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "4 people online now" | Pill above the title with a live dot. |
| title | string | "Questions? Talk to a human, not a ticket queue." | Heading. Text after the first comma moves to a second, gradient line. |
| subtitle | string | "Our support team is spread..." | Supporting text. |
| agentName | string | "Priya Raman" | Name of the person answering in the chat. |
| team | string[] | ["Priya Raman", "Leo Brandt", "Ama Osei"] | Names shown as avatars in the chat header. |
| greeting | string[] | 2 opening messages | First message shows at once, the second types in after a moment. |
| replies | { label: string; answer: string }[] | 4 quick replies | Quick reply chips and the answer each one streams back. |
| channels | { label: string; detail: string; href: string }[] | Live chat, Email, Status | Other ways to reach the team, listed beside the widget. |
| onSubmit | (values: { email: string; topic: string | null; message: string }) => void | Promise<unknown> | Called when the visitor leaves a valid email. Receives the chosen quick reply and the last message. Nothing is posted. | |
| accent | string | "#8b5cf6" | Color of visitor bubbles, chips, the send button and the header tint. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |