Skip to main content

Reactions

Reactions are the ability to react to an individual message with a specific emotion, quickly showing acknowledgment or expressing how you feel in a lightweight way.

Image

Extension settings

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

How do reactions work?

A user can react to a message using multiple emojis.

To allow a user to react to a message, show a popup with all the available emojis. Once the user clicks on a particular emoji, add that emoji as a reaction to the target message.

If a user has reacted to a message using a certain emoji and clicks on the same emoji, remove it from the target message.

Sending Reactions

To add a reaction using selected emoji, use the callExtension method provided by our SDKs as follows:

CometChat.callExtension('reactions', 'POST', 'v1/react', {
msgId: MESSAGE_ID,
emoji: "😊"
}).then(response => {
// Reaction added successfully
}).catch(error => {
// Some error occured
});

Receiving Reactions

The messages will be updated later with Reactions as and when users react to them. Hence, you need to implement the onMessageEdited listener. Please check our Edit message documentation under the SDK of your choice.

The updated details will be available in the metadata of the message. Here is a sample response:

"@injected": {
"extensions": {
"reactions": {
"😊": {
"cometchat-uid-2": {
"name": "George Alan",
"avatar": "https://linkto/avatar.png"
},
"cometchat-uid-1": {
"name": "cometchat-uid-1",
"avatar": "https://linkto/avatar.png"
},
},
"👍": {
"cometchat-uid-3": {
"name": "George Alan",
}
}
}
}
}

Implementation

At the recipients' end, from the message object, you can fetch the metadata by calling the getMetadata() method. Using this metadata, you can fetch the reaction details for that message.

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("reactions")
) {
var reactionsObject = extensionsObject["reactions"];
}
}
}