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

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

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

```js theme={null}
CometChat.callExtension("url-shortener-bitly", "POST", "v1/shorten", {
  text: "Your message with URL https://yourdomain.com/very/very/long/url",
})
  .then((response) => {
    // minifiedText in response
  })
  .catch((error) => {
    // Error occured
  });
```

***

## Link Preview

Extract link preview metadata from messages.

### Extract Link Preview Data

```js theme={null}
var metadata = message.getMetadata();
if (metadata != null) {
  var injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    var extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("link-preview")) {
      var linkPreviewObject = extensionsObject["link-preview"];
      var links = linkPreviewObject["links"];
      var description = links[0]["description"];
      var favicon = links[0]["favicon"];
      var image = links[0]["image"];
      var title = links[0]["title"];
      var url = links[0]["url"];
    }
  }
}
```

***

## Message Shortcuts

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

### Fetch All Shortcuts

```js theme={null}
CometChat.callExtension('message-shortcuts', 'GET', 'v1/fetch', null)
.then(shortcuts => {
  // Save these shortcuts locally.
})
.catch(error => {
  // Some error occured
});
```

### Modify Shortcuts

```js theme={null}
const finalList = {
  shortcuts: {
    "!hbd":"Happy birthday! Have fun!"
  }
};

CometChat.callExtension('message-shortcuts', 'POST', 'v1/update', finalList)
.then(response => {
  // Updated successfully.
})
.catch(error => {
  // Some error occured
});
```

***

## Pin Message

Pin important messages in conversations.

### Pin a Message

```js theme={null}
CometChat.callExtension('pin-message', 'POST', 'v1/pin', {
    "msgId": 280
}).then(response => {
    // { success: true }
})
.catch(error => {
    // Error occurred
});
```

### Unpin a Message

```js theme={null}
CometChat.callExtension('pin-message', 'DELETE', 'v1/unpin', {
    "msgId": 111,
    "receiverType": "group",
    "receiver": "cometchat-guid-1"
}).then(response => {
    // { success: true }
})
.catch(error => {
    // Error occurred
});
```

### Fetch Pinned Messages

```js theme={null}
const URL = `v1/fetch?receiverType=${RECEIVER_TYPE}&receiver=${RECEIVER}`;
CometChat.callExtension('pin-message', 'GET', URL, null).then(response => {
    // {pinnedMessages: []}
})
.catch(error => {
    // Error occured
});
```

***

## Rich Media Preview

Extract rich media preview metadata from messages using Iframely.

### Extract Rich Media Data

```js theme={null}
var metadata = message.getMetadata();
if (metadata != null) {
  var injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    var extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("rich-media")) {
      var richMediaObject = extensionsObject["rich-media"];
    }
  }
}
```

***

## Save Message

Save important messages for later access.

### Save a Message

```js theme={null}
CometChat.callExtension('save-message', 'POST', 'v1/save', {
    "msgId": 111
}).then(response => {
    // { success: true }
})
.catch(error => {
    // Error occured
});
```

### Unsave a Message

```js theme={null}
CometChat.callExtension('save-message', 'DELETE', 'v1/unsave', {
    "msgId": 111
}).then(response => {
    // { success: true }
})
.catch(error => {
    // Error occured
});
```

### Fetch Saved Messages

```js theme={null}
CometChat.callExtension('save-message', 'GET', 'v1/fetch', null).then(response => {
    // {savedMessages: []}
})
.catch(error => {
    // Error occured
});
```

***

## Thumbnail Generation

Extract thumbnail URLs from image and video messages.

### Extract Thumbnail Data

```js theme={null}
const metadata = message.getMetadata();
if (metadata != null) {
  const injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    const extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("thumbnail-generation")) {
      const { attachments } = extensionsObject["thumbnail-generation"];
      for (const attachment of attachments) {
        if (!attachment.error) {
          const { url_small, url_medium, url_large } = attachment.data.thumbnails;
          // Use the urls accordingly.
        }
      }
    }
  }
}
```

***

## TinyURL

Shorten long URLs in messages using TinyURL.

### Shorten URL

```js theme={null}
CometChat.callExtension("url-shortener-tinyurl", "POST", "v1/shorten", {
  text: "Your message with URL https://yourdomain.com/very/very/long/url",
})
  .then((response) => {
    // minifiedText in response
  })
  .catch((error) => {
    // Error occured
  });
```

***

## Voice Transcription

Extract transcribed text from audio messages.

### Extract Transcription Data

```js theme={null}
var metadata = message.getMetadata();
if (metadata != null) {
  var injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    var extensionsObject = injectedObject["extensions"];
    if (extensionsObject != null && extensionsObject.hasOwnProperty("voice-transcription")) {
      var voiceTranscriptionObject = extensionsObject["voice-transcription"];
      var transcribed_message = voiceTranscriptionObject["transcribed_message"];
    }
  }
}
```