Reactions

Reactions allow call participants to send emojis in real-time.

Custom events let participants send and receive arbitrary WebSocket messages. For example, if you want to implement a drawing feature in your call, you can use custom events for synchronizing the drawing board between participants.

Reactions

Sending reactions

You can send a reaction using the sendReaction method of a Call instance.

const call: Call;

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

The value of the type attribute can be any string.

It’s also possible to provide additional data for the reaction:

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

If you’re using the participant state for receiving reactions, you can also clear the latest reaction using the resetReaction method:

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

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

This is a local action, it won’t send any WebSocket messages. It’s helpful if you only want to display reactions for a set period of time.