webdevpuneet.com

Related Snippets

144 in Dashboards category
55–60 of 60

Loyalty Program Tier Progress

Live Match Scoreboard

Video Call Hand-Raise Queue

Petition Signature Counter

Fundraising Campaign Leaderboard

Auction Countdown with Anti-Sniping

Video Call Hand-Raise Queue — Free Moderator Queue Panel HTML CSS JS

Video Call Hand-Raise Queue · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsCSS AnimationDashboard UIMedia Player

Copy & paste

Source Code

<div class="hrq-card">
  <div class="hrq-header">
    <h3><span class="hrq-hand">✋</span> Hand-raise queue</h3>
    <span class="hrq-count" id="hrqCount">0 waiting</span>
  </div>

  <ul class="hrq-list" id="hrqList"></ul>
  <p class="hrq-empty" id="hrqEmpty">No one has their hand raised.</p>

  <button type="button" class="hrq-simulate" id="hrqSimulate">+ Simulate a hand raise</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Raise-order queue
Array push order is the display order — first raised, first shown.
Efficient live timestamps
A separate interval updates just the time labels, not the full list.
Per-row moderator actions
"Let them speak" and "Lower hand" both remove the row, with distinct real-world intent.
Animated entry
New hand-raises animate in with a short rise-and-fade.
Next-up highlight
The first row's order badge is visually distinguished from the rest.
Initials avatars
Colored circles generated from names, no image assets required.
Empty state
A clear message replaces the list when no one is waiting.
Live waiting count
A badge in the header always reflects the current queue length.

About this UI Snippet

Video Call Hand-Raise Queue — An Ordered Moderator Panel

Screenshot of the Video Call Hand-Raise Queue snippet rendered live

Once a video call passes a handful of participants, "unmute yourself when you want to talk" breaks down — people talk over each other, or the loudest voice wins by default. A hand-raise queue fixes that by giving the moderator an ordered, first-raised-first-served list with clear per-person actions. This snippet builds that panel in plain HTML, CSS, and vanilla JavaScript.

Ordered by raise time, not name or role

The queue is a plain array of { id, name, raisedAt } objects, and its array order *is* the display order — the person who raised their hand first sits at position one and gets a highlighted gold badge, distinguishing them as next up. There's no separate sort step because entries are pushed onto the array in the order hands go up, which is exactly the ordering a moderator needs.

Live "time since raised" without re-rendering everything

Each row's timestamp is stored as raw raisedAt data on the element (data-raised) and a lightweight setInterval updates just the text content of every .hrq-time element once a second — deliberately *not* calling the full render() function, which would rebuild every row's HTML including the buttons, just to update a clock. This separation keeps the always-running ticker cheap regardless of queue size.

Two actions, one outcome, different intent

Both "Let them speak" and "Lower hand" remove the person from the queue — the difference is what a real integration does *before* removing them: "Let them speak" would unmute and spotlight the participant, while "Lower hand" simply dismisses the request. Keeping both wired to the same filter()-based removal in the demo keeps the queue logic simple while leaving the natural extension point clearly commented.

New entries animate in

Each <li> carries a short hrqIn keyframe animation (a slight rise-and-fade) so a newly raised hand doesn't just pop into the list — useful feedback for a moderator glancing at the panel between other tasks, signaling "something changed here" without a loud notification.

Overflow-safe names, initials avatars

As with other roster-style widgets in this library, names truncate cleanly with an ellipsis and each row gets a colored initials avatar — no image dependency, so it works immediately with any real participant list.

Customizing it

Wire "Let them speak" to your video SDK's unmute/spotlight call, "Lower hand" to a dismissal-only event, and replace the simulate button with your platform's real hand-raise event. Pair it with video call grid for the main call layout.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA queue of three raised hands renders, ordered by raise time.
  2. 2
    Click "+ Simulate a hand raise"A new participant is added to the end of the queue with a rise-in animation.
  3. 3
    Watch the timestampsEach row's "time ago" label updates every second without re-rendering the list.
  4. 4
    Click "Let them speak" or "Lower hand"The person is removed from the queue and the remaining order updates.
  5. 5
    Empty the queueAn empty-state message appears once no one is waiting.
  6. 6
    Connect real eventsReplace the simulate button and demo actions with your video SDK's hand-raise API.

Real-world uses

Common Use Cases

Video conferencing moderation
Give the host an ordered list of raised hands with per-row let them speak and lower hand actions, placed beside a video call grid.
Webinar and town hall Q&A
Take audience questions in the order they were raised, so the loudest voice does not win and large sessions stay fair and orderly.
Virtual classroom turn-taking
Let a teacher call on students in sequence, with a rise-and-fade entrance showing exactly who just raised their hand in a busy class.
Live-streamed panel and AMA queues
Combine with an activity feed to log who spoke when, and keep live timestamps accurate through a separate lightweight interval.
Ordered-queue pattern reference
Study how array push order doubles as display order, so a first-raised, first-shown queue needs no sorting logic or extra state to maintain.

Got questions?

Frequently Asked Questions

The queue array\'s own order is the display order — a new hand raise is pushed onto the end of the array, so the person who raised first naturally sits at index 0. The first row also gets a distinct gold order badge to make "who\'s next" visually unambiguous at a glance, without any separate sorting logic.

A dedicated setInterval running once a second selects every .hrq-time element directly and updates only its text content from the raw raisedAt value stored in a data attribute, deliberately avoiding a call to the full render() function that would rebuild every row\'s markup (including buttons and avatars) just to refresh a clock. This keeps the always-running ticker cheap no matter how long the queue gets.

In this demo both simply remove the person from the queue via the same filter() call, since the demo has no real audio/video backend — but they represent different real actions: "Let them speak" is where you\'d call your video SDK\'s unmute-and-spotlight API before removing the entry, while "Lower hand" is a moderator dismissing the request with no spotlight change. The comment in the click handler marks exactly where that distinction belongs.

Replace the simulate button\'s click handler with your SDK\'s hand-raise event listener (pushing a new { id, name, raisedAt } entry when it fires), and inside the "Let them speak" branch of the actions handler, call your SDK\'s unmute/spotlight method before filtering the person out of the queue array.

Hold the queue array in component state; pushing a new raise and filtering on an action both become standard state updates (setQueue in React, a mutated ref in Vue, or a component field in Angular). For the live timestamps, keep a separate "now" tick in state updated once a second and compute each row\'s time-ago string from it during render — the framework\'s own diffing avoids the manual DOM-only update this vanilla version does by hand.