Link preview

When a customer sends a message from a client app that includes a link, Link preview enables to provide a preview text or a thumbnail image of the link. In this way, a sender and a receiver of the message can be aware of what they're going to see before they open the link.

Provide a link preview

To provide a link preview by updating a message, every user message sent from a client app should be checked if it includes any URLs.

Implement the code to extract a URL from a customer's message and pass it to Sendbird server. When the server sends the parsed data, set it as a JSON object and stringify the object. Pass the stringified JSON object as an argument to a parameter in the updateUserMessage() method.

ticket.getChannel().sendUserMessage(TEXT, new BaseChannel.SendUserMessageHandler() {
    @Override
    public void onSent(UserMessage userMessage, SendbirdException e) {
        if (e != null) {
            // Handle error.
        }
        ...

        List<String> urls = extractUrlsFromMessage(userMessage.getMessage());
        if (urls.size() > 0) {
            String strUrlPreview = toJsonString(getOGTagsWithUrl(urls.get(0)));
            ticket.getChannel().updateUserMessage(
                userMessage.getMessageId(),
                TEXT,
                strUrlPreview,
                "SENDBIRD_DESK_RICH_MESSAGE",
                new BaseChannel.UpdateUserMessageHandler() {
                    @Override
                    public void onUpdated(UserMessage userMessage, SendbirdException e) {
                        if (e != null) {
                            // Handle error.
                        }

                        ...
                    }
                }
            );
        }
    }
});

Note: Go to the GitHub page and refer to the updateUserMessageWithUrl() and the UrlPreviewAsyncTask class in the sample code. You'll get an idea on how to implement methods of the above sample code, such as the extractUrlsFromMessage(), getOGTagsWithUrl(), and toJsonString(), which aren't actual code but are intended to help you understand the overall flow to provide link previews.

As a result, the original message is updated with a URL preview through the onMessageUpdated() method of the channel event handler, and a sender and a receiver of the message can see a link preview on their app or a web.

message.data

In the channel event handler's onMessageUpdated() method, you can find the data for a URL preview in the message.data property as below:

{
    "type": "SENDBIRD_DESK_URL_PREVIEW",
    "body": {
        "url": "https://sendbird.com/",
        "site_name": "Sendbird",
        "title": "Sendbird - A Complete Chat Platform, Messaging and Chat SDK and API",
        "description": "Sendbird's chat, voice and video APIs and SDKs connect users through immersive, modern communication solutions that drive better user experiences and engagement.",
        "image": "https://6cro14eml0v2yuvyx3v5j11j-wpengine.netdna-ssl.com/wp-content/uploads/sendbird_thumbnail.png"
    }
}

On this page

Provide a link preview

Sample app