Reaction Buttons

Lightweight inline feedback widgets for quick user sentiment collection.

What are Reaction Buttons?

Reaction buttons are compact, inline widgets that let users provide instant feedback with a single click. Unlike full feedback widgets that open modals, reaction buttons embed directly in your content for frictionless micro-feedback collection.

Was this helpful?  [👍] [👎]

Usage Patterns

When to Use Reaction Buttons vs Feedback Widgets

Scenario	Widget Type	Why
Article helpfulness	Reaction	Quick yes/no is sufficient
Feature satisfaction	Reaction	Low-friction sentiment capture
Bug reports	Feedback	Needs detailed description
Feature requests	Feedback	Requires context and explanation
Support articles	Reaction	"Did this solve your problem?"
Post-purchase	Feedback	Want detailed experience feedback
In-app tooltips	Reaction	Compact, non-intrusive
Exit surveys	Feedback	Gather comprehensive insights

Rule of Thumb

Use reaction buttons when you want quick sentiment data. Use feedback widgets when you need qualitative context.

Template Selection

FeedValue offers four reaction templates optimized for different use cases.

Thumbs (Binary Feedback)

Best for: Yes/no questions, helpfulness ratings, simple approval

html

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-template="thumbs"
  async
></script>

Rendered output:

Was this helpful?  [👍 Yes] [👎 No]

Use when:

"Was this article helpful?"
"Did this answer your question?"
Approval/disapproval signals

Helpful (Yes/No)

Best for: Documentation feedback, support articles, simple confirmation

html

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  async
></script>

Rendered output:

Was this helpful?  [✓ Yes] [✕ No]

Use when:

"Did this solve your problem?"
Knowledge base articles
FAQ sections

Emoji (Sentiment Scale)

Best for: Satisfaction surveys, experience ratings, mood capture

html

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-template="emoji"
  async
></script>

Rendered output:

How was your experience?  [😠] [😞] [😐] [😊] [😍]

Use when:

Post-interaction satisfaction
Feature experience ratings
General sentiment capture
NPS-style quick surveys

Rating (Numeric Score)

Best for: Star ratings, numeric scores, quantitative metrics

html

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-template="rating"
  data-max-rating="5"
  async
></script>

Rendered output:

Rate this:  [★] [★] [★] [★] [★]

Use when:

Product ratings
Content quality scores
Service ratings
Any 1-5 or 1-10 scale needs

Custom Options

For unique use cases, define custom reaction options through the dashboard when creating a reaction widget. Choose any emoji or text labels for your options.

Custom options use cases:

Brand-specific reactions (product-themed icons)
Multi-choice questions (not just positive/negative)
Gamified feedback (custom badges or characters)
Localized options (culturally appropriate icons)

Configuration Best Practices

followUpTrigger Settings

Control when to ask for additional context after a reaction.

Value	Behavior	Best For
`"negative"`	Follow-up only on negative reactions	Default behavior - understand pain points without over-asking
`"all"`	Always show follow-up prompt	When you want context for all feedback
`"none"`	No follow-up, just the reaction	Maximum speed, minimum friction

html

<!-- Default: Follow up on negative reactions only -->
<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-follow-up-trigger="negative"
  async
></script>

<!-- Always collect context -->
<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-follow-up-trigger="all"
  async
></script>

<!-- Quick reactions only, no follow-up -->
<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="reaction"
  data-follow-up-trigger="none"
  async
></script>

Recommendation

Start with "negative" (default). This captures detailed feedback when users are frustrated without annoying happy users.

showLabels Configuration

Control whether text labels appear alongside icons.

html

<!-- Show labels (default) -->
<script
  data-show-labels="true"
  ...
></script>

Result: [👍 Yes] [👎 No]

html

<!-- Hide labels (icon-only) -->
<script
  data-show-labels="false"
  ...
></script>

Result: [👍] [👎]

When to hide labels:

Compact UI spaces (sidebars, tooltips)
Icon meaning is universally understood
Mobile-first designs with limited width
Minimalist design aesthetic

When to show labels:

Accessibility is a priority
Custom icons that need explanation
International audiences (icons may vary in meaning)
Enterprise applications

buttonSize Accessibility

Choose the appropriate size for your context and audience.

Size	Dimensions	Use Case
`sm`	24px	Inline with text, dense UIs, tooltips
`md`	32px	Standard usage, most contexts (default)
`lg`	44px	Touch-friendly, accessibility-focused, standalone

