Contact Widget

What this skill produces

A single self-contained HTML file with a floating chat widget that includes:

1. Chat bubble, fixed bottom-right circular button, opens/closes the panel
2. Welcome home screen, agent avatar + name + online status + greeting message
3. Message input, text field with emoji/send icons (UI only; wire to your own backend)
4. Social links, row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack, only the ones the user provides)
5. Meeting card, optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.)
6. Offline form, fallback contact form (name, email, message) when is_available=false
7. Mobile responsive, full-width on small viewports

Output is pure front-end. No tracking, no phone-home, no required external services. Works offline once loaded.

Design direction

Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:

• Typography: Inter (Google Fonts), 14px base, semi-bold headings
• 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.
• Radius: 16px on cards, full-round on bubble and avatars
• Shadows: Subtle 0 8px 32px rgba(0,0,0,0.12) on the widget panel, 0 4px 12px on bubble
• Spacing: 16px internal padding, 12px gaps between elements
• States: Hover darkens buttons ~5%, active scales bubble 0.95

Inputs

The skill accepts these parameters from the user: