Floating feedback widget
A floating tab that opens a card with faces to rate, an optional comment and a thank you message.
Settings
Code
<div class="uv-ofw"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="tab" aria-expanded="false" aria-controls="uv-ofw-c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Feedback</button><form class="cd" id="uv-ofw-c"><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><div class="v1"><p class="ti">Was this page helpful?</p><div class="fc" role="radiogroup" aria-label="Rating"><label><input type="radio" name="uv-ofw"><span aria-label="Not at all">😞</span></label><label><input type="radio" name="uv-ofw"><span aria-label="A little">😐</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Quite">🙂</span></label><label><input type="radio" name="uv-ofw"><span aria-label="A lot">🤩</span></label></div><textarea rows="2" placeholder="Anything to add? (optional)" aria-label="Comment"></textarea><button type="submit" class="go" disabled>Send</button></div><div class="v2" aria-live="polite"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><p class="ti">Thanks for your feedback</p></div></form></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Docs, help centers and product pages improve fastest when readers can react on the spot. This widget sits in the corner as a small Feedback pill; opening it grows a card from the same corner with four faces to rate the page, an optional comment and a send button that stays disabled until a face is picked, then shows a thank you check.
The faces are native radio buttons and the card is a real form, so it is easy to post to your endpoint. Escape or the X closes it and returns focus to the tab, and the main color sets the tab, the selected face ring and the button.