> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Collaborative Document Plugin

> Renders collaborative document messages with a banner and 'Open Document' button.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `collaborative-document`                                                            |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `extension_document`                                                                |
  | Message Categories   | `custom`                                                                            |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatCollaborativeBubble`                                                      |
  | Conversation Preview | Collaborative Document                                                              |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Collaborative Document plugin handles messages of type `extension_document` in category `custom`. It renders a card with a document banner image, title, subtitle, and an "Open Document" button that launches the collaborative editor in a new window.

<Info>
  **Live Preview** — interact with the collaborative document bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-document-message)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--collaborative-document-message&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="Collaborative Document Bubble — Default" allow="clipboard-write" />

***

## Bubble Rendering

* **Banner image** — themed (light/dark) document illustration
* **Title** — "Collaborative Document"
* **Subtitle** — "Open document to edit content together"
* **Button** — "Open Document" — opens the document URL in a fullscreen popup window
* Lazy-loaded — the bubble component is not included in the initial bundle

The document URL is extracted from the message's extension metadata at `@injected.extensions.document.document_url`.

***

## Context Menu Options

Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately.

***

## Conversation Preview

Returns: `Collaborative Document` (localized via `conversation_subtitle_collaborative_document` key)

***

## CSS Selectors

| Target       | Selector                                    |
| ------------ | ------------------------------------------- |
| Bubble root  | `.cometchat-collaborative-bubble`           |
| Banner image | `.cometchat-collaborative-bubble__banner`   |
| Title        | `.cometchat-collaborative-bubble__title`    |
| Subtitle     | `.cometchat-collaborative-bubble__subtitle` |
| Open button  | `.cometchat-collaborative-bubble__button`   |