# **Summary** Participants will be able to send emoji reactions during a video call. Reactions give spontaneous feedback without interrupting the conversation. All users can capture this feedback directly to quickly estimate moods or the level of agreement. A new Reactions button in the toolbar triggers them. The toolbar order will also change: Microphone and Camera come first. # **Motivation** Today we do not support emoji reactions during live calls. Participants who want to express agreement, appreciation, or emotional feedback must either unmute and speak, type in chat, or stay silent. This creates friction in several common scenarios: * Large meetings and webinars where unmuting is disruptive * Presentations where the speaker cannot be interrupted * Town halls and all-hands where quick sentiment feedback is valuable * Casual moments (celebrations, jokes, acknowledgments) that deserve lightweight acknowledgment Competitors support live emoji reactions, and users increasingly expect this as a baseline feature. We changing the order of the Microphone and Camera buttons, as they are the most frequently used controls and benefit most from a fixed, prominent position: easy to spot and hit without hesitation. Placing them first is also consistent with Zoom, Google Meet, and Microsoft Teams, making this the de facto industry standard. # **Scope** ### In Scope * Reaction picker UI in the in-call toolbar * Initial set of 8 reactions * Any participant can send a reaction during a live call * Reactions appear on the sender's video tile * Reactions appear as a floating overlay, visible to all participants * Moderator can enable and disable reactions for all participants * Disabled state reflected in toolbar button and moderator menu * Snackbar notifications for all participants and moderator on state change * Re-order the buttons in the toolbar: 1. Microphone Mute / Unmute 2. Camera on / off 3. Screen Sharing 4. Hand-raise 5. Reactions 6. More options (3-dots menu) 7. Leave call ### Out of Scope * Persistent reactions stored as part of meeting recordings or transcripts * Custom emoji uploads or organization-specific emoji sets * Keyboard accessibility and aria-live announcements for screen readers (to be decided, see comments) # **UI/UX Specifications** Note: the following wireframes are functional specifications only. They define states, content, and behavior, not visual design. ### **Host view (example reactions enabled -\> action is disabling)** {width="900" height="484"} ### **Participant view (example status disabled)** **Icon stats** [emoji_button_variants_v2.html](/uploads/9550f573ab3eea1fd63efc7c973d5186/emoji_button_variants_v2.html) ### **Reaction Display on Tile** **Position** The reaction emoji appears in the bottom-left corner of the sender's video tile for 9 seconds. **Size** The reaction emoji scales with tile size: 48px on large tiles (speaker view), 32px on medium tiles, and a minimum of 24px on small tiles. ### **Floating Overlay** **Position** A narrow column on the left side of the video area, to the right of the function bar. **Animation** Reactions float upward, covering approximately the lower 30% of the video area height. They begin fading out after \~2 seconds and are fully invisible after \~3 seconds. **Stacking** All reactions from all participants are displayed simultaneously and animate independently. There is no maximum cap. **Sender label** Each floating reaction displays the sender's display name below the emoji. For the sender's own reaction, the label reads "You" or "Ich". **Moderator control** Reactions currently animating in the overlay are allowed to complete their animation when reactions are disabled. ### **Reaction Picker** [emoji_picker_ab.html](/uploads/573ea6be9f338c2287e61ad4a1e704a7/emoji_picker_ab.html) **(Variant A on the left!)** **Trigger** Clicking the reaction button in the toolbar opens the picker. Clicking it again, clicking outside the picker, or pressing Escape closes it. The picker closes automatically after a reaction is selected. **Position** The picker appears directly above the toolbar, vertically aligned with the reaction button. A downward-pointing triangle (caret) connects the picker visually to the reaction button. The picker may temporarily overlap the sender's own video tile. This is intentional and acceptable as the picker is only visible during active interaction. #### **Content and Order** * The picker displays all reactions in a single horizontal row **in the following fixed order**: :heart: :thumbsup: :tada: :clap: :joy: :open_mouth: :smiling_face_with_tear: :thumbsdown: * The set is not user-configurable **Dimensions and style** The picker height matches the toolbar button height. Each emoji button has equal width, filling the full picker width. The picker background uses the same dark color as the toolbar area. No borders or frames around individual emoji buttons. **Interaction** Hovering an emoji scales it slightly (1.15×). Selecting an emoji closes the picker immediately and sends the reaction. The reaction button shows an active/pressed state while the picker is open (`aria-expanded="true"`). **Overlay behavior** The picker is non-modal. It does not block interaction with other UI elements. It floats above the video tile area without obscuring it. **Known limitation** On very small tiles (typically in meetings with many participants), the reaction emoji may overlap the participant's face. This is an accepted trade-off to ensure reactions are always visible regardless of tile size. To be revisited if user feedback indicates this is disruptive. # **Acceptance Criteria** * The picker opens directly above the toolbar with a caret pointing to the reaction button; it closes on outside click, Escape (focus returns to reaction button), or after a reaction is selected. * The picker displays all 8 reactions in a single row in the correct order * A selected reaction appears on the sender's video tile and as a floating overlay element with sender name; own reactions are labeled "You" / "Ich". * A new reaction replaces any currently active tile reaction from the same participant immediately. * Multiple simultaneous floating reactions stack and animate independently. * When reactions are disabled, active tile reactions are dismissed immediately, overlay animations may complete, the toolbar button switches to disabled state, and all participants receive a snackbar notification. * When reactions are enabled, the toolbar button switches to active state and all participants receive a snackbar notification. * The moderator menu entry toggles correctly between "Disable Emoji Reactions" and "Enable Emoji Reactions" depending on current state. * The moderator receives a snackbar confirmation in English and German on every state change. * When reactions are disabled, clicking the reaction button has no effect. # **Definition of Done** * [ ] All acceptance criteria pass * [ ] Behavior verified for both moderator and participant roles * [ ] Tested across Web, iOS, and Android * [ ] Picker, tile reaction, and overlay verified across all tile sizes and layouts including speaker view * [ ] All four snackbar variants display correctly * [ ] No regressions on existing toolbar functionality * [ ] Code reviewed and merged