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:

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| primary_color | color | #4F7CFF | Drives bubble, header, send button, accents |
| agent_name | string | Assistant | Displayed in header greeting |
| greeting | string | Hello! How can I help you today? | Subtitle in header |
| is_available | boolean | true | Online status; false shows offline form |
| social_telegram | string | _(empty)_ | Telegram link — omitted if empty |
| social_whatsapp | string | _(empty)_ | WhatsApp link — omitted if empty |
| social_instagram | string | _(empty)_ | Instagram link — omitted if empty |
| meeting_url | string | _(empty)_ | Booking URL (Calendly, Cal.com, etc.) — omitted if empty |
| offline_message | string | We're currently offline. Leave a message and we'll get back to you! | Shown when is_available=false |

Workflow

1. Resolve primary color, agent name, greeting text, online/offline state,

social links, and optional meeting URL from the request and known context.
Use the documented defaults and omit empty optional links. Ask one
consolidated form only if a missing value would materially change the
requested widget and cannot be safely defaulted.

1. Generate one HTML file with all provided values inlined as literals (no template engine, no {{ }} placeholders in the output)
2. Open the widget panel by default on first paint so the preview is useful
3. Do not add any