Emoji Reactions

Copy link to clipboardAdd emoji reactions to your chat

Emojis are a great way to enhance conversations and create a richer user experience by adding a visual element to direct 1-to-1, group, or large-scale chat. 

Click below to play with emoji reactions in a sample application and to browse through the code that powers it. You can test the demo in realtime on multiple browser windows, multiple devices, or with a friend. 

Copy link to clipboardUsing Message Interactions to add emojis

Chat applications built on Ably can support emojis using our Message Interactions feature. When you add Message Interactions to your application, your end-users can add emoji reactions (or any custom reaction) to messages they receive. All users in the chat room can then access the reactions, which can be displayed on the message.

Copy link to clipboardBuilding your chat application with emoji reactions 

Ably has simple yet powerful APIs to help you build and implement emoji reactions in your realtime chat application.

Copy link to clipboardAbly Channels

A channel is the unit of distribution of messages. Messages can be used for any purpose and a channel can represent a chat room, direct messaging, a collaborative event, or many others. Users connect to specific channels on their devices to join the shared experience.

• Channels.Get - to get an existing channel or to create a new channel

• Channel.Presence - to get the presence object

Copy link to clipboardAbly Message Interactions

Message Interactions allow you to interact with messages previously sent to a channel. Once message interactions are enabled on a channel, all messages sent on that channel will contain a unique ID that can be subsequently referenced. Each message interaction includes the ID of the message being interacted with, along with a customizable message payload.

Here we are using message interactions to send emoji reactions. Message interactions can also be used to represent content updates, deletions, read receipts, message threads, and more.

Message interactions are available in the Ably JavaScript SDK.

• Channel.Publish - to send a message interaction for a previously sent message

• Channel.Subscribe - to receive message interactions in your client application

Copy link to clipboardGetting started: Emoji reactions checklist

You’ll need to do the following to get started with adding emoji reactions to your Ably chat application.

• Implement a UI that allows a user to select an emoji reaction on message ‘bubbles’ 

• Implement a UI that subscribes to emoji reactions on the Ably channel and displays them on message bubbles

• Enable message interactions on the Ably channel

Copy link to clipboardWhat's next?

• Sign up for a free Ably account

• Download one of our SDKs

• Explore all other examples