Collaborative Whiteboard

Learn how to collaborate using a whiteboard.

Connect with other users of the app and collaborate using a Whiteboard.

Settings

  1. Login to the CometChat Dashboard.
  2. On the Extensions page add the Whiteboard extension.

How does it work?

Initiating the session

Once you have done the above Settings, using the Whiteboard extension is pretty straight-forward. As an initiator, you only have to create a whiteboard session. The extension will handle the following for you:

  1. Provide you with a link for collaboration.
  2. Forward the link as an invitation to the receivers.

You can initiate a whiteboard in either one-on-one chat or a group chat. A collaborative whiteboard session can be started by simply submitting the receiver (uid/guid) and receiverType (user/group).

The above 2 details can be submitted using the callExtension method provided by our SDKs.

CometChat.callExtension("whiteboard", "POST", "v1/create", { 
    "receiver": "UID/GUID",
    "receiverType": "user/group"
}).then(response => {
    // Response with board_url
}).catch(error => {
    // Some error occured
});
import org.json.simple.JSONObject;

JSONObject body=new JSONObject();
body.put("receiverType", "user/group");
body.put("receiver", "uid/guid");

CometChat.callExtension("whiteboard", "POST", "/v1/create", body,
    new CometChat.CallbackListener<JSONObject>() {
    @Override
    public void onSuccess(JSONObject responseObject) {
        // The whiteboard link to join as an initiator.
    }

    @Override
    public void onError(CometChatException e) {
        // Some error occured.
    }
});
CometChat.callExtension(slug: "whiteboard", type: .post, endPoint: "v1/create", body: ["receiverType":"user/group", "receiver":"uid/guid"], onSuccess: { (response) in
        // Success response
      }) { (error) in
        // Some error occured
      }

Receiving the details

Receiving the link as an initiator

You will be receiving the board_url of the whiteboard session in the success callback of the callExtension method as shown in the above code sample.

Receiving the link as a collaborator

The receiver (a user or group) will get a message with the following properties:

  1. category: custom
  2. type: extension_whiteboard

You have to implement a custom message listener to get this message. Please check out the documentation to Receive Messages under Messages section of SDK of your choice. (Link to JS docs here)

The metadata will also contain incrementUnreadCount with value as true. This will be useful for incrementing the unread count every time a whiteboard custom message is received.

Append Username to the Whiteboard URL

On the whiteboard screen, the mouse pointers of the collaborating users can be identified with the help of usernames. This username can be appended to the whiteboard URL before opening it.

You can use CometChat.getLoggedinUser() method to get the details about the logged-in user.
Learn more about retrieving the logged-in user here. (Link to JS docs). The following is for your reference:

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

Whiteboard metadata

The metadata section will have the details about the board_url.

"metadata": {
    "@injected": {
      "extensions": {
        "whiteboard": {
          "board_url": "https://whiteboard-.cometchat.io?whiteboardid=abc"
        }
      }
    }
}

You can make use of the getMetadata() method for extracting the details. Refer the code samples below:

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"];
    }
  }
}
JSONObject metadata = message.getMetadata();
if (metadata != null) {
  JSONObject injectedObject = metadata.getJSONObject("@injected");
  if (injectedObject != null && injectedObject.has("extensions")) {
    JSONObject extensionsObject = injectedObject.getJSONObject("extensions");
    if (extensionsObject != null && extensionsObject.has("whiteboard"))
        {
          JSONObject whiteboardObject = extensionsObject.getJSONObject("whiteboard");
          String board_url = whiteboardObject.getString("board_url");
        }
    }
}
if (metadata != null) {
  if (metadata.has("@injected")) {
   val injectedJSONObject = metadata.getJSONObject("@injected")
   if (injectedJSONObject != null && injectedJSONObject.has("extensions")) {
   val extensionsObject = injectedJSONObject.getJSONObject("extensions")

   if (extensionsObject != null && extensionsObject.has("whiteboard")) {
   val whiteboardObject = extensionsObject.getJSONObject("whiteboard")
   val board_url = whiteboardObject.getString("board_url")
         }     
       }
     }
   }
let textMessage = message as? TextMessage
var metadata : [String : Any]? = textMessage.metaData
if metadata != nil {

    var injectedObject : [String : Any]? = (metadata?["@injected"] as? [String : Any])!
            
    if injectedObject != nil && (injectedObject!["extensions"] != nil){

      var extensionsObject : [String : Any]? = injectedObject?["extensions"] as? [String : Any]

      if extensionsObject != nil && extensionsObject?["whiteboard"] != nil             {
        var whiteboardObject = extensionsObject?["whiteboard"] as! [String :  Any]

        let board_url = whiteboardObject["board_url"] as! String
      }
   }
}

Start collaborating

CometChat Pro Collaborative WhiteboardCometChat Pro Collaborative Whiteboard

CometChat Pro Collaborative Whiteboard

Our whiteboard implementation provides the following features:

  1. Edit
    a. Clear board
    b. Undo
    c. Redo

  2. Tools
    a. Mouse pointer
    b. Select an area
    c. Pen
    d. Line
    e. Rectangle
    f. Circle
    g. Text
    h. Eraser

  3. Tool properties
    a. Thickness
    b. Color

  4. Upload image to whiteboard

  5. Export whiteboard as image


Did this page help you?