Reaction Reference | Sentiment and Content Testing Surveys

Reaction captures fast sentiment on content, designs, or copy with a single tap.

@sensefolks/reaction

How It Works

Reaction shows icons (emoji, thumbs, or heart) that users tap to react. Tap once to select and tap again to undo. Submission happens immediately.

Reactions persist in localStorage so returning visitors see prior selections. Configure the mode in your dashboard.

When to Use Reaction

Embed Reaction wherever you want quick, low-friction sentiment data:

Blog posts and articles — Gauge reader sentiment
Feature announcements — Measure excitement or concern
Help docs — Thumbs up/down for helpfulness
Product pages — Heart or like for social proof
Release notes — Quick read on how updates land

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/reaction/dist/sf-reaction/sf-reaction.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/reaction/dist/sf-reaction/sf-reaction.js"></script>

NPM

bash

npm install @sensefolks/reaction

Framework Integration

HTML

html

<sf-reaction 
  survey-key="your-survey-uuid">
</sf-reaction>

React

jsx

import '@sensefolks/reaction';

function App() {
  return (
    <sf-reaction 
      survey-key="your-survey-uuid">
    </sf-reaction>
  );
}

For Vue, Angular, Next.js, and Svelte examples, see the Embedding Tutorial.

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	Required. UUID of the reaction survey from your dashboard

Events

Event	Detail	Description
`sfReady`	`{ surveyKey, reactionMode, reactionCount }`	Fired when the survey config has loaded
`sfSubmit`	`{ surveyKey, selectedReaction, action }`	Fired on create, update, or delete of a reaction
`sfError`	`{ surveyKey, errorType, errorMessage }`	Fired on load or submit errors

Reaction Modes

Configure the mode in your dashboard. Each mode offers a different level of granularity:

Mode	Icons	Best for
`emotion`	Love, Haha, Wow, Sad, Angry, Like	Detailed sentiment on content or announcements
`binary`	Thumbs Up, Thumbs Down	Simple helpful/not helpful on docs or support content
`single`	Heart	Lightweight "like" for social proof or bookmarking

Styling

CSS Custom Properties

Customize the component by setting CSS custom properties on the element or a parent:

Property	Default	Description
`--sf-primary`	`#005fcc`	Primary brand color
`--sf-primary-hover`	`#0047a3`	Primary hover color
`--sf-text-primary`	`#111827`	Primary text color
`--sf-text-secondary`	`#6b7280`	Secondary/muted text color
`--sf-error-color`	`#dc2626`	Error state color
`--sf-card-bg`	`#ffffff`	Card background color
`--sf-card-border`	`#d1d5db`	Card border color
`--sf-card-radius`	`8px`	Card border radius
`--sf-button-radius`	`6px`	Button border radius
`--sf-transition`	`150ms ease`	Transition timing
`--sf-reaction-highlight-bg`	`rgba(239, 68, 68, 0.15)`	Background highlight for selected emoji
`--sf-reaction-icon-size`	`32px`	Size of reaction icons

CSS Parts

Style the component externally using ::part():

Part	Description
`container`	Host element wrapper
`reaction-container`	Main reaction group wrapper
`reactions-row`	Flex row of reaction buttons
`reaction-item`	Individual reaction button
`reaction-item-active`	Active/selected state (additive with reaction-item)
`reaction-icon`	Icon wrapper (default and SVG types)
`reaction-emoji`	Emoji text span
`reaction-emoji-highlight`	Circular highlight behind selected emoji
`reaction-label`	Text label below each reaction
`button`	Generic button base
`retry-button`	"Try again" button on error
`message`	Shared part on all status text
`loading-message`	Loading state text
`error-message`	Error state text
`error-container`	Error wrapper with retry button
`branding`	Branding container
`branding-link`	Branding anchor
`branding-logo`	Branding SVG logo
`announcements`	Screen reader live region

Styling Example

css

sf-reaction {
  --sf-primary: #7c3aed;
  --sf-text-secondary: #4b5563;
  --sf-reaction-icon-size: 40px;
  --sf-reaction-highlight-bg: rgba(124, 58, 237, 0.15);
}

sf-reaction::part(reaction-item) {
  padding: 0.75rem;
  border-radius: 12px;
}

sf-reaction::part(reaction-item-active) {
  background-color: rgba(124, 58, 237, 0.1);
}

sf-reaction::part(reaction-label) {
  font-weight: 500;
}

Accessibility

Each reaction button uses aria-pressed to convey toggle state
Live region announces selection changes to screen readers
Keyboard accessible (Tab to navigate, Enter/Space to toggle)
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	Supported (ES5 build)