More Cards Snippets

See all ->

Profile Card

Glass Card

Gradient Border Card

Testimonial Card

Front-End Coding Playgrounds

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->

HTML Playground42 lessons · Click-based · Live preview

CSS PlaygroundLearn CSS with a live editor

JavaScript Playground60 lessons · DOM · Async · Canvas

React PlaygroundLearn React with a live code editor

GSAP PlaygroundLearn GSAP animation interactively

SCSS Playground45 lessons · Sass modules · tokens

Tailwind PlaygroundLearn Tailwind CSS with a live editor

Bootstrap 5 Playground50 lessons · live preview

Helpful Feedback Widget — Was This Helpful? UI

Helpful Feedback Widget · Cards · Plain HTML, CSS & JS · Live preview

Share & Support

What's included

Features

One-tap primary vote

A single yes/no question captures the highest-value signal first, with no barrier to participating.

Answer-aware follow-up

The follow-up question and reason tags adapt to a positive or negative vote, so the prompt always fits.

Multi-select reason tags

Toggle-selectable chips give one-tap structured categorisation that you can count across articles.

Optional free-text comment

An explicitly optional textarea captures depth from the minority who want to elaborate.

Skip-friendly flow

Both Send and Skip reach the thank-you, respecting users who only want to give the one-tap vote.

Sentiment-aware thank-you

The closing message differs for positive vs negative votes, closing the loop honestly.

Three-state card

Ask, follow-up, and thanks are one compact card toggled cleanly — no layout jumps.

Analytics-ready payload

finish() exposes { vote, tags, comment } ready to send to your feedback endpoint per article.

About this UI Snippet

Helpful Feedback Widget — Yes/No Vote with Contextual Follow-Up

Screenshot of the Helpful Feedback Widget snippet rendered live

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.

Step by step

How to Use

1
Paste HTML, CSS, and JSA "Was this article helpful?" card renders with Yes and No buttons.
2
VoteClick Yes or No — the widget reveals a follow-up whose question and tags match your answer.
3
Pick reason tagsTap one or more reason chips (multi-select) and optionally add a comment.
4
Send or skipBoth Send and Skip lead to a sentiment-aware thank-you — the widget never re-asks.
5
Edit the tagsChange the positive/negative tag lists in the TAGS object to match what you want to learn.
6
Connect your analyticsIn finish(), send { vote, selectedTags, comment } to your feedback or analytics endpoint, keyed by article id.

Real-world uses

Common Use Cases

Documentation and help centers

The classic per-article helpfulness widget — pair with a FAQ search accordion for the broader help page.

Blog and knowledge-base posts

Measure which articles actually help readers and which need rewriting.

Product in-app guides

Collect feedback on tooltips, onboarding steps, or feature explainers in context.

Support and ticket resolution

Ask "did this solve your issue?" after a help response, pairing with a feedback tab widget for open-ended input.

Course and lesson pages

Gauge whether each lesson landed and gather specific improvement tags.

Learning multi-state micro-surveys

A reference for a low-friction vote-then-detail flow — compare with an NPS survey for the score-based variant.

Got questions?

Frequently Asked Questions

In the finish() function, send { vote, selectedTags, comment } along with the article id and URL to your analytics tool (a custom event) or a feedback endpoint. The vote alone gives you a per-article helpfulness ratio; the tags let you aggregate common issues ("Out of date" across docs), and the comment captures specifics worth reading.

Lowering the barrier to the first action maximizes response rate — most users will tap yes/no but not write a comment, and that single tap is the highest-value, most aggregatable signal. Showing the detailed follow-up only after the vote treats it as an optional bonus, so you never lose the easy signal by gating it behind effort.

After finish(), store a flag in localStorage keyed by article id (and optionally a timestamp), and check it on load — if present, render the thank-you state (or hide the widget) instead of the ask. For logged-in users, record the vote server-side against their account so it persists across devices.

Yes — the useful follow-up question depends on the answer. Asking an unhappy reader "what did you like?" wastes the moment, and asking a happy one "what went wrong?" is confusing. Matching the prompt and the reason tags to the sentiment produces actionable, correctly categorized feedback instead of mismatched noise.

