Helpful Feedback Widget — Was This Helpful? UI

The "Was this helpful? 👍 👎" widget at the bottom of documentation and help-center articles is the simplest, highest-response-rate way to learn whether your content actually works. This snippet builds the complete pattern in plain HTML, CSS, and vanilla JavaScript: a one-tap yes/no vote, a contextual follow-up that adapts to the answer, quick-select reason tags, an optional comment, and a thank-you state — three screens in one small card.

One tap to participate, more if they want

The barrier to feedback has to be near zero, so the first screen asks one question with two buttons. That single tap is the most valuable signal — a raw helpful/unhelpful ratio per article — and many users will stop there, which is fine. Only after they've voted does the widget ask for more, so you capture the easy signal first and treat the detailed follow-up as a bonus rather than a gate.

A follow-up that adapts to the answer

The follow-up question and its reason tags change based on the vote. A thumbs-up asks "What did you like?" with positive tags (Clear and easy, Solved my problem, Well written); a thumbs-down asks "What could be better?" with diagnostic tags (Hard to follow, Missing information, Out of date). This matters because the useful question is different depending on the answer — asking an unhappy reader "what did you like?" wastes the moment, and asking a happy one "what's wrong?" is confusing. Matching the prompt to the sentiment gets you actionable, categorised feedback instead of vague free text.

Quick tags plus optional comment

Most people won't write a paragraph, but they'll happily tap a tag or two. The reason chips give one-tap structured categorisation (toggle-selectable, so multiple can apply), while the textarea stays explicitly optional for the minority who want to elaborate. This combination — structured tags for volume, free text for depth — is what makes the feedback both quantifiable (you can count "Out of date" across articles) and rich (you can read the specifics).

A real thank-you, sentiment-aware

Both the Send and Skip buttons lead to a thank-you state, because acknowledging the input matters even when the user skips the details. The message adapts too: a positive vote gets "glad it helped," a negative one gets "we'll use this to improve" — closing the loop honestly. Crucially, both paths end the interaction; the widget never re-asks, respecting that the user has already given what they chose to.

Lightweight and analytics-ready

The whole flow is three states toggled with the hidden attribute and driven by a few event listeners. The finish() function is where you'd send { vote, selectedTags, comment } to your analytics or feedback endpoint — the vote alone powers a per-article helpfulness score, while the tags and comment feed content-improvement decisions. Because it's so small and dependency-free, it drops into any docs page, blog post, or knowledge-base article without weighing the page down.