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

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

This page contains Flutter 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

```dart theme={null}
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

```dart theme={null}
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

```dart theme={null}
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

```dart theme={null}
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:

```dart theme={null}
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}');
  }
);
```