Reactions

Reactions allow call participants to send emojis in real-time. Custom events enable sending arbitrary WebSocket messages between participants (e.g., drawing board synchronization).

Best Practices

• Use built-in components - CallControls includes ReactionsButton for standard use cases
• Include emoji_code - SDK components use this to display the correct emoji
• Clear reactions locally - Use resetReaction for timed reaction displays
• Watch the call - Reactions are only delivered to clients watching the call

Reactions

Sending reactions

Send reactions via the sendReaction method:

const call: Call;

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

The value of the type attribute can be any string.

Add additional data to reactions:

const call: Call;

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

The emoji_code attribute is used by the SDK components to decide which emoji to display on the UI.

The custom property can contain any data.

Receiving reactions

Reactions are only delivered to clients that are watching the call.

The participant state will contain the latest reaction of each participant:

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

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

You can also subscribe to the call.reaction_new WebSocket event to receive reactions. For more information, check out our Events guide.

Clearing reactions

Clear the latest reaction using resetReaction (local action, no WebSocket message):

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

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

Useful for displaying reactions for a limited time period.