Rich Media Preview

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

1. Create an Iframely account

   Sign up with Iframely.

2. Get your API key

   Generate an Iframely API key for configuring the extension.

Extension settings

1. Open your CometChat app

   Login to CometChat and select your app.

2. Enable Rich Media Preview

   Go to Chat & Messaging —> Features, under Extentions and enable Rich Media Preview.

3. Add your API key

   Open the extension settings and enter the Iframely API key.

4. Save settings

   Save your configuration to activate the extension.

---

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 preview metadata is updated after the message is sent, so you should implement the onMessageEdited listener. See Edit message in the SDK docs.

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

JSON

"@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/[e-mail]?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&key=eda089f6090d00a60bba3ab368d2a3e6\"></a></div></div><script async src=\"//cdn.iframe.ly//embed.js\" charset=\"utf-8\"></script>"
    }
  }
}

---

Choose Your Integration Method

Choose the integration method that best suits your needs:

UI Kit Builder

• Enable it in both Dashboard and UI Kit Builder settings, then you can use the Rich Media Preview extension in your custom chat experience.

Widget Builder

• Enable it in both Dashboard and Widget Builder settings, then you can use the Rich Media Preview extension in your custom chat widget.

UI Kits

• Enable it in the Dashboard settings, then you can use the Rich Media Preview extension in your custom chat experience built with our UI Kits.

SDK

• Enable it in the Dashboard settings, then you can use the Rich Media Preview extension in your custom chat experience built with our SDK.

---

Code

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.

JavaScript

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

Java

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

Kotlin

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

Swift

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