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

# User Experience Extensions

> Flutter SDK implementation examples for User Experience extensions including Bitly, Link Preview, Message Shortcuts, and more

This page contains Flutter SDK code examples for User Experience extensions. For feature documentation, setup instructions, and extension settings, see [User Experience Extensions](/fundamentals/extensions-user-experience).

## 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="Configure settings (if required)">
    Some extensions require API keys or additional configuration. Open the extension settings in the Dashboard.
  </Step>

  <Step title="Implement SDK methods">
    Use the code examples below to call extension APIs and extract extension data from messages.
  </Step>

  <Step title="Build your UI">
    Create UI components to display extension data (e.g., link previews, pinned messages, saved messages).
  </Step>
</Steps>

***

## Bitly

Shorten long URLs in messages using Bitly.

### Shorten URL

```dart theme={null}
Map<String, dynamic> body = {
  'text': 'Your message with URL https://yourdomain.com/very/very/long/url',
};

CometChat.callExtension('url-shortener-bitly', 'POST', '/v1/shorten', body,
  onSuccess: (Map<String, dynamic> response) {
    // minifiedText in response
    debugPrint('Shortened URL: ${response['minifiedText']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

***

## Link Preview

Extract link preview metadata from messages.

### Extract Link Preview Data

```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('link-preview')) {
      var linkPreviewObject = extensionsObject['link-preview'];
      var links = linkPreviewObject['links'] as List;
      if (links.isNotEmpty) {
        var firstLink = links[0];
        String? description = firstLink['description'];
        String? favicon = firstLink['favicon'];
        String? image = firstLink['image'];
        String? title = firstLink['title'];
        String? url = firstLink['url'];
        debugPrint('Link Preview - Title: $title, URL: $url');
      }
    }
  }
}
```

***

## Message Shortcuts

Send predefined messages using shortcuts (e.g., `!hb` expands to "Happy birthday!").

### Fetch All Shortcuts

```dart theme={null}
CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
  onSuccess: (Map<String, dynamic> response) {
    // Save these shortcuts locally
    var shortcuts = response['shortcuts'];
    debugPrint('Shortcuts: $shortcuts');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

### Modify Shortcuts

```dart theme={null}
Map<String, dynamic> body = {
  'shortcuts': {
    '!hbd': 'Happy birthday! Have fun!'
  }
};

CometChat.callExtension('message-shortcuts', 'POST', '/v1/update', body,
  onSuccess: (Map<String, dynamic> response) {
    debugPrint('Shortcuts updated successfully');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

***

## Pin Message

Pin important messages in conversations.

### Pin a Message

```dart theme={null}
Map<String, dynamic> body = {
  'msgId': 280,
};

CometChat.callExtension('pin-message', 'POST', '/v1/pin', body,
  onSuccess: (Map<String, dynamic> response) {
    debugPrint('Message pinned: ${response['success']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

### Unpin a Message

```dart theme={null}
Map<String, dynamic> body = {
  'msgId': 111,
  'receiverType': 'group',
  'receiver': 'cometchat-guid-1',
};

CometChat.callExtension('pin-message', 'DELETE', '/v1/unpin', body,
  onSuccess: (Map<String, dynamic> response) {
    debugPrint('Message unpinned: ${response['success']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

### Fetch Pinned Messages

```dart theme={null}
String receiverType = 'group';
String receiver = 'cometchat-guid-1';
String url = '/v1/fetch?receiverType=$receiverType&receiver=$receiver';

CometChat.callExtension('pin-message', 'GET', url, null,
  onSuccess: (Map<String, dynamic> response) {
    var pinnedMessages = response['pinnedMessages'];
    debugPrint('Pinned messages: $pinnedMessages');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

***

## Rich Media Preview

Extract rich media preview metadata from messages using Iframely.

### Extract Rich Media Data

```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('rich-media')) {
      var richMediaObject = extensionsObject['rich-media'];
      debugPrint('Rich Media: $richMediaObject');
    }
  }
}
```

***

## Save Message

Save important messages for later access.

### Save a Message

```dart theme={null}
Map<String, dynamic> body = {
  'msgId': 111,
};

CometChat.callExtension('save-message', 'POST', '/v1/save', body,
  onSuccess: (Map<String, dynamic> response) {
    debugPrint('Message saved: ${response['success']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

### Unsave a Message

```dart theme={null}
Map<String, dynamic> body = {
  'msgId': 111,
};

CometChat.callExtension('save-message', 'DELETE', '/v1/unsave', body,
  onSuccess: (Map<String, dynamic> response) {
    debugPrint('Message unsaved: ${response['success']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

### Fetch Saved Messages

```dart theme={null}
CometChat.callExtension('save-message', 'GET', '/v1/fetch', null,
  onSuccess: (Map<String, dynamic> response) {
    var savedMessages = response['savedMessages'];
    debugPrint('Saved messages: $savedMessages');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

***

## Thumbnail Generation

Extract thumbnail URLs from image and video messages.

### Extract Thumbnail Data

```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('thumbnail-generation')) {
      var thumbnailObject = extensionsObject['thumbnail-generation'];
      var attachments = thumbnailObject['attachments'] as List;
      for (var attachment in attachments) {
        if (attachment['error'] == null) {
          var thumbnails = attachment['data']['thumbnails'];
          String? urlSmall = thumbnails['url_small'];
          String? urlMedium = thumbnails['url_medium'];
          String? urlLarge = thumbnails['url_large'];
          debugPrint('Thumbnails - Small: $urlSmall, Medium: $urlMedium, Large: $urlLarge');
        }
      }
    }
  }
}
```

***

## TinyURL

Shorten long URLs in messages using TinyURL.

### Shorten URL

```dart theme={null}
Map<String, dynamic> body = {
  'text': 'Your message with URL https://yourdomain.com/very/very/long/url',
};

CometChat.callExtension('url-shortener-tinyurl', 'POST', '/v1/shorten', body,
  onSuccess: (Map<String, dynamic> response) {
    // minifiedText in response
    debugPrint('Shortened URL: ${response['minifiedText']}');
  },
  onError: (CometChatException e) {
    debugPrint('Error: ${e.message}');
  }
);
```

***

## Voice Transcription

Extract transcribed text from audio messages.

### Extract Transcription Data

```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('voice-transcription')) {
      var voiceTranscriptionObject = extensionsObject['voice-transcription'];
      String? transcribedMessage = voiceTranscriptionObject['transcribed_message'];
      debugPrint('Transcribed message: $transcribedMessage');
    }
  }
}
```