Rich Media Preview

Learn how to generate rich media previews for all popular sites.

The Rich Media Preview Extension allows the developer to generate rich preview panels for all the popular sites. This extension fetches the first URL from the message for the generation of a preview.

Before you begin

This Extension uses a third-party API service - iFramely - to generate the rich embed for the first URL in your message.
Create an account with iFramely and fetch their API Key for configuring this extension.

Settings

  1. Login to the CometChat Dashboard and select your app.
  2. On the Extensions page add the Rich Media Preview extension.
  3. Go to the Installed tab and open the Settings for this extension.
  4. Enter the iFramely API Key and click on save.

How does it work?

If the text message contains a URL, the extension will create a Preview using your iFramely credentials. These details can then be used to show a nice preview card for that URL.

The information about the Preview will be updated later for the message and hence you need to implement the onMessageEdited listener. Please check the Edit a Message page under the Messaging section of each SDK for more details.

Here is a sample response (for https://stackoverflow.com):

"@injected": {
  "extensions": {
    "rich-media": {
      "url": "https://stackoverflow.com",
        "meta": {
        "description": "Stack Overflow | The World’s Largest Online Community for Developers",
          "title": "Stack Overflow - Where Developers Learn, Share, & Build Careers",
            "canonical": "https://stackoverflow.com/",
              "site": "Stack Overflow"
      },
      "links": {
        "thumbnail": [
          {
            "href": "https://cdn.sstatic.net/Sites/stackoverflow/Img/[email protected]?v=73d79a89bded",
            "type": "image/png",
            "rel": [
              "thumbnail",
              "og",
              "ssl"
            ],
            "content_length": 6562,
            "media": {
              "width": 316,
              "height": 316
            }
          },
          {
            "href": "https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a",
            "rel": [
              "thumbnail",
              "ssl",
              "apple-touch-icon",
              "icon"
            ],
            "type": "image/png"
          }
        ],
          "icon": [
            {
              "href": "https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a",
              "rel": [
                "thumbnail",
                "ssl",
                "apple-touch-icon",
                "icon"
              ],
              "type": "image/png"
            },
            {
              "href": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196",
              "rel": [
                "shortcut",
                "icon",
                "ssl"
              ],
              "type": "image/icon"
            }
          ]
      },
      "rel": [
        "summary",
        "ssl",
        "html5",
        "inline"
      ],
        "html": "<div class=\"iframely-embed\"><div class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\"><a href=\"https://stackoverflow.com/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fstackoverflow.com&amp;key=eda089f6090d00a60bba3ab368d2a3e6\"></a></div></div><script async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\"></script>"
    }
  }
}

If the data is missing, it means that the extension has timed out.

Implementation

At the recipients' end, from the message object, you can fetch the metadata by calling the getMetadata() method. Using this metadata, you can fetch the Rich Media Embed.

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"];
    }
  }
}
JSONObject metadata = message.getMetadata();
if (metadata != null) {
  JSONObject injectedObject = metadata.getJSONObject("@injected");
  if (injectedObject != null && injectedObject.has("extensions")) {
    JSONObject extensionsObject = injectedObject.getJSONObject("extensions");
    if (extensionsObject != null && extensionsObject.has("rich-media")) {
          JSONObject richMediaObject = extensionsObject.getJSONObject("rich-media");
        }
    }
}
if (metadata != null) {
  if (metadata.has("@injected")) {
   val injectedJSONObject = metadata.getJSONObject("@injected")
   if (injectedJSONObject != null && injectedJSONObject.has("extensions")) {
   val extensionsObject = injectedJSONObject.getJSONObject("extensions")

   if (extensionsObject != null && extensionsObject.has("rich-media")) {
     val richMediaObject = extensionsObject.getJSONObject("rich-media")
   }
  }
 }
}
let textMessage = message as? TextMessage
var metadata : [String : Any]? = textMessage.metaData
if metadata != nil {

    var injectedObject : [String : Any]? = (metadata?["@injected"] as? [String : Any])!
            
    if injectedObject != nil && (injectedObject!["extensions"] != nil){

      var extensionsObject : [String : Any]? = injectedObject?["extensions"] as? [String : Any]

      if extensionsObject != nil && extensionsObject?["rich-media"] != nil {
        var richMediaObject = extensionsObject?["rich-media"] as! [String :  Any]
      }
   }
}

Did this page help you?