菜单
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
| 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."} |
A single self-contained HTML file with a floating chat widget that includes:
is_available=falseOutput is pure front-end. No tracking, no phone-home, no required external services. Works offline once loaded.
Clean, minimal SaaS aesthetic. Looks like a real product widget, not a toy demo:
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.0 8px 32px rgba(0,0,0,0.12) on the widget panel, 0 4px 12px on bubbleThe 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 |
{{ }} placeholders in the output)<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.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:
The widget already works as a contact surface via social links + meeting URL. Leave it as-is.
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./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.).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.
Use this plugin when the user wants a dark, premium 3D-creator / designer portfolio landing page: a full-viewport hero with a gradient-text headline and a mouse-following magnetic 3D portrait, a scroll-driven horizontal image marquee, an About section with corner 3D decorations and character-by-character scroll-reveal text, a white Services list, and sticky-stacking project cards. Invoke for '3D creator portfolio', 'designer landing page', 'creative portfolio with magnetic hero', or when the user references the Jack 3D Creator template.
Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for 'farming landing page', 'agritech marketing site', 'precision agriculture site', or when the user references the Acreage Farming template.
Use this plugin when the user wants a premium dark-to-light aerospace / propulsion marketing site: a scroll-driven gradient hero with parallax wordmark and an engine still, a film-card that grows from a mission thumbnail into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart with category tabs, a horizontal video-story rail, and a starfield footer. Invoke for 'aerospace landing', 'engine / propulsion site', 'EngineTech', 'scroll-cinematic hero', or when the user references the AeroCore template.
Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template.
Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.
Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.