User Experience Extensions

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

Enable in Dashboard

Configure settings (if required)

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

Implement SDK methods

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

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
  });

Link Preview

Extract link preview metadata from messages.

Extract Link Preview 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("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

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

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

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

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

​How to Use Extensions with SDK

​Bitly

​Shorten URL

​Link Preview

​Extract Link Preview Data

​Message Shortcuts

​Fetch All Shortcuts

​Modify Shortcuts

​Pin Message

​Pin a Message

​Unpin a Message

​Fetch Pinned Messages

​Rich Media Preview

​Extract Rich Media Data

​Save Message

​Save a Message

​Unsave a Message

​Fetch Saved Messages

​Thumbnail Generation

​Extract Thumbnail Data

​TinyURL

​Shorten URL

​Voice Transcription

​Extract Transcription Data

How to Use Extensions with SDK

Bitly

Shorten URL

Link Preview

Extract Link Preview Data

Message Shortcuts

Fetch All Shortcuts

Modify Shortcuts

Pin Message

Pin a Message

Unpin a Message

Fetch Pinned Messages

Rich Media Preview

Extract Rich Media Data

Save Message

Save a Message

Unsave a Message

Fetch Saved Messages

Thumbnail Generation

Extract Thumbnail Data

TinyURL

Shorten URL

Voice Transcription

Extract Transcription Data