In React, hold the vote, selected tags, and step in useState and conditionally render ask/follow-up/thanks; in Vue, use ref()/reactive() with v-if; in Angular, use component fields with *ngIf. The TAGS data and the finish() payload port unchanged — only the three-state toggling moves into the framework's conditional rendering.

Helpful Feedback Widget — Export as HTML, React, Vue, Angular & Tailwind

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Helpful Feedback Widget</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    
    .hfw-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;width:100%;max-width:380px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
    .hfw-q{font-size:13.5px;font-weight:700;color:#1e293b;display:block}
    
    .hfw-ask{display:flex;align-items:center;justify-content:space-between;gap:14px}
    .hfw-ask[hidden]{display:none}
    .hfw-btns{display:flex;gap:8px;flex-shrink:0}
    .hfw-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f0;background:#fff;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
    .hfw-btn:hover{border-color:#cbd5e1}
    .hfw-btn[data-vote="up"]:hover{border-color:#86efac;color:#16a34a;background:#f0fdf4}
    .hfw-btn[data-vote="down"]:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}
    
    .hfw-followup{margin-top:4px}
    .hfw-followup .hfw-q{margin-bottom:11px}
    .hfw-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
    .hfw-tag{border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
    .hfw-tag.on{border-color:#6366f1;background:#eef2ff;color:#4f46e5}
    .hfw-followup textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px}
    .hfw-followup textarea:focus{outline:none;border-color:#6366f1}
    .hfw-actions{display:flex;justify-content:flex-end;gap:8px}
    .hfw-skip{background:none;border:none;color:#94a3b8;font-size:12.5px;font-weight:700;cursor:pointer}
    .hfw-skip:hover{color:#64748b}
    .hfw-send{background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer}
    .hfw-send:hover{background:#4f46e5}
    
    .hfw-thanks{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#16a34a}
    .hfw-thanks[hidden]{display:none}
    .hfw-thanks-icon{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  </style>
</head>
<body>
  <div class="hfw-card" id="hfwCard">
    <div class="hfw-ask" id="hfwAsk">
      <span class="hfw-q">Was this article helpful?</span>
      <div class="hfw-btns">
        <button type="button" class="hfw-btn" data-vote="up" aria-label="Yes, helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
          Yes
        </button>
        <button type="button" class="hfw-btn" data-vote="down" aria-label="No, not helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
          No
        </button>
      </div>
    </div>
  
    <div class="hfw-followup" id="hfwFollowup" hidden>
      <label class="hfw-q" id="hfwFollowupQ" for="hfwText">What could be better?</label>
      <div class="hfw-tags" id="hfwTags"></div>
      <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
      <div class="hfw-actions">
        <button type="button" class="hfw-skip" id="hfwSkip">Skip</button>
        <button type="button" class="hfw-send" id="hfwSend">Send feedback</button>
      </div>
    </div>
  
    <div class="hfw-thanks" id="hfwThanks" hidden>
      <span class="hfw-thanks-icon">✓</span>
      <span id="hfwThanksText">Thanks for your feedback!</span>
    </div>
  </div>
  <script>
    var TAGS = {
      up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
      down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
    };
    var vote = null;
    var selectedTags = [];
    
    var ask = document.getElementById('hfwAsk');
    var followup = document.getElementById('hfwFollowup');
    var thanks = document.getElementById('hfwThanks');
    
    function chooseVote(v) {
      vote = v;
      selectedTags = [];
      ask.hidden = true;
      followup.hidden = false;
      document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
      document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
        return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
      }).join('');
    }
    
    function finish() {
      // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
      followup.hidden = true;
      thanks.hidden = false;
      document.getElementById('hfwThanksText').textContent = vote === 'up'
        ? 'Thanks — glad it helped!'
        : 'Thanks — we\'ll use this to improve.';
    }
    
    document.getElementById('hfwAsk').addEventListener('click', function (e) {
      var btn = e.target.closest('[data-vote]');
      if (btn) chooseVote(btn.dataset.vote);
    });
    
    document.getElementById('hfwTags').addEventListener('click', function (e) {
      var tag = e.target.closest('.hfw-tag');
      if (!tag) return;
      tag.classList.toggle('on');
      var t = tag.dataset.tag;
      var i = selectedTags.indexOf(t);
      if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
    });
    
    document.getElementById('hfwSend').addEventListener('click', finish);
    document.getElementById('hfwSkip').addEventListener('click', finish);
  </script>
</body>
</html>

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Helpful Feedback Widget</title>
  <!-- Tailwind CSS v3+ — arbitrary value classes (e.g. bg-[#0f172a]) are valid -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    * {
      box-sizing:border-box;margin:0;padding:0
    }

    body {
      font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px
    }

    .hfw-ask[hidden] {
      display:none
    }

    .hfw-btn[data-vote="up"]:hover {
      border-color:#86efac;color:#16a34a;background:#f0fdf4
    }

    .hfw-btn[data-vote="down"]:hover {
      border-color:#fca5a5;color:#dc2626;background:#fef2f2
    }

    .hfw-followup .hfw-q {
      margin-bottom:11px
    }

    .hfw-tag {
      border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s
    }

    .hfw-tag.on {
      border-color:#6366f1;background:#eef2ff;color:#4f46e5
    }

    .hfw-followup textarea {
      width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px
    }

    .hfw-followup textarea:focus {
      outline:none;border-color:#6366f1
    }

    .hfw-thanks[hidden] {
      display:none
    }
  </style>
</head>
<body>
  <div class="bg-[#fff] border border-[#e2e8f0] rounded-[14px] py-[18px] px-5 w-full max-w-[380px] shadow-[0_8px_24px_rgba(15,23,42,.06)]" id="hfwCard">
    <div class="hfw-ask flex items-center justify-between gap-3.5" id="hfwAsk">
      <span class="hfw-q text-[13.5px] font-bold text-[#1e293b] block">Was this article helpful?</span>
      <div class="flex gap-2 shrink-0">
        <button type="button" class="hfw-btn inline-flex items-center gap-1.5 border bg-[#fff] rounded-[9px] py-[7px] px-[13px] text-[13px] font-bold text-[#475569] cursor-pointer font-[inherit] [transition:border-color_.15s,color_.15s,background_.15s] hover:border-[#cbd5e1]" data-vote="up" aria-label="Yes, helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
          Yes
        </button>
        <button type="button" class="hfw-btn inline-flex items-center gap-1.5 border bg-[#fff] rounded-[9px] py-[7px] px-[13px] text-[13px] font-bold text-[#475569] cursor-pointer font-[inherit] [transition:border-color_.15s,color_.15s,background_.15s] hover:border-[#cbd5e1]" data-vote="down" aria-label="No, not helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
          No
        </button>
      </div>
    </div>
  
    <div class="hfw-followup mt-1" id="hfwFollowup" hidden>
      <label class="hfw-q text-[13.5px] font-bold text-[#1e293b] block" id="hfwFollowupQ" for="hfwText">What could be better?</label>
      <div class="flex flex-wrap gap-[7px] mb-[11px]" id="hfwTags"></div>
      <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
      <div class="flex justify-end gap-2">
        <button type="button" class="bg-transparent border-0 text-[#94a3b8] text-[12.5px] font-bold cursor-pointer hover:text-[#64748b]" id="hfwSkip">Skip</button>
        <button type="button" class="bg-[#6366f1] text-[#fff] border-0 rounded-lg py-2 px-4 text-[12.5px] font-bold cursor-pointer hover:bg-[#4f46e5]" id="hfwSend">Send feedback</button>
      </div>
    </div>
  
    <div class="hfw-thanks flex items-center gap-[9px] text-[13.5px] font-bold text-[#16a34a]" id="hfwThanks" hidden>
      <span class="w-6 h-6 rounded-full bg-[#22c55e] text-[#fff] text-[13px] flex items-center justify-center shrink-0">✓</span>
      <span id="hfwThanksText">Thanks for your feedback!</span>
    </div>
  </div>
  <script>
    var TAGS = {
      up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
      down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
    };
    var vote = null;
    var selectedTags = [];
    
    var ask = document.getElementById('hfwAsk');
    var followup = document.getElementById('hfwFollowup');
    var thanks = document.getElementById('hfwThanks');
    
    function chooseVote(v) {
      vote = v;
      selectedTags = [];
      ask.hidden = true;
      followup.hidden = false;
      document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
      document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
        return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
      }).join('');
    }
    
    function finish() {
      // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
      followup.hidden = true;
      thanks.hidden = false;
      document.getElementById('hfwThanksText').textContent = vote === 'up'
        ? 'Thanks — glad it helped!'
        : 'Thanks — we\'ll use this to improve.';
    }
    
    document.getElementById('hfwAsk').addEventListener('click', function (e) {
      var btn = e.target.closest('[data-vote]');
      if (btn) chooseVote(btn.dataset.vote);
    });
    
    document.getElementById('hfwTags').addEventListener('click', function (e) {
      var tag = e.target.closest('.hfw-tag');
      if (!tag) return;
      tag.classList.toggle('on');
      var t = tag.dataset.tag;
      var i = selectedTags.indexOf(t);
      if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
    });
    
    document.getElementById('hfwSend').addEventListener('click', finish);
    document.getElementById('hfwSkip').addEventListener('click', finish);
  </script>
</body>
</html>

React

import React, { useEffect } from 'react';

// CSS — optionally move to HelpfulFeedbackWidget.module.css
const css = `
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.hfw-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;width:100%;max-width:380px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.hfw-q{font-size:13.5px;font-weight:700;color:#1e293b;display:block}

.hfw-ask{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hfw-ask[hidden]{display:none}
.hfw-btns{display:flex;gap:8px;flex-shrink:0}
.hfw-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f0;background:#fff;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
.hfw-btn:hover{border-color:#cbd5e1}
.hfw-btn[data-vote="up"]:hover{border-color:#86efac;color:#16a34a;background:#f0fdf4}
.hfw-btn[data-vote="down"]:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}

.hfw-followup{margin-top:4px}
.hfw-followup .hfw-q{margin-bottom:11px}
.hfw-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.hfw-tag{border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.hfw-tag.on{border-color:#6366f1;background:#eef2ff;color:#4f46e5}
.hfw-followup textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px}
.hfw-followup textarea:focus{outline:none;border-color:#6366f1}
.hfw-actions{display:flex;justify-content:flex-end;gap:8px}
.hfw-skip{background:none;border:none;color:#94a3b8;font-size:12.5px;font-weight:700;cursor:pointer}
.hfw-skip:hover{color:#64748b}
.hfw-send{background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer}
.hfw-send:hover{background:#4f46e5}

.hfw-thanks{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#16a34a}
.hfw-thanks[hidden]{display:none}
.hfw-thanks-icon{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
`;

export default function HelpfulFeedbackWidget() {
  // Auto-generated escape hatch: the original snippet's vanilla JS runs once
  // after mount and queries the rendered DOM. For idiomatic React, lift this
  // into state + handlers.
  useEffect(() => {
    const _listeners = [];
    const _originalAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, options) {
      _listeners.push({ target: this, type, listener, options });
      return _originalAddEventListener.call(this, type, listener, options);
    };
    var TAGS = {
      up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
      down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
    };
    var vote = null;
    var selectedTags = [];
    
    var ask = document.getElementById('hfwAsk');
    var followup = document.getElementById('hfwFollowup');
    var thanks = document.getElementById('hfwThanks');
    
    function chooseVote(v) {
      vote = v;
      selectedTags = [];
      ask.hidden = true;
      followup.hidden = false;
      document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
      document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
        return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
      }).join('');
    }
    
    function finish() {
      // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
      followup.hidden = true;
      thanks.hidden = false;
      document.getElementById('hfwThanksText').textContent = vote === 'up'
        ? 'Thanks — glad it helped!'
        : 'Thanks — we\'ll use this to improve.';
    }
    
    document.getElementById('hfwAsk').addEventListener('click', function (e) {
      var btn = e.target.closest('[data-vote]');
      if (btn) chooseVote(btn.dataset.vote);
    });
    
    document.getElementById('hfwTags').addEventListener('click', function (e) {
      var tag = e.target.closest('.hfw-tag');
      if (!tag) return;
      tag.classList.toggle('on');
      var t = tag.dataset.tag;
      var i = selectedTags.indexOf(t);
      if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
    });
    
    document.getElementById('hfwSend').addEventListener('click', finish);
    document.getElementById('hfwSkip').addEventListener('click', finish);
    // Cleanup: restore addEventListener and remove all listeners
    return () => {
      EventTarget.prototype.addEventListener = _originalAddEventListener;
      for (const { target, type, listener, options } of _listeners) {
        target.removeEventListener(type, listener, options);
      }
    };
  }, []);

  return (
    <>
      <style>{css}</style>
      <div className="hfw-card" id="hfwCard">
        <div className="hfw-ask" id="hfwAsk">
          <span className="hfw-q">Was this article helpful?</span>
          <div className="hfw-btns">
            <button type="button" className="hfw-btn" data-vote="up" aria-label="Yes, helpful">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
              Yes
            </button>
            <button type="button" className="hfw-btn" data-vote="down" aria-label="No, not helpful">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
              No
            </button>
          </div>
        </div>
      
        <div className="hfw-followup" id="hfwFollowup" hidden>
          <label className="hfw-q" id="hfwFollowupQ" htmlFor="hfwText">What could be better?</label>
          <div className="hfw-tags" id="hfwTags"></div>
          <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
          <div className="hfw-actions">
            <button type="button" className="hfw-skip" id="hfwSkip">Skip</button>
            <button type="button" className="hfw-send" id="hfwSend">Send feedback</button>
          </div>
        </div>
      
        <div className="hfw-thanks" id="hfwThanks" hidden>
          <span className="hfw-thanks-icon">✓</span>
          <span id="hfwThanksText">Thanks for your feedback!</span>
        </div>
      </div>
    </>
  );
}

React + Tailwind

import React, { useEffect } from 'react';
// Requires Tailwind CSS v3+ — https://tailwindcss.com/docs/installation
// Arbitrary value classes (e.g. bg-[#0f172a]) are valid Tailwind v3+

export default function HelpfulFeedbackWidget() {
  // Auto-generated escape hatch: the original snippet's vanilla JS runs once
  // after mount and queries the rendered DOM. For idiomatic React, lift this
  // into state + handlers.
  useEffect(() => {
    const _listeners = [];
    const _originalAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, options) {
      _listeners.push({ target: this, type, listener, options });
      return _originalAddEventListener.call(this, type, listener, options);
    };
    var TAGS = {
      up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
      down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
    };
    var vote = null;
    var selectedTags = [];
    
    var ask = document.getElementById('hfwAsk');
    var followup = document.getElementById('hfwFollowup');
    var thanks = document.getElementById('hfwThanks');
    
    function chooseVote(v) {
      vote = v;
      selectedTags = [];
      ask.hidden = true;
      followup.hidden = false;
      document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
      document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
        return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
      }).join('');
    }
    
    function finish() {
      // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
      followup.hidden = true;
      thanks.hidden = false;
      document.getElementById('hfwThanksText').textContent = vote === 'up'
        ? 'Thanks — glad it helped!'
        : 'Thanks — we\'ll use this to improve.';
    }
    
    document.getElementById('hfwAsk').addEventListener('click', function (e) {
      var btn = e.target.closest('[data-vote]');
      if (btn) chooseVote(btn.dataset.vote);
    });
    
    document.getElementById('hfwTags').addEventListener('click', function (e) {
      var tag = e.target.closest('.hfw-tag');
      if (!tag) return;
      tag.classList.toggle('on');
      var t = tag.dataset.tag;
      var i = selectedTags.indexOf(t);
      if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
    });
    
    document.getElementById('hfwSend').addEventListener('click', finish);
    document.getElementById('hfwSkip').addEventListener('click', finish);
    // Cleanup: restore addEventListener and remove all listeners
    return () => {
      EventTarget.prototype.addEventListener = _originalAddEventListener;
      for (const { target, type, listener, options } of _listeners) {
        target.removeEventListener(type, listener, options);
      }
    };
  }, []);

  return (
    <>
      <style>{`
* {
  box-sizing:border-box;margin:0;padding:0
}

body {
  font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px
}

.hfw-ask[hidden] {
  display:none
}

.hfw-btn[data-vote="up"]:hover {
  border-color:#86efac;color:#16a34a;background:#f0fdf4
}

.hfw-btn[data-vote="down"]:hover {
  border-color:#fca5a5;color:#dc2626;background:#fef2f2
}

.hfw-followup .hfw-q {
  margin-bottom:11px
}

.hfw-tag {
  border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s
}

.hfw-tag.on {
  border-color:#6366f1;background:#eef2ff;color:#4f46e5
}

.hfw-followup textarea {
  width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px
}

.hfw-followup textarea:focus {
  outline:none;border-color:#6366f1
}

.hfw-thanks[hidden] {
  display:none
}
      `}</style>
      <div className="bg-[#fff] border border-[#e2e8f0] rounded-[14px] py-[18px] px-5 w-full max-w-[380px] shadow-[0_8px_24px_rgba(15,23,42,.06)]" id="hfwCard">
        <div className="hfw-ask flex items-center justify-between gap-3.5" id="hfwAsk">
          <span className="hfw-q text-[13.5px] font-bold text-[#1e293b] block">Was this article helpful?</span>
          <div className="flex gap-2 shrink-0">
            <button type="button" className="hfw-btn inline-flex items-center gap-1.5 border bg-[#fff] rounded-[9px] py-[7px] px-[13px] text-[13px] font-bold text-[#475569] cursor-pointer font-[inherit] [transition:border-color_.15s,color_.15s,background_.15s] hover:border-[#cbd5e1]" data-vote="up" aria-label="Yes, helpful">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
              Yes
            </button>
            <button type="button" className="hfw-btn inline-flex items-center gap-1.5 border bg-[#fff] rounded-[9px] py-[7px] px-[13px] text-[13px] font-bold text-[#475569] cursor-pointer font-[inherit] [transition:border-color_.15s,color_.15s,background_.15s] hover:border-[#cbd5e1]" data-vote="down" aria-label="No, not helpful">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
              No
            </button>
          </div>
        </div>
      
        <div className="hfw-followup mt-1" id="hfwFollowup" hidden>
          <label className="hfw-q text-[13.5px] font-bold text-[#1e293b] block" id="hfwFollowupQ" htmlFor="hfwText">What could be better?</label>
          <div className="flex flex-wrap gap-[7px] mb-[11px]" id="hfwTags"></div>
          <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
          <div className="flex justify-end gap-2">
            <button type="button" className="bg-transparent border-0 text-[#94a3b8] text-[12.5px] font-bold cursor-pointer hover:text-[#64748b]" id="hfwSkip">Skip</button>
            <button type="button" className="bg-[#6366f1] text-[#fff] border-0 rounded-lg py-2 px-4 text-[12.5px] font-bold cursor-pointer hover:bg-[#4f46e5]" id="hfwSend">Send feedback</button>
          </div>
        </div>
      
        <div className="hfw-thanks flex items-center gap-[9px] text-[13.5px] font-bold text-[#16a34a]" id="hfwThanks" hidden>
          <span className="w-6 h-6 rounded-full bg-[#22c55e] text-[#fff] text-[13px] flex items-center justify-center shrink-0">✓</span>
          <span id="hfwThanksText">Thanks for your feedback!</span>
        </div>
      </div>
    </>
  );
}

