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 customer's client app should be checked if it includes any URLs.

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

ticket.channel.sendUserMessage(TEXT, (message, error) => {
    if (!error) {
        const message = message;
        if (SendBirdDesk.Message.UrlRegExp.test(message.message)) {
            const urlInMessage = SendBirdDesk.Message.UrlRegExp.exec(message.message)[0];
            SendBirdDesk.Ticket.getUrlPreview(urlInMessage, (response, error) => {
                if (error) {
                    // Handle error.
                }

                this.ticket.channel.updateUserMessage(
                    message.messageId,
                    message.message,
                    JSON.stringify({
                        type: SendBirdDesk.Message.DataType.URL_PREVIEW,
                        body: {
                            url: urlInMessage,
                            site_name: response.data.siteName,
                            title: response.data.title,
                            description: response.data.description,
                            image: response.data.image
                        }
                    }),
                    message.customType,
                    (response, error) => {
                        if (error) {
                            // Handle error.
                        }

                        this.updateMessage(response);
                });
            });
        }
    }
});

As a result, the original message is updated with a link 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 onMessageUpdated() method of the channel event handler, you can find the data for a link 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"
    }
}

Sample app