> ## 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.

# Collaboration Extensions

> React Native SDK implementation examples for Collaboration extensions including Collaborative Document and Collaborative Whiteboard

This page contains React Native SDK code examples for Collaboration extensions. For feature documentation, setup instructions, and extension settings, see [Collaboration Extensions](/fundamentals/extensions-collaboration).

## How to Use Extensions with SDK

<Steps>
  <Step title="Enable in Dashboard">
    Login to [CometChat Dashboard](https://app.cometchat.com/login), select your app, then go to **Chat & Messaging → Features** and enable the extension.
  </Step>

  <Step title="Implement SDK methods">
    Use the code examples below to initiate collaboration sessions and extract URLs from messages.
  </Step>

  <Step title="Build your UI">
    Create UI components to display the collaboration interface (e.g., embed the whiteboard/document URL in a WebView).
  </Step>
</Steps>

***

## Collaborative Document

Co-edit documents in real-time with other users.

### Initiating the Session

```typescript theme={null}
CometChat.callExtension("document", "POST", "v1/create", { 
  receiver: "UID/GUID",
  receiverType: "user/group"
})
  .then(response => {
    // Response with document url
  })
  .catch(error => {
    // Some error occured
  });
```

### Extracting the URL

```typescript theme={null}
const metadata = message.getMetadata();
if (metadata != null) {
  const injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    const extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("document")) {
      const documentExtension = extensionsObject["document"];
      const document_url = documentExtension["document_url"];
    }
  }
}
```

***

## Collaborative Whiteboard

Draw and brainstorm together on a shared whiteboard.

### Initiating the Session

```typescript theme={null}
CometChat.callExtension("whiteboard", "POST", "v1/create", {
  receiver: "UID/GUID",
  receiverType: "user/group",
})
  .then((response) => {
    // Response with board_url
  })
  .catch((error) => {
    // Some error occured
  });
```

### Append Username to the Whiteboard URL

```typescript theme={null}
CometChat.getLoggedinUser().then(
  (user) => {
    // Replace spaces with underscore
    let username = user.getName().split(" ").join("_");
    // Append the username to the board_url
    board_url = board_url + "&username=" + username;
  },
  (error) => {
    console.log("error getting details:", { error });
  }
);
```

### Extracting the URL

```typescript theme={null}
const metadata = message.getMetadata();
if (metadata != null) {
  const injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    const extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("whiteboard")) {
      const whiteboardObject = extensionsObject["whiteboard"];
      const board_url = whiteboardObject["board_url"];
    }
  }
}
```