Build a floating contact widget as a single HTML file, with a welcome screen, social links, meeting booking link, and offline form. The message field provides an interface that can optionally connect to a backend.
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
contact-widget creates a floating contact panel in a single HTML file. It sits at the bottom right of a website and can be opened or closed. The panel displays a contact person’s name, greeting, and online status, alongside buttons for supplied social links and a meeting booking URL. When unavailable, it switches to a form with name, email, and message fields. On small screens, it expands to the full width.
Use it to add a contact entry point to a portfolio or service website. Specify a primary color and greeting to try a design that fits the site. Only the social and booking links you provide are displayed.
The default output contains only the interface. Sending messages or enabling two-way chat requires a separate email-launch action, API connection, or chat service integration. External SDKs are not included by default. Apart from Google Fonts CSS, the configuration does not require network communication.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.