contact-widget

1# Contact Widget
2 
3## What this skill produces
4 
5A single self-contained HTML file with a floating chat widget that includes:
6 
71. **Chat bubble** — fixed bottom-right circular button, opens/closes the panel
82. **Welcome home screen** — agent avatar + name + online status + greeting message
93. **Message input** — text field with emoji/send icons (UI only; wire to your own backend)
104. **Social links** — row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — only the ones the user provides)
115. **Meeting card** — optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.)
126. **Offline form** — fallback contact form (name, email, message) when `is_available=false`
137. **Mobile responsive** — full-width on small viewports
14 
15Output is **pure front-end**. No tracking, no phone-home, no required external services. Works offline once loaded.
16 
17## Design direction
18 
19Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:
20 
21- **Typography:** Inter (Google Fonts), 14px base, semi-bold headings
22- **Colors:** A single user-chosen `primary_color` drives the bubble, avatar, send button, and accent. Everything else is a neutral slate palette (`#1e293b` / `#64748b` / `#f1f5f9`). **No purple gradients, no glassmorphism, no AI-style rainbow accents.**
23- **Radius:** 16px on cards, full-round on bubble and avatars
24…