Xgenious/ docs

Emoji Reactions

Users can react to any message with emoji reactions. Reactions are displayed in real-time and can be toggled on/off.

Available Emojis

The following emoji reactions are available:

  • šŸ‘ Thumbs Up
  • ā¤ļø Heart
  • šŸ˜‚ Laugh
  • šŸ˜® Surprised
  • šŸ˜¢ Cry
  • šŸ”„ Fire

How to React

Adding a Reaction

  1. Double-click on any message to open the reaction picker
  2. Select an emoji from the picker
  3. The reaction appears below the message

Removing a Reaction

  1. Double-click on a message that already has your reaction
  2. Click on your existing reaction to remove it
  3. The reaction is removed in real-time

Features

  • Toggle behavior ā€” Clicking an existing reaction removes it, clicking a new one adds it
  • Real-time sync ā€” Reactions are broadcast instantly to both participants
  • Grouped display ā€” Multiple reactions of the same emoji are grouped with count
  • User indicators ā€” See who reacted with each emoji
  • Visual feedback ā€” Your own reactions are highlighted differently

Display

Reactions are displayed below the message bubble in a compact badge format:

ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”
ā”‚ Hello, how are you?     ā”‚
ā”‚                         ā”‚
ā”‚ šŸ‘ 2  ā¤ļø 1              ā”‚
ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
  • Each emoji shows the count of users who reacted
  • Your own reactions are visually distinct
  • Hovering over a reaction shows the names of users

Technical Details

  • Database: message_reactions table with unique constraint on (message_id, user_id, emoji)
  • Broadcasting: message-reaction event on private-chat.{chatId} channel
  • Routes:
    • Client: POST /client/live/reaction
    • Freelancer: POST /freelancer/live/reaction

Use Cases

  • Quick acknowledgment ā€” React with šŸ‘ to show you received a message
  • Express emotion ā€” Use ā¤ļø or šŸ˜‚ to express feelings
  • Confirm agreement ā€” Thumbs up to confirm understanding
  • Highlight importance ā€” Fire emoji to mark important messages

Last updated: September 2026

Still stuck?
Our support team is ready to help you get set up.
Get support