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

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

This page contains React Native 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

```typescript 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

```typescript 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("link-preview")) {
      const linkPreviewObject = extensionsObject["link-preview"];
      const links = linkPreviewObject["links"];
      const description = links[0]["description"];
      const favicon = links[0]["favicon"];
      const image = links[0]["image"];
      const title = links[0]["title"];
      const url = links[0]["url"];
    }
  }
}
```

***

## Message Shortcuts

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

### Fetch All Shortcuts

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

### Modify Shortcuts

```typescript 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

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

### Unpin a Message

```typescript 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

```typescript 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

```typescript 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("rich-media")) {
      const richMediaObject = extensionsObject["rich-media"];
    }
  }
}
```

***

## Save Message

Save important messages for later access.

### Save a Message

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

### Unsave a Message

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

### Fetch Saved Messages

```typescript 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

```typescript 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

```typescript 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

```typescript 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("voice-transcription")) {
      const voiceTranscriptionObject = extensionsObject["voice-transcription"];
      const transcribed_message = voiceTranscriptionObject["transcribed_message"];
    }
  }
}
```