contact-widget

name contact-widget description Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies. triggers ["contact widget","chat widget","floating chat","live chat widget"] od {"mode":"prototype","platform":"desktop","scenario":"engineering","preview":{"type":"html","entry":"example.html","width":420,"height":640,"reload":"debounce-300"},"design_system":{"requires":false},"inputs":[{"name":"primary_color","type":"string","default":"#4F7CFF"},{"name":"agent_name","type":"string","default":"Assistant"},{"name":"greeting","type":"string","default":"Hello! How can I help you today?"},{"name":"is_available","type":"boolean","default":true},{"name":"social_telegram","type":"string","default":""},{"name":"social_whatsapp","type":"string","default":""},{"name":"social_instagram","type":"string","default":""},{"name":"meeting_url","type":"string","default":""},{"name":"offline_message","type":"string","default":"We're currently offline. Leave a message and we'll get back to you!"}],"outputs":{"primary":"example.html"},"example_prompt":"Create a contact widget for my portfolio site. Primary color #4F7CFF, agent name 'Alex', greeting 'Hey! How can I help you today?', show Telegram and WhatsApp links."} 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 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. 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: Knocket — https://trtc.io/solutions/knocket (drop-in, free) Crisp — https://crisp.chat Tawk.to — https://tawk.to Chatwoot (self-hosted) — https://chatwoot.com Intercom — https://intercom.com Do not auto-inject any <script> into the generated output — only add backend integration if the user explicitly opts in.