Reactions

Send real-time emoji reactions during calls.

Best Practices

• Use emoji_code for consistent emoji display across different platforms.
• Use resetReaction to clear reactions after a timeout for better UX.
• Store temporary data in custom field for application-specific needs.
• Consider using the built-in ReactionsButton and Reaction components for quick integration.

Reactions

Sending reactions

const call: Call;

await call.sendReaction({ type: "raised-hand" });

The type can be any string. Add optional data:

const call: Call;

await call.sendReaction({
  type: "raised-hand",
  emoji_code: ":raise-hand:",
  custom: { clearAfterTimeout: true },
});

The emoji_code determines the displayed emoji. The custom property accepts any data.

Receiving reactions

Reactions require watching the call. Access via participant state:

const { useParticipants } = useCallStateHooks();
const participants = useParticipants();

const reactions = participants.map((p) => p.reaction);

Or subscribe to call.reaction_new events. See Events guide.

Clearing reactions

Clear reactions locally with resetReaction (doesn't send WebSocket messages):

const call: Call;
const { useParticipants } = useCallStateHooks();
const participants = useParticipants();

call.resetReaction(participants[0].sessionId);

Useful for displaying reactions temporarily.