How to use the Contact Chat Widget agent skill

What an agent skill is and what this one makes

An agent skill is a folder of instructions and files that an AI agent loads when your request matches the skill's triggers. This one is named contact-widget and is described as a self-contained floating chat widget with a welcome screen, social links, a meeting button, and a message input. It ships as a single HTML file with zero dependencies.

The output is pure front-end. The source says it has no tracking and no required external services, and it works once loaded. The only network request the generated page is meant to make is for Google Fonts CSS.

• Chat bubble: a fixed circular button in the bottom-right that opens and closes the panel.
• Welcome screen: agent avatar, name, online status and a greeting.
• Message input: a text field with emoji and send icons. It is visual only and needs your own backend to deliver messages.
• Social links: circular icons for Telegram, WhatsApp, Instagram and others, shown only for the links you provide.
• Meeting card: an optional Book a meeting entry that links to a URL you supply, such as Calendly or Cal.com.
• Offline form: a name, email and message form that appears when the widget is marked unavailable.
• Responsive layout: full width on small screens.

Install the contact-widget skill

The skill package is a ZIP downloaded from the directory page. It contains two files: example.html and SKILL.md. Install it in one of two ways.

Option one is a folder install. Unzip the package into ~/.claude/skills/ to make it available to you across projects, or into a project's .claude/skills/ folder to limit it to that project.

Option two is an upload. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• App install: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need a special command. The skill's triggers are phrases such as contact widget, chat widget, floating chat and live chat widget. Mention one of these along with the details you want.

The skill can use these inputs, each with a default: primary colour (#4F7CFF), agent name (Assistant), greeting (Hello! How can I help you today?), availability (on), Telegram, WhatsApp and Instagram links (empty, so omitted), a meeting URL (empty), and an offline message. Anything you leave out falls back to these defaults.

• Ask for the colour, name and greeting you want in the same sentence as the trigger.
• Name the social platforms you want shown. Empty links are left out of the output.
• If you say the owner is unavailable, the offline contact form appears instead of the normal message view.

Example request and result

The skill's example prompt is a good template. It asks for a widget for a portfolio site with a primary colour, agent name Alex, a custom greeting, and Telegram and WhatsApp links. The agent then writes one HTML file, with your values written directly into the file, and opens the panel by default so you can see it immediately.

Open the generated file in a browser to check it. The file is named example.html in the package, and your agent writes the output for your request.

• Colour drives the bubble, avatar, send button and accents. The rest of the palette is neutral slate.
• Hover darkens buttons slightly, and pressing the bubble scales it down a little.

Know what the skill needs and what it does not do

The skill lists no requirements. It does not run scripts. It does use the network, but only to load the Google Fonts CSS in the generated page; the skill's instructions forbid adding third-party SDK scripts unless you explicitly ask for backend integration.

The message box does nothing with what visitors type by default. To receive messages you must connect it yourself. The skill describes three tiers: leave it as a social and meeting-link contact surface, send one-off messages through a mailto link or your own /api/contact endpoint, or add a real-time chat provider such as Crisp, Tawk.to, Chatwoot, Intercom or Knocket. Each tier is optional and only added when you ask.

• Requires: nothing listed.
• Runs scripts: no.
• Uses network: yes, for Google Fonts CSS in the page; third-party chat scripts are only added on explicit request.
• The message input is visual only until you wire a backend.
• For sensitive information, do not rely on the form as delivered; add your own secure handling.

Tips for a good result

Keep the first version simple. Get the look and links right, then add a delivery method for messages. The skill's default output already works as a contact surface through its social links and meeting URL.

When you ask for backend integration, say which option you want, since the skill only offers wiring when you opt in. The skill says it will not inject any third-party script into the output on its own.

• Use a colour with enough contrast against white text on the bubble.
• Use real, complete URLs for Telegram, WhatsApp, Instagram and booking links.
• Test the offline form by setting availability to off before you publish.
• Test on a phone, since the layout goes full width on small screens.