Vue

<template>
  <div class="hfw-card" id="hfwCard">
    <div class="hfw-ask" id="hfwAsk">
      <span class="hfw-q">Was this article helpful?</span>
      <div class="hfw-btns">
        <button type="button" class="hfw-btn" data-vote="up" aria-label="Yes, helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
          Yes
        </button>
        <button type="button" class="hfw-btn" data-vote="down" aria-label="No, not helpful">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
          No
        </button>
      </div>
    </div>
  
    <div class="hfw-followup" id="hfwFollowup" hidden>
      <label class="hfw-q" id="hfwFollowupQ" for="hfwText">What could be better?</label>
      <div class="hfw-tags" id="hfwTags"></div>
      <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
      <div class="hfw-actions">
        <button type="button" class="hfw-skip" id="hfwSkip">Skip</button>
        <button type="button" class="hfw-send" id="hfwSend">Send feedback</button>
      </div>
    </div>
  
    <div class="hfw-thanks" id="hfwThanks" hidden>
      <span class="hfw-thanks-icon">✓</span>
      <span id="hfwThanksText">Thanks for your feedback!</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

var TAGS = {
  up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
  down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
};
var vote = null;
var selectedTags = [];
let ask;
let followup;
let thanks;
function chooseVote(v) {
  vote = v;
  selectedTags = [];
  ask.hidden = true;
  followup.hidden = false;
  document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
  document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
    return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
  }).join('');
}
function finish() {
  // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
  followup.hidden = true;
  thanks.hidden = false;
  document.getElementById('hfwThanksText').textContent = vote === 'up'
    ? 'Thanks — glad it helped!'
    : 'Thanks — we\'ll use this to improve.';
}