html

<!-- Small - for inline/dense contexts -->
<script data-button-size="sm" ...></script>

<!-- Medium - default, balanced -->
<script data-button-size="md" ...></script>

<!-- Large - touch targets, accessibility -->
<script data-button-size="lg" ...></script>

Accessibility Note

WCAG 2.1 recommends minimum touch targets of 44x44 pixels. Use lg size for:

Mobile applications
Users with motor impairments
Standalone reaction widgets
High-visibility feedback collection

Integration Guidelines

React SDK

Use FeedValueProvider with headless mode for full control:

tsx

import { FeedValueProvider, useFeedValue } from '@feedvalue/react';

function App() {
  return (
    <FeedValueProvider
      widgetId="YOUR_WIDGET_ID"
      headless
      config={{ type: 'reaction', template: 'thumbs' }}
    >
      <ArticlePage />
    </FeedValueProvider>
  );
}

function ArticleReactions() {
  const { submit, isReady, isSubmitting } = useFeedValue();
  const [submitted, setSubmitted] = useState<string | null>(null);

  const handleReaction = async (value: 'positive' | 'negative') => {
    await submit({
      reaction: value,
      metadata: { articleId: 'article-123' }
    });
    setSubmitted(value);
  };

  if (submitted) {
    return <p>Thanks for your feedback!</p>;
  }

  return (
    <div className="reaction-buttons">
      <span>Was this helpful?</span>
      <button
        onClick={() => handleReaction('positive')}
        disabled={!isReady || isSubmitting}
      >
        👍 Yes
      </button>
      <button
        onClick={() => handleReaction('negative')}
        disabled={!isReady || isSubmitting}
      >
        👎 No
      </button>
    </div>
  );
}

Headless mode benefits for reactions:

Complete styling control
Custom animations and transitions
Integration with existing component libraries
Conditional follow-up logic

Vue SDK

Use the useReaction composable for reaction-specific functionality:

vue

<script setup>
import { ref } from 'vue';
import { useFeedValue } from '@feedvalue/vue';

const { submit, isReady, isSubmitting } = useFeedValue();
const submitted = ref(null);

const handleReaction = async (value) => {
  await submit({
    reaction: value,
    metadata: { articleId: 'article-123' }
  });
  submitted.value = value;
};
</script>

<template>
  <div v-if="submitted" class="thank-you">
    Thanks for your feedback!
  </div>
  <div v-else class="reaction-buttons">
    <span>Was this helpful?</span>
    <button
      @click="handleReaction('positive')"
      :disabled="!isReady || isSubmitting"
    >
      👍 Yes
    </button>
    <button
      @click="handleReaction('negative')"
      :disabled="!isReady || isSubmitting"
    >
      👎 No
    </button>
  </div>
</template>

Vue-specific features:

Reactive state management with ref
Seamless Nuxt 3 integration
Options API support via $feedvalue

WordPress Shortcode

Embed reaction buttons anywhere with the [feedvalue_reaction] shortcode:

[feedvalue_reaction widget="YOUR_WIDGET_ID"]

Available shortcode attributes:

Attribute	Values	Default	Description
`widget`	Widget ID	required	Your reaction widget ID
`template`	`thumbs`, `helpful`, `emoji`, `rating`	`thumbs`	Reaction style
`follow_up`	`negative`, `all`, `none`	`negative`	When to show follow-up
`show_labels`	`true`, `false`	`true`	Display text labels
`size`	`sm`, `md`, `lg`	`md`	Button size
`align`	`left`, `center`, `right`	`left`	Horizontal alignment

Examples:

<!-- Basic thumbs reaction -->
[feedvalue_reaction widget="YOUR_WIDGET_ID"]

<!-- Emoji reactions, centered, no follow-up -->
[feedvalue_reaction widget="YOUR_WIDGET_ID" template="emoji" follow_up="none" align="center"]

<!-- Large accessible thumbs with labels -->
[feedvalue_reaction widget="YOUR_WIDGET_ID" size="lg" show_labels="true"]

<!-- 5-star rating -->
[feedvalue_reaction widget="YOUR_WIDGET_ID" template="rating"]

Placement suggestions:

End of blog posts: [feedvalue_reaction widget="..." align="center"]
Sidebar widget: Use WordPress widget area
After WooCommerce purchase: Hook into woocommerce_thankyou
Knowledge base articles: End of content

