Widgets / Collab Chat

Collab Chat

Document-anchored realtime chat. Readers highlight any passage and open a thread pinned to that exact selection. Perfect for docs, drafts, and review flows.

Tenant · demo

The Rise of Real-Time Collaboration

Real-time collaboration tools have transformed how teams work together. From shared documents to inline commenting, the ability to discuss content in context reduces miscommunication and speeds up decision-making.

FastComments Collab Chat brings this experience to any web page. Users can highlight text and attach comments directly to it, creating threaded discussions tied to specific passages.

collab-chat.tsx
import { useRef } from 'react';
import { FastCommentsCollabChatWidget } from 'fastcomments-react';

export default function CollabChat() {
  const contentRef = useRef<HTMLDivElement>(null);
  return (
    <>
      <article ref={contentRef}>
        <h2>Highlight any passage to pin a discussion.</h2>
        <p>Selection-anchored realtime chat inside your document.</p>
      </article>
      <FastCommentsCollabChatWidget
        tenantId="demo"
        urlId="gatsby-demo-collab-chat"
        targetRef={contentRef}
      />
    </>
  );
}