Desk SDKs JavaScript v1
Desk SDKs JavaScript
Desk SDKs
JavaScript
Version 1
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.
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.
const message = {
message: TEXT,
};
ticket.channel.sendUserMessage(message)
.then((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.
}
const updatedMessage = {
messageId: message.messageId,
message: message.message,
data: 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
}
}),
customType: message.customType,
}
this.ticket.channel.updateUserMessage(
message.messageId,
updateMessage
).then((message) => {
// update your UI with the updated message.
}).catch((error) => {
// Handle error.
});
});
}
})
.catch((error) => {
// Handle error.
});
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.
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"
}
}