Skip to main content
This page contains JavaScript SDK code examples for User Experience extensions. For feature documentation, setup instructions, and extension settings, see User Experience 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

Configure settings (if required)

Some extensions require API keys or additional configuration. Open the extension settings in the Dashboard.
3

Implement SDK methods

Use the code examples below to call extension APIs and extract extension data from messages.
4

Build your UI

Create UI components to display extension data (e.g., link previews, pinned messages, saved messages).

​
Bitly

Shorten long URLs in messages using Bitly.

​
Shorten URL

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
  });
Extract link preview metadata from messages. 
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

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

​
Modify Shortcuts

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

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

​
Unpin a Message

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

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

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

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

​
Unsave a Message

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

​
Fetch Saved Messages

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

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

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

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"];
    }
  }
}