onMounted(() => {
  ask = document.getElementById('hfwAsk');
  followup = document.getElementById('hfwFollowup');
  thanks = document.getElementById('hfwThanks');
  document.getElementById('hfwAsk').addEventListener('click', function (e) {
    var btn = e.target.closest('[data-vote]');
    if (btn) chooseVote(btn.dataset.vote);
  });
  document.getElementById('hfwTags').addEventListener('click', function (e) {
    var tag = e.target.closest('.hfw-tag');
    if (!tag) return;
    tag.classList.toggle('on');
    var t = tag.dataset.tag;
    var i = selectedTags.indexOf(t);
    if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
  });
  document.getElementById('hfwSend').addEventListener('click', finish);
  document.getElementById('hfwSkip').addEventListener('click', finish);
});
</script>

<style scoped>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.hfw-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;width:100%;max-width:380px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.hfw-q{font-size:13.5px;font-weight:700;color:#1e293b;display:block}

.hfw-ask{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hfw-ask[hidden]{display:none}
.hfw-btns{display:flex;gap:8px;flex-shrink:0}
.hfw-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f0;background:#fff;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
.hfw-btn:hover{border-color:#cbd5e1}
.hfw-btn[data-vote="up"]:hover{border-color:#86efac;color:#16a34a;background:#f0fdf4}
.hfw-btn[data-vote="down"]:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}

.hfw-followup{margin-top:4px}
.hfw-followup .hfw-q{margin-bottom:11px}
.hfw-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.hfw-tag{border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.hfw-tag.on{border-color:#6366f1;background:#eef2ff;color:#4f46e5}
.hfw-followup textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px}
.hfw-followup textarea:focus{outline:none;border-color:#6366f1}
.hfw-actions{display:flex;justify-content:flex-end;gap:8px}
.hfw-skip{background:none;border:none;color:#94a3b8;font-size:12.5px;font-weight:700;cursor:pointer}
.hfw-skip:hover{color:#64748b}
.hfw-send{background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer}
.hfw-send:hover{background:#4f46e5}

.hfw-thanks{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#16a34a}
.hfw-thanks[hidden]{display:none}
.hfw-thanks-icon{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
</style>

Angular

// @ts-nocheck
// Note: vanilla JS DOM manipulation is preserved as-is inside ngAfterViewInit().
// For idiomatic Angular, replace document.getElementById() with @ViewChild() refs
// and move state into component properties with two-way binding.
import { Component, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-helpful-feedback-widget',
  standalone: true,
  imports: [CommonModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="hfw-card" id="hfwCard">
      <div class="hfw-ask" id="hfwAsk">
        <span class="hfw-q">Was this article helpful?</span>
        <div class="hfw-btns">
          <button type="button" class="hfw-btn" data-vote="up" aria-label="Yes, helpful">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
            Yes
          </button>
          <button type="button" class="hfw-btn" data-vote="down" aria-label="No, not helpful">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z"/><path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
            No
          </button>
        </div>
      </div>
    
      <div class="hfw-followup" id="hfwFollowup" hidden>
        <label class="hfw-q" id="hfwFollowupQ" for="hfwText">What could be better?</label>
        <div class="hfw-tags" id="hfwTags"></div>
        <textarea id="hfwText" rows="2" placeholder="Optional — tell us more"></textarea>
        <div class="hfw-actions">
          <button type="button" class="hfw-skip" id="hfwSkip">Skip</button>
          <button type="button" class="hfw-send" id="hfwSend">Send feedback</button>
        </div>
      </div>
    
      <div class="hfw-thanks" id="hfwThanks" hidden>
        <span class="hfw-thanks-icon">✓</span>
        <span id="hfwThanksText">Thanks for your feedback!</span>
      </div>
    </div>
  `,
  styles: [`
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    
    .hfw-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;width:100%;max-width:380px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
    .hfw-q{font-size:13.5px;font-weight:700;color:#1e293b;display:block}
    
    .hfw-ask{display:flex;align-items:center;justify-content:space-between;gap:14px}
    .hfw-ask[hidden]{display:none}
    .hfw-btns{display:flex;gap:8px;flex-shrink:0}
    .hfw-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f0;background:#fff;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
    .hfw-btn:hover{border-color:#cbd5e1}
    .hfw-btn[data-vote="up"]:hover{border-color:#86efac;color:#16a34a;background:#f0fdf4}
    .hfw-btn[data-vote="down"]:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}
    
    .hfw-followup{margin-top:4px}
    .hfw-followup .hfw-q{margin-bottom:11px}
    .hfw-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
    .hfw-tag{border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
    .hfw-tag.on{border-color:#6366f1;background:#eef2ff;color:#4f46e5}
    .hfw-followup textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;color:#0f172a;resize:vertical;margin-bottom:11px}
    .hfw-followup textarea:focus{outline:none;border-color:#6366f1}
    .hfw-actions{display:flex;justify-content:flex-end;gap:8px}
    .hfw-skip{background:none;border:none;color:#94a3b8;font-size:12.5px;font-weight:700;cursor:pointer}
    .hfw-skip:hover{color:#64748b}
    .hfw-send{background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer}
    .hfw-send:hover{background:#4f46e5}
    
    .hfw-thanks{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#16a34a}
    .hfw-thanks[hidden]{display:none}
    .hfw-thanks-icon{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  `]
})
export class HelpfulFeedbackWidgetComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    var TAGS = {
      up:   ['Clear and easy', 'Solved my problem', 'Well written', 'Good examples'],
      down: ['Hard to follow', 'Missing information', 'Out of date', 'Not what I needed'],
    };
    var vote = null;
    var selectedTags = [];
    
    var ask = document.getElementById('hfwAsk');
    var followup = document.getElementById('hfwFollowup');
    var thanks = document.getElementById('hfwThanks');
    
    function chooseVote(v) {
      vote = v;
      selectedTags = [];
      ask.hidden = true;
      followup.hidden = false;
      document.getElementById('hfwFollowupQ').textContent = v === 'up' ? 'Great! What did you like?' : 'Sorry to hear that — what could be better?';
      document.getElementById('hfwTags').innerHTML = TAGS[v].map(function (t) {
        return '<button type="button" class="hfw-tag" data-tag="' + t + '">' + t + '</button>';
      }).join('');
    }
    
    function finish() {
      // Send { vote, selectedTags, comment } to your analytics/feedback endpoint here.
      followup.hidden = true;
      thanks.hidden = false;
      document.getElementById('hfwThanksText').textContent = vote === 'up'
        ? 'Thanks — glad it helped!'
        : 'Thanks — we\'ll use this to improve.';
    }
    
    document.getElementById('hfwAsk').addEventListener('click', function (e) {
      var btn = e.target.closest('[data-vote]');
      if (btn) chooseVote(btn.dataset.vote);
    });
    
    document.getElementById('hfwTags').addEventListener('click', function (e) {
      var tag = e.target.closest('.hfw-tag');
      if (!tag) return;
      tag.classList.toggle('on');
      var t = tag.dataset.tag;
      var i = selectedTags.indexOf(t);
      if (i === -1) selectedTags.push(t); else selectedTags.splice(i, 1);
    });
    
    document.getElementById('hfwSend').addEventListener('click', finish);
    document.getElementById('hfwSkip').addEventListener('click', finish);

    // Bind inline-handler functions to the component so the template can call them
    Object.assign(this, { chooseVote, finish });
  }
}

Loading…