Agent skill · design visual · nexu-io
contact-widget
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
Why this skill is useful
Provides a self-contained HTML widget that includes specific design patterns and user interaction elements not commonly found in generic templates.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Contact Widget What this skill produces A single self-contained HTML file with a floating chat widget that includes: 1. Chat bubble — fixed bottom-right circular button, opens/closes the panel 2. Welcome home screen — agent avatar + name + online status + greeting message 3. Message input — text field with emoji/send icons (UI only; wire to your own backend) 4. Social links — row of circular icons (Telegram, WhatsApp, Instagram, Messenger, Discord, Slack — only the ones the user provides) 5. Meeting card — optional "Book a meeting" entry with calendar icon, links to user-provided URL (Calendly, Cal.com, Lark, etc.) 6. Offline form — fallback contact form (name, email, message) when isavailable=false 7. 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 primarycolor 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/contact-widget