Skip to content
Get packs

Contact Chat Widget

Builds a single-file floating chat widget with social links and a meeting button for a website.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can produce one self-contained HTML file containing a floating chat bubble for a website. Visitors click it to see a welcome panel with an agent name, a greeting, optional Telegram, WhatsApp or Instagram links, an optional booking link, and a message box. The skill sets a clean, minimal look driven by one chosen brand colour, and an offline contact form appears when the owner marks themselves unavailable. The message box is visual only and needs your own backend to actually deliver messages.

Great for

  • Freelancers or small businesses who want a contact widget on a portfolio or landing page without a paid chat service
  • Designers prototyping how a support widget would look inside a site
  • Developers who want a plain HTML starting point they can later connect to a chat provider

Skip it if

  • Teams that need real live chat with visitors and message history, since the skill ships no chat backend and the message input does nothing by default
  • Sites handling sensitive data, since the message form is not wired to any secure delivery and the owner must add their own handling

Try asking

  • “Create a contact widget for my portfolio site with primary colour #4F7CFF, agent name Alex, and Telegram and WhatsApp links”
  • “Make a floating chat widget with a Calendly booking button and an offline contact form for when I am unavailable”
  • “Generate a chat bubble for my landing page in a brand colour of my choice, single HTML file”
Step-by-step guide: how to use Contact Chat WidgetInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    contact-widget.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip contact-widget.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip contact-widget.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide your own social and booking URLs; empty fields are left out of the output, so check the result before publishing.
  • Treat the message input as a placeholder until you connect it to a backend, such as a mailto link or your own endpoint, and review the resulting code yourself.
  • The generated page loads the Inter font from Google Fonts, so expect one external request for that font.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.