Skip to main content
This page contains Flutter 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 a WebView).

​
Collaborative Document

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

​
Initiating the Session

Map<String, dynamic> body = {
  'receiverType': 'user', // or 'group'
  'receiver': 'uid', // or 'guid'
};

CometChat.callExtension('document', 'POST', '/v1/create', body,
  onSuccess: (Map<String, dynamic> response) {
    // The document link to join as an initiator
    String? documentUrl = response['document_url'];
    debugPrint('Document URL: $documentUrl');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);

​
Extracting the URL from Received Message

Map<String, dynamic>? metadata = message.metadata;
if (metadata != null) {
  var injectedObject = metadata['@injected'];
  if (injectedObject != null && injectedObject.containsKey('extensions')) {
    var extensionsObject = injectedObject['extensions'];
    if (extensionsObject != null && extensionsObject.containsKey('document')) {
      var documentExtension = extensionsObject['document'];
      String? documentUrl = documentExtension['document_url'];
      debugPrint('Document URL: $documentUrl');
    }
  }
}

​
Collaborative Whiteboard

Draw and brainstorm together on a shared whiteboard.

​
Initiating the Session

Map<String, dynamic> body = {
  'receiverType': 'user', // or 'group'
  'receiver': 'uid', // or 'guid'
};

CometChat.callExtension('whiteboard', 'POST', '/v1/create', body,
  onSuccess: (Map<String, dynamic> response) {
    // The whiteboard link to join as an initiator
    String? boardUrl = response['board_url'];
    debugPrint('Whiteboard URL: $boardUrl');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);

​
Extracting the URL from Received Message

Map<String, dynamic>? metadata = message.metadata;
if (metadata != null) {
  var injectedObject = metadata['@injected'];
  if (injectedObject != null && injectedObject.containsKey('extensions')) {
    var extensionsObject = injectedObject['extensions'];
    if (extensionsObject != null && extensionsObject.containsKey('whiteboard')) {
      var whiteboardObject = extensionsObject['whiteboard'];
      String? boardUrl = whiteboardObject['board_url'];
      debugPrint('Whiteboard URL: $boardUrl');
    }
  }
}

​
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: 
CometChat.getLoggedInUser(
  onSuccess: (User user) {
    // Replace spaces with underscore
    String username = user.name.replaceAll(' ', '_');
    // Append the username to the board_url
    String finalUrl = '$boardUrl&username=$username';
    debugPrint('Final Whiteboard URL: $finalUrl');
  },
  onError: (CometChatException e) {
    debugPrint('Error getting user: ${e.message}');
  }
);