Chat Widget Demo
A customizable, Cal.com-style chat widget with Home, Messages, and Chat views. Click the button in the bottom-right corner to try it out.
Multi-View Navigation
Home screen with greeting, Messages list, and full Chat view with smooth transitions.
Customizable Branding
Configure brand colors, logos, agent avatars, and greeting messages.
News Feed Integration
Display announcements and updates on the home screen.
Real-time Messaging
Beautiful message bubbles with timestamps, agent info, and typing indicators.
Rich Input
Message input with emoji, attachments, images, and voice buttons.
Dark Mode Support
Full light and dark theme support with CSS variables.
Usage Example
import { ChatWidget } from "@/components/widget";
<ChatWidget
config={{
brandName: "Your Brand",
primaryColor: "#2D5A27",
greeting: "How can we help?",
placeholder: "Message...",
appearance: "light",
position: "bottom-right",
enableNewsFeed: true,
agents: [
{ id: "1", name: "Support", status: "online" }
],
}}
/>