# Floating Contact Widget

Builds a self-contained floating chat widget with social links and a message input.

- Repository: https://github.com/nexu-io/open-design (105332 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nexu-io/open-design --skill contact-widget -g -a claude-code -y`
Codex: `npx skills add nexu-io/open-design --skill contact-widget -g -a codex -y`
Cursor: `npx skills add nexu-io/open-design --skill contact-widget -g -a cursor -y`
Gemini CLI: `npx skills add nexu-io/open-design --skill contact-widget -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nexu-io/open-design`

## Description

Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 `is_available=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 `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:

The rest: https://github.com/nexu-io/open-design/blob/HEAD/design-templates/contact-widget/SKILL.md