Live chat widget with message threading and status.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

title

• Type: string - Default: 'Live Chat'
• Chat title

placeholder

• Type: string - Default: 'Type a message...'
• Placeholder text

agentName

• Type: string - Default: 'Support Agent'
• Agent name

showTyping

• Type: boolean - Default: true
• Show typing indicator

position

• Type: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' - Default: 'bottom-right'
• Initial position

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 16
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

className

• Type: string
• Additional CSS class

onSendMessage

• Type: (message: string) => void
• Message send handler

initialMessages

• Type: string
• Initial messages (JSON array)

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 16px; /* Border radius */--cc-primary: #3b82f6; /* Primary brand color */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-live-chat - Component wrapper