contact-widget

Generate a self-contained floating chat widget for web interfaces using HTML and CSS.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#HTML #Frontend #contact form #chat widget #Web design #UI Component

One-click install

npx skills add https://github.com/nexu-io/open-design --skill contact-widget

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: contact-widget
Source: https://github.com/nexu-io/open-design/tree/main/design-templates/contact-widget
Command: npx skills add https://github.com/nexu-io/open-design --skill contact-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the need for a lightweight, dependency-free contact surface on static websites without requiring complex backend infrastructure or third-party tracking scripts.

Core Features & Use Cases

Zero-Dependency UI: Provides a fully functional chat bubble, welcome screen, and message input using only standard HTML and CSS.
Flexible Integration: Supports social links, meeting booking URLs, and offline status messaging out of the box.
Use Case: Quickly add a professional contact widget to a personal portfolio or landing page to capture visitor inquiries and meeting requests without adding heavy vendor SDKs.

Quick Start

Generate a contact widget with the primary color #4F7CFF, agent name 'Alex', and a custom greeting for my portfolio site.

Frequently Asked Questions about contact-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add the contact widget to my website?▼

Copy the generated HTML code into your website's footer or body section. The widget is self-contained and requires no external JavaScript files or build steps to function.

Can I connect the widget to a real backend?▼

Yes, you can wire the message input to your own API endpoint using the fetch API or integrate third-party chat SDKs like Knocket, Crisp, or Chatwoot by adding their script tags.

Does the widget support offline messaging?▼

Yes, setting the is_available parameter to false automatically displays a fallback contact form, allowing visitors to leave messages even when you are offline.

What are the limitations of this widget?▼

The widget is a front-end UI artifact. It does not include built-in database storage, real-time chat history, or server-side message delivery unless you explicitly wire it to a backend service.