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.

How to Use Extensions with SDK

1. Enable in Dashboard

   Login to CometChat Dashboard, select your app, then go to Chat & Messaging → Features and enable the extension.

2. Implement SDK methods

   Use the code examples below to initiate collaboration sessions and extract URLs from messages.

3. Build your UI

   Create UI components to display the collaboration interface (e.g., embed the whiteboard/document URL in an iframe).

---

Collaborative Document

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

Initiating the Session

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

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

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)

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

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

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"];
    }
  }
}