Testing Recommendations

Test All Template Types

Before deployment, verify each template renders correctly:

Create test widgets for each template via the dashboard:

Thumbs template
Helpful template
Emoji template
Rating template
Custom options

Checklist:

[ ] All options render and are clickable
[ ] Selected state is visually distinct
[ ] Disabled state during submission
[ ] Success state after submission

Verify followUpTrigger Behavior

Test each trigger setting systematically:

Setting	Test Action	Expected Result
`negative`	Click positive reaction	No follow-up appears
`negative`	Click negative reaction	Follow-up prompt appears
`all`	Click any reaction	Follow-up prompt appears
`none`	Click any reaction	Success message, no follow-up

Cross-Browser Emoji Rendering

Emojis render differently across platforms. Test on:

Platform	Browser	Known Issues
Windows	Chrome, Firefox, Edge	Emoji style varies by Windows version
macOS	Safari, Chrome	Consistent Apple emoji
iOS	Safari, Chrome	Consistent Apple emoji
Android	Chrome	Varies by device manufacturer
Linux	Firefox	May show text-style emoji

Emoji Compatibility

Some older systems may not support newer Unicode emoji. For maximum compatibility:

Use well-established emoji (thumbs, basic faces)
Avoid skin tone modifiers
Test on target audience's common devices
Consider fallback text labels

Testing script:

javascript

// Add to browser console to test emoji support
const testEmoji = ['👍', '👎', '😠', '😞', '😐', '😊', '😍', '⭐'];
testEmoji.forEach(e => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillText(e, 0, 0);
  console.log(`${e}: ${ctx.getImageData(0, 0, 1, 1).data[3] > 0 ? 'supported' : 'NOT supported'}`);
});

Accessibility Testing

Ensure reaction buttons are accessible:

[ ] Keyboard navigation: Tab to focus, Enter/Space to activate
[ ] Screen reader: Labels announce correctly
[ ] Color contrast: Meets WCAG AA (4.5:1 for text, 3:1 for UI)
[ ] Touch targets: lg size meets 44px minimum
[ ] Focus indicators: Visible focus ring on buttons

html

<!-- Accessible reaction implementation -->
<div role="group" aria-label="Rate this article">
  <button
    aria-label="Helpful"
    aria-pressed="false"
    data-reaction="positive"
  >
    👍 Yes
  </button>
  <button
    aria-label="Not helpful"
    aria-pressed="false"
    data-reaction="negative"
  >
    👎 No
  </button>
</div>

Analytics and Insights

Reaction data appears in your FeedValue dashboard:

Reaction distribution: Pie chart of positive/negative/neutral
Trends over time: Line graph of reactions by day/week
Page-level breakdown: Which content gets most reactions
Follow-up rate: How often users provide additional context

Pro Tip

Combine reaction data with page metadata to identify:

Most helpful documentation pages
Features with lowest satisfaction
Content that needs improvement

Reaction Buttons ​

What are Reaction Buttons? ​

Usage Patterns ​

When to Use Reaction Buttons vs Feedback Widgets ​

Template Selection ​

Thumbs (Binary Feedback) ​

Helpful (Yes/No) ​

Emoji (Sentiment Scale) ​

Rating (Numeric Score) ​

Custom Options ​

Configuration Best Practices ​

followUpTrigger Settings ​

showLabels Configuration ​

buttonSize Accessibility ​

Integration Guidelines ​

React SDK ​

Vue SDK ​

WordPress Shortcode ​

Testing Recommendations ​

Test All Template Types ​

Verify followUpTrigger Behavior ​

Cross-Browser Emoji Rendering ​

Accessibility Testing ​

Analytics and Insights ​

Reaction Buttons

What are Reaction Buttons?

Usage Patterns

When to Use Reaction Buttons vs Feedback Widgets

Template Selection

Thumbs (Binary Feedback)

Helpful (Yes/No)

Emoji (Sentiment Scale)

Rating (Numeric Score)

Custom Options

Configuration Best Practices

followUpTrigger Settings

showLabels Configuration

buttonSize Accessibility

Integration Guidelines

React SDK

Vue SDK

WordPress Shortcode

Testing Recommendations

Test All Template Types

Verify followUpTrigger Behavior

Cross-Browser Emoji Rendering

Accessibility Testing

Analytics and Insights