Display Open Graph tags in a message

The Chat SDK supports the URL link preview for both open channels and group channels when a message text contains the URL of a web page. This feature is turned on by default for Sendbird applications. If this isn't available for your Sendbird application, see this page and contact us on the Sendbird Dashboard to enable the feature.

To view the image in full screen, click on the

Note: The above image shows a chat view completed with our UIKit components. Your client app's channel view may look different depending on channel type and UI settings.

The OGMetaData class holds the Open Graph (OG) protocol-related data of the four following properties: title, URL, description, and image of an OG object. Some websites don’t provide the OG metadata fields mentioned above. In that case, even though the Open Graph protocol states them as requirements, all of the four fields can be set to null.

The OGImage class holds image-related data for an OGMetaData object. OGImage can also have six optional structured properties of URL, secure URL, type, width, height, and alt. Except for width and height, other fields such as URL, secure URL, type, and alt can be set to null. If the target website doesn’t provide width and height data, the value of those two fields are set to 0.

If a user sends a message with a web page URL and the linked web page possesses Open Graph (OG) tags, or OG metadata, the Sendbird server parses the message content, extracts the URL in the message, gets the OG metadata from it, and creates an OG metadata object for the message. Then message recipients will get the parsed message with its OG metadata object through the onMessageReceived() method in the channel event handler of the SDK. On the other hand, the message sender will do the same through the onMessageUpdated().

Displaying an OG metadata object is available for two subtypes of BaseMessage: UserMessage and AdminMessage. If the content of a BaseMessage object includes a web page URL containing OG metadata, the onMessageReceived() method returns OGMetaData and OGImage objects.

If the Sendbird server doesn’t have cache memory of the OG metadata of the given URL, the BaseMessage.ogMetaData property can be set to null due to the time it takes to fetch the OG metadata from a remote web page. In the meantime, the message text containing the URL will be delivered first to message recipients’ client app through the onMessageReceived() method. When the server completes fetching, the onMessageUpdated() method will be called and the message with its OG metadata object will be delivered to the recipients’ client app. However, if the Sendbird server has already cached the OG metadata of the URL, BaseMessage.ogMetaData returns the message and its OGMetaData object instantly and the onMessageUpdated() method won’t be called.

const params = {
  message: 'sendbird.com'
};
// ...

channel.sendUserMessage(params)
  .onSucceeded((message) => {
    // ...
  });

const channelHandler = new OpenChannelHandler({
  onMessageReceived: (channel, message) => {
    if (message.ogMetaData) {
      // You can create and customize the URL link preview by using the Open Graph metadata of the message.
      const url = message.ogMetaData.url;
      const width = message.ogMetaData.width;
      // ...
    } else {
      // If message.ogMetaData is null, wait until the onMessageUpdated() method receives a callback from the Sendbird server.
    }
  },
  onMessageUpdated: (channel, message) => {
    if (message.ogMetaData) {
      // You can create and customize the URL link preview by using the Open Graph metadata of the message.
      const url = message.ogMetaData.url;
      const width = message.ogMetaData.width;
      // ...
    }
    // ...
  },
});

sb.openChannel.addOpenChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

const params = {
  message: 'sendbird.com'
};
// ...

channel.sendUserMessage(params)
  .onSucceeded((message) => {
    // ...
  });

const channelHandler = new GroupChannelHandler({
  onMessageReceived: (channel, message) => {
    if (message.ogMetaData) {
      // You can create and customize the URL link preview by using the Open Graph metadata of the message.
      const url = message.ogMetaData.url;
      const width = message.ogMetaData.width;
      // ...
    } else {
      // If message.ogMetaData is null, wait until the onMessageUpdated() method receives a callback from the Sendbird server.
    }
  },
  onMessageUpdated: (channel, message) => {
    if (message.ogMetaData) {
      // You can create and customize the URL link preview by using the Open Graph metadata of the message.
      const url = message.ogMetaData.url;
      const width = message.ogMetaData.width;
      // ...
    }
    // ...
  },
});

sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);