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

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

This page contains JavaScript 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 an iframe).
  </Step>
</Steps>

***

## Collaborative Document

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

### Initiating the Session

```js 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

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

***

## Collaborative Whiteboard

Draw and brainstorm together on a shared whiteboard.

### Initiating the Session

```js 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
  });
```

### Initiating the Session (TypeScript)

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

### Append Username to the Whiteboard URL

```js theme={null}
CometChat.getLoggedinUser().then(
  (user) => {
    // Replace spaces with underscore
    let username = user.name.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

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