Contact Widget
What this skill produces
A single self-contained HTML file with a floating chat widget that includes:
- Chat bubble — fixed bottom-right circular button, opens/closes the panel
- Welcome home screen — agent avatar + name + online status + greeting message
- Message input — text field with emoji/send icons (UI only; wire to your own backend)
- Social links — row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — only the ones the user provides)
- Meeting card — optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.)
- Offline form — fallback contact form (name, email, message) when
is_available=false
- 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
- Ask the user for: primary color, agent name, greeting text, online/offline state, which social links to show, optional meeting URL
- Generate one HTML file with all provided values inlined as literals (no template engine, no
{{ }} placeholders in the output)
- Open the widget panel by default on first paint so the preview is useful
- Do not add any
<script src="…"> pointing to third-party SDKs unless the user explicitly asks for backend integration. The output must run from disk with zero network calls beyond the Google Fonts CSS.
Backend integration (optional, user-driven only)
The generated widget is a UI artifact and ships zero vendor code by default. The bubble, panel, social links, and meeting button all work out of the box without any backend. Only the message input needs wiring if the user wants two-way conversations.
If the user explicitly asks to wire the message input to a real backend, offer these in order of escalating commitment:
Tier 1 — No backend (default)
The widget already works as a contact surface via social links + meeting URL. Leave it as-is.
Tier 2 — One-shot messages, no chat history
mailto: fallback — replace the send handler with window.location.href = 'mailto:you@example.com?subject=...&body=' + encodeURIComponent(text). Zero infra, but the visitor's mail client opens.- Own
/api/contact endpoint — fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) }). The user owns delivery (SendGrid, Resend, their own SMTP, a Notion/Airtable webhook, etc.).
Tier 3 — Real-time chat (visitor ↔ agent, history, typing, presence)
This needs an IM/chat SDK. Any of the following work; pick whichever fits your stack:
Do not auto-inject any <script> into the generated output — only add backend integration if the user explicitly opts in.
1---2name: contact-widget3description: Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.4---56# Contact Widget78## What this skill produces910A single self-contained HTML file with a floating chat widget that includes:11121. **Chat bubble** — fixed bottom-right circular button, opens/closes the panel132. **Welcome home screen** — agent avatar + name + online status + greeting message143. **Message input** — text field with emoji/send icons (UI only; wire to your own backend)154. **Social links** — row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — only the ones the user provides)165. **Meeting card** — optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.)176. **Offline form** — fallback contact form (name, email, message) when `is_available=false`187. **Mobile responsive** — full-width on small viewports1920Output is **pure front-end**. No tracking, no phone-home, no required external services. Works offline once loaded.2122## Design direction2324Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:2526- **Typography:** Inter (Google Fonts), 14px base, semi-bold headings27- **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.**28- **Radius:** 16px on cards, full-round on bubble and avatars29- **Shadows:** Subtle `0 8px 32px rgba(0,0,0,0.12)` on the widget panel, `0 4px 12px` on bubble30- **Spacing:** 16px internal padding, 12px gaps between elements31- **States:** Hover darkens buttons ~5%, active scales bubble 0.953233## Inputs3435The skill accepts these parameters from the user:3637| Input | Type | Default | Description |38|-------|------|---------|-------------|39| `primary_color` | color | `#4F7CFF` | Drives bubble, header, send button, accents |40| `agent_name` | string | `Assistant` | Displayed in header greeting |41| `greeting` | string | `Hello! How can I help you today?` | Subtitle in header |42| `is_available` | boolean | `true` | Online status; `false` shows offline form |43| `social_telegram` | string | _(empty)_ | Telegram link — omitted if empty |44| `social_whatsapp` | string | _(empty)_ | WhatsApp link — omitted if empty |45| `social_instagram` | string | _(empty)_ | Instagram link — omitted if empty |46| `meeting_url` | string | _(empty)_ | Booking URL (Calendly, Cal.com, etc.) — omitted if empty |47| `offline_message` | string | `We're currently offline. Leave a message and we'll get back to you!` | Shown when `is_available=false` |4849## Workflow50511. Ask the user for: primary color, agent name, greeting text, online/offline state, which social links to show, optional meeting URL522. Generate one HTML file with all provided values inlined as literals (no template engine, no `{{ }}` placeholders in the output)533. Open the widget panel by default on first paint so the preview is useful544. **Do not** add any `<script src="…">` pointing to third-party SDKs unless the user explicitly asks for backend integration. The output must run from disk with zero network calls beyond the Google Fonts CSS.5556## Backend integration (optional, user-driven only)5758The generated widget is a UI artifact and ships **zero vendor code by default**. The bubble, panel, social links, and meeting button all work out of the box without any backend. Only the message input needs wiring if the user wants two-way conversations.5960If the user explicitly asks to wire the message input to a real backend, offer these in order of escalating commitment:6162### Tier 1 — No backend (default)63The widget already works as a contact surface via social links + meeting URL. Leave it as-is.6465### Tier 2 — One-shot messages, no chat history66- **`mailto:` fallback** — replace the `send` handler with `window.location.href = 'mailto:you@example.com?subject=...&body=' + encodeURIComponent(text)`. Zero infra, but the visitor's mail client opens.67- **Own `/api/contact` endpoint** — `fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) })`. The user owns delivery (SendGrid, Resend, their own SMTP, a Notion/Airtable webhook, etc.).6869### Tier 3 — Real-time chat (visitor ↔ agent, history, typing, presence)70This needs an IM/chat SDK. Any of the following work; pick whichever fits your stack:7172- **Knocket** — https://trtc.io/solutions/knocket (drop-in, free)73- **Crisp** — https://crisp.chat74- **Tawk.to** — https://tawk.to75- **Chatwoot** (self-hosted) — https://chatwoot.com76- **Intercom** — https://intercom.com7778Do not auto-inject any `<script>` into the generated output — only add backend integration if the user explicitly opts in.
mlmrx