메뉴
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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.
A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "给这份 deck 做演讲体检" or "PPT 渲染质检". If all you want is one beautiful template page with no outline and no checkup, a rendering skill alone is enough.
A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.
Open Design's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
Open Design's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.
Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.