Reactions

Learn how to react to individual message with specific emoji quickly

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.

Settings

  1. Login to the CometChat Dashboard.
  2. On the Extensions page add the Reactions extension.

How do reactions work?

Reactions work as a toggle i.e. if the user has not reacted to a message using a particular emoji, it should add a reaction using that emoji.
If the user has reacted to a message using particular emoji, then it should remove the reaction.
A user can react to a message using multiple emojis.

Sending Reactions

If you want a user to add a reaction to a message, you can have an option for each message that opens up an emojis drawer. The user can then select any emoji to react to that message.

Once an emoji is clicked, you can use the callExtension method provided by our SDKs:

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

JSONObject body=new JSONObject();
body.put("msgId", ID_OF_THE_MESSAGE);
body.put("emoji", ":smile:");

CometChat.callExtension("reactions", "POST", "/v1/react", body,
    new CometChat.CallbackListener<JSONObject>() {
    @Override
    public void onSuccess(JSONObject responseObject) {
        // Reaction added successfully.
    }

    @Override
    public void onError(CometChatException e) {
        // Some error occured.
    }
});
CometChat.callExtension(slug: "reactions", type: .post, endPoint: "v1/react", body: ["msgId":MESSAGE_ID, "emoji":":smile:"], onSuccess: { (response) in
         // Reaction added successfully
      }) { (error) in
        // 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 the Edit a Message page under the Messaging section of each SDK for more details.

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

"@injected": {
  "extensions": {
    "reactions": {
      ":smile:": {
        "superhero2": {
          "name": "Captain America",
          "avatar": "https://linkto/avatar.png"
        },
        "superhero1": {
          "name": "Ironman",
          "avatar": "https://linkto/avatar.png"
        },
      },
      ":+1:": {
        "superhero3": {
          "name": "Captain America",
        }
      }
    }
  }
}

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"];
    }
  }
}
JSONObject metadata = message.getMetadata();
if (metadata != null) {
  JSONObject injectedObject = metadata.getJSONObject("@injected");
  if (injectedObject != null && injectedObject.has("extensions")) {
    JSONObject extensionsObject = injectedObject.getJSONObject("extensions");
    if (extensionsObject != null && extensionsObject.has("reactions")) {
          JSONObject reactionsObject = extensionsObject.getJSONObject("reactions");
        }
    }
}
if (metadata != null) {
  if (metadata.has("@injected")) {
    val injectedJSONObject = metadata.getJSONObject("@injected")
      if (injectedJSONObject != null && injectedJSONObject.has("extensions")) {
      val extensionsObject = injectedJSONObject.getJSONObject("extensions")
          if (extensionsObject != null && extensionsObject.has("reactions")) {
          val reactionsObject = extensionsObject.getJSONObject("reactions")
        }
    }
  }
}
let textMessage = message as? TextMessage
var metadata : [String : Any]? = textMessage.metaData
if metadata != nil {
    var injectedObject : [String : Any]? = (metadata?["@injected"] as? [String : Any])!
    if injectedObject != nil && (injectedObject!["extensions"] != nil) {
      var extensionsObject : [String : Any]? = injectedObject?["extensions"] as? [String : Any]

      if extensionsObject != nil && extensionsObject?["reactions"] != nil {
        var reactionsObject = extensionsObject?["reactions"] as! [String :  Any]
      }
   }
}

Did this page help you?