skills.rest
MAX5271
MAX5271COMMUNITY
Explore all skills by this author →
GitHub

cometchat-placement

Recommend and implement CometChat UI placement patterns for React and framework-agnostic apps.

Updated May 28, 2026
Search Tags:#integration#chat widget#react router#ui placement#cometchat#modal drawer#conversation layout
One-click install
npx skills add https://github.com/MAX5271/CometChat --skill cometchat-placement-max5271
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cometchat-placement
Source: https://github.com/MAX5271/CometChat/tree/main/.claude/skills/cometchat-placement
Command: npx skills add https://github.com/MAX5271/CometChat --skill cometchat-placement-max5271

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents broken or confusing CometChat integrations by showing exactly where to mount chat UI (route, modal, drawer, embedded panel, or widget) within an existing app.

Core Features & Use Cases

  • Route placement for full messaging pages: Build dedicated chat pages with multi-conversation layouts for inbox-style experiences.
  • Modal and drawer integrations for quick messaging: Enable one-off messaging (modal) or ongoing sidebar chat (drawer) without disrupting the main UX.
  • Embedded and widget options for lightweight adoption: Add chat UI to specific areas of a product or enable a floating interaction pattern for support-style experiences.

Quick Start

Ask the AI to recommend the best CometChat placement for your application based on your user intent (messaging app, marketplace, SaaS/dashboard, community, helpdesk/support, or just exploring) and then follow its step-by-step wiring guidance.

Frequently Asked Questions about cometchat-placement

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

FAQPage Schema
How do I place a CometChat widget in an existing React application?▼

CometChat placement in a React application involves selecting a UI pattern like a route page, modal, drawer, embedded panel, or floating widget, then wiring the CometChatProvider and navigation entry points to match that layout choice.

What is the best way to integrate a chat UI as a React Router page?▼

The best way to integrate a chat UI as a React Router page is using route placement for full messaging pages, which builds dedicated chat pages with multi-conversation layouts for inbox-style experiences.

Can I use a modal or drawer for CometChat integration without disrupting my main UX?▼

Yes, modal and drawer integrations support quick messaging without disrupting the main UX. Modals handle one-off messaging, while drawers enable ongoing sidebar chat by mounting CometChat as a fixed overlay.

When should I use a floating widget versus an embedded panel for chat integration?▼

Use a floating widget for support-style experiences and lightweight adoption, or an embedded panel to add chat UI to specific areas of a product. The choice depends on whether you need floating interaction or contextual placement.

Does CometChat integration work with framework-agnostic setups or only React?▼

CometChat integration works with both React-based and framework-agnostic setups. The placement patterns target router wiring and UI composition rules that apply across different application structures.

Why does my CometChat layout show broken thread-option visibility and fixed overlays?▼

Broken CometChat thread-option visibility and fixed overlays occur when UI composition rules are not followed. Correct placement requires aligning CometChatProvider setup, router wiring, and navigation entry points deterministically.

Related Skills

Explore More Software Engineering Skills→
MAX5271MAX5271

cometchat-react-router-patterns

Guide React Router v6 and v7 integrations for CometChat with SSR-safe patterns.

Community
Advanced
ssssssssassssssssssssssassssss

conversation-ux

Organize multi-conversation AI chat flows with branching and tree-view navigation.

Community
Advanced
orkestra-ccorkestra-cc
1

url-tabs

Enforce URL-based tab state management in React with useSearchParams.

Official
Intermediate
MAX5271MAX5271

cometchat-theming

Override CometChat CSS custom properties for React chat UI theming.

Community
Intermediate