- Examples
- /
- Implementing emoji reactions for live chat
Implementing emoji reactions for live chat
What are emoji reactions?
Emoji reactions 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.
Test Ably’s emoji reactions for chat in realtime!
Click below to play with emoji reactions in a sample application and to browse through the code that powers it.
Test the demo. Open on multiple browser windows/ devices, or share with a friend. Test reacting to the messages to see how the reactions update in realtime across windows/ devices.
Building 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.
Step 1: Sign up to Ably
Visit our sign up page to start using Ably for free. Simply upgrade when you need to ramp up usage past 6M Monthly messages, 200 Peak concurrent channels, 200 Peak concurrent connections. Once you are signed up, download one of our SDKs to get started.
Step 2: Start using Ably Channels and Message Interactions
Ably 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
Ably Message Interactions
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.
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
Next steps
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
Discover more collaborative features
Discover the other features you could use to deliver a rich collaborative experience, including:
Recommended Articles
Show the member location of users in your app
How to use the member location feature to show where a user is within the app - which page, cell, slide or block they're viewing.
Chat Admin Privileges
Ably provides simple APIs to help you give app users different capabilities, such as moderator privileges to delete inappropriate content in a chat room.
Add live cursors for collaborative multiplayer experiences
It’s easy to add live cursors with Ably. Using our Spaces SDK you can build live cursors and other realtime collaboration features to enhance your product.