The Link Preview extension will help you show a preview of the web page for every link in your message. While this extension gives you all the details required for generating a preview, our Rich Media Preview gives you a decorated iframe with the styling.

​
Extension settings

  1. Login to CometChat and select your app.
  2. Go to the Extensions section and enable the Link Preview extension.

​
How does it work?

We provide you a few details about the URL that is in your message. The details are as follows:
  1. Description
  2. Favicon
  3. Image
  4. Title
  5. URL.
Say, for example, a user shares a Facebook link in their message, then our extension will query the link for the details that you need to build a preview. These details are provided as part of metadata as shown in the example below: 
"@injected": {
  "extensions": {
    "link-preview": {
      "links": [
        {
          "description": "Create an account or log into Facebook. Connect with friends, family and other people you know. Share photos and videos, send messages and get updates.",
          "favicon": "https://static.xx.fbcdn.net/rsrc.php/yz/r/KFyVIAWzntM.ico",
          "image": "https://www.facebook.com/images/fb/icon/325x325.png",
          "title": "Facebook - Log In or Sign Up",
          "url": "https://www.facebook.com"
        }
      ]
    }
  }
}
If the link-preview key is missing, it means that the extension is either not enabled or has timed out. Also, it may happen that certain details are missing or the details are not available altogether. Consider switching to Rich Media Preview for better experience.

​
Implementation

Using the Link Preview extension, you can build a preview box similar to the one you’ve seen in Slack.
You can fetch the details for the Link Preview using getMetadata() method. 
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"];
    }
  }
}
Links that take more than a second to resolve will be automatically skipped to keep in-flight transit time to a minimum.