React to a message in a group channel

Message reactions help you build a more engaging chat experience that goes beyond text messages. They are a quick and easy way for users to respond to a message. Users can express their feelings about a message by adding reactions instead of typing a response. They can also view and delete their reactions to the message.

Note: Message reactions are supported in Group and Supergroup channels. This feature isn't supported in Open channels and custom message types.

Add or remove a reaction

KotlinKTX

val emojiKey = "smile"
// The BASE_MESSAGE argument below indicates a BaseMessage object to add a reaction to.
groupChannel.addReaction(BASE_MESSAGE, emojiKey) { reactionEvent, e ->
    if (e != null) {
        // Handle error.
    }

    // ...
}

// The BASE_MESSAGE argument below indicates a BaseMessage object to remove a reaction from.
groupChannel.deleteReaction(BASE_MESSAGE, emojiKey) { reactionEvent, e ->
    if (e != null) {
        // Handle error.
    }

    // ...
}

// To add or remove an emoji reaction made to the message on the current user's chat view,
// the applyReactionEvent() method should be called in the channel event handler's onReactionUpdated() method.

Retrieve reactions

You can decide how to display reactions that were added to messages in the current user’s chat view.

KotlinKTX

val params = MessageListParams().apply {
    inclusive = INCLUSIVE
    previousResultSize = PREVIOUS_RESULT_SIZE
    nextResultSize = NEXT_RESULT_SIZE
    reverse = REVERSE
    messagePayloadFilter = MessagePayloadFilter().apply {
        includeReactions = INCLUDE_REACTIONS
    }
    // ...
}

groupChannel.getMessagesByTimestamp(TIMESTAMP, params) { messages, e ->
    if (e != null) {
        // Handle error.
    }

    messages.forEach { message ->
        // ...
        message.reactions.forEach { reaction ->
            val userIds = reaction.userIds

            // Check if this emoji has been used when the current user reacted to the message.
            if (userIds.contains(SendbirdChat.currentUser?.userId)) {
                val key = reaction.key
                val updatedAt = reaction.updatedAt

                // Show the emoji however you want on the current user's chat view.
            }
        }
    }
}

Note: By using the PreviousMessageListQuery instance's load() method, messages along with their reactions can also be retrieved. To learn more, see the Retrieve a list of messages page.

Retrieve all reacted users

By default, each Reaction object's userIds property returns up to ten sampled user IDs. This limit applies to both group and supergroup channels. To change the default limit, contact sales.

To retrieve the full list of users who reacted to a message, call the List reactions Platform API with list_users set to true.

Retrieve the reaction count

To get the total number of users who reacted with a specific emoji, use the count property of the Reaction object.

Kotlin

// Reactions on the message.
val reactions: List<Reaction> = message.reactions

// Count of users who reacted with the first emoji in the list, not limited to the sampled user IDs.
val count = reactions[0].count

Receive reaction events in real time

When one of the channel members reacts to a message, the onReactionUpdated() method in the channel event handler is invoked on all channel members’ devices including the one that belongs to the current user. The applyReactionEvent() method reflects the reaction change to the message in real time.

Kotlin

SendbirdChat.addChannelHandler(
    UNIQUE_HANDLER_ID,
    // ...
    object : GroupChannelHandler() {
        override fun onReactionUpdated(channel: BaseChannel, reactionEvent: ReactionEvent) {
            // ...

            // If there is a message with the reactionEvent.getMessageId(),
            // you can apply the reaction change to the message by calling the applyReactionEvent() method.
            message.applyReactionEvent(reactionEvent)

            // Add or remove an emoji below the message on the current user's chat view.
        }
    }
)

On this page

Add or remove a reaction Retrieve reactions Retrieve all reacted users Retrieve the reaction count Receive reaction events in real time

Sample app