emoji_reactions

Emoji Reactions adds a fully-featured, per-entity emoji reaction system to any Drupal 10 or 11 site. Drop a field onto any content type — nodes, comments, taxonomy terms, users, paragraphs, and more — and editors and visitors can instantly express how they feel with a single click. Reactions are stored, counted, and displayed live without a page reload, with 23 ready-to-use display layouts that range from simple pills and cards to social-media-inspired styles modelled after Facebook, Reddit, Slack, and Discord. Whether you are building a community news site, a corporate intranet, a learning platform, or a fully decoupled React or Vue application, Emoji Reactions gives you the engagement layer your content needs — with enterprise-grade analytics, a REST API, Views integration, and a comprehensive hook system for custom integrations.

Features

Reactions & Interaction

Custom field type — The emoji_reaction field type attaches to any fieldable entity via Drupal's standard Manage Fields UI. No special entity type is required.
Toggle reactions with a single click — Users add or remove a reaction instantly. Counts update via AJAX without a page reload.
Single or multiple reaction mode — Configure whether a user can hold one reaction per entity or react with several emojis simultaneously.
Reaction-change support — Let users swap their reaction instead of having to remove it first.
Anonymous user reactions — Grant the React as anonymous permission and unauthenticated visitors can react, tracked by IP, session, or both with a configurable expiry window.
Flood protection — Drupal's native flood API limits reactions per IP per hour (default: 30), preventing abuse without any extra infrastructure.
Real-time count polling — An optional JavaScript polling loop refreshes counts across all open sessions at a configurable interval (default: 15 seconds).
CSS animations — A configurable bounce animation fires on click to give immediate visual feedback.
Tooltips — Hover text is rendered from each emoji's description or accessibility label.

Display Layouts (23 total)

Core layouts — Pills, Bubbles, Grid, Compact, Minimal, Toolbar, Floating, Card, Inline, Ribbon.
Stylised / themed layouts — Neon, Glassmorphic, Retro, Magazine, Timeline.
Social-media-inspired layouts — Facebook (animated pop-up bar), Twitter/X (icon-only row), Reddit (upvote-style pills), Instagram (dominant heart), LinkedIn (stacked summary), Slack (picker tiles), WhatsApp (floating bubbles), Discord (blurple accent pills).

Every layout is configured per view mode in Manage Display, so a Teaser can show compact pills while a Full page shows the Facebook-style animated bar — all from the same field.

Emoji Management

Six default emojis — Thumbs Up 👍, Heart ❤️, Celebrate 🎉, Sad 😢, Wow 😮, Angry 😡 — installed and ready to use.
Three emoji types — Unicode characters, external image URLs, and raw SVG markup are each supported per emoji.
Drag-and-drop ordering — Reorder emojis on the admin list; the order is reflected in every widget site-wide.
Enable / disable without deleting — Toggle individual emojis on or off globally; existing reaction counts are preserved.
Per view-mode emoji selection — The formatter settings let you whitelist exactly which emojis appear in each view mode.
Accessibility labels — Each emoji carries a configurable aria-label read aloud by screen readers.

Analytics & Reporting

Reaction log — Every reaction event is recorded with timestamp, user, entity, emoji, browser, operating system, device type, anonymised IP, and language.
Filterable admin log — Filter by user (autocomplete), emoji (dropdown), entity, date range, browser, OS, and device type. Sort by any column. Bulk-delete selected rows.
Per-entity statistics — A dedicated report page shows reaction breakdowns for a single content item.
Site-wide statistics — An aggregate report at Reports → Emoji Reactions Statistics shows overall engagement across the whole site.
Fieldable log entries — Implement hook_emoji_reactions_log_fields() to attach custom fields (referrer URL, campaign ID, points awarded, etc.) to every log row.

Views Integration

The reaction table is registered with Views, providing custom field plugins (rendered emoji, entity link, bulk-form checkbox, operations), filter plugins (emoji ID, date range, user), and area plugins (bulk header and footer).
An optional Reaction Log view is installed automatically and is immediately usable at Reports → Reaction Log.

REST API & AJAX Endpoints

Read resource — GET /api/emoji-reactions/entity/{entity_type}/{entity_id}/{field_name} returns emoji configs, current counts, the current user's reactions, available layouts, and endpoint URLs. Ideal for headless frontends.
React resource — POST /api/emoji-reactions/react toggles a reaction and returns the updated action, counts, and user reaction list.
Counts endpoint — GET /emoji-reactions/counts/{entity_type}/{entity_id}/{field_name} is public, uncached, and fast — used by the real-time polling loop.
Statistics endpoint — GET /emoji-reactions/statistics/{entity_type}/{entity_id} returns per-entity analytics for users with the statistics permission.
CSRF token endpoint — GET /emoji-reactions/token provides a CSRF token for session-authenticated AJAX calls.

Block Plugin

An Emoji Reactions block renders the widget anywhere in your layout — in Layout Builder regions, sidebar blocks, or custom block placements — without requiring the field to be on the content type.
The block auto-resolves the current route's entity and accepts the same layout, emoji selection, and visibility settings as the field formatter.

Developer Experience

Six hooks — hook_emoji_reactions_react_alter, hook_emoji_reactions_display_alter, hook_emoji_reactions_access, hook_emoji_reactions_count_alter, hook_emoji_reactions_log_fields, hook_emoji_reactions_log_insert.
Injectable services — ReactionManager, StatisticsService, UserAgentParser, and EmojiReactionAccess are all registered in the service container.
Dedicated cache bin — Reactions are cached in a separate cache.emoji_reactions bin, invalidated by entity cache tags — no full cache clears required.
Zero third-party dependencies — Pure vanilla JavaScript and Drupal core APIs. No jQuery plugins, no npm runtime dependencies.
PHP 8.1+ typed properties and declare(strict_types=1) throughout.
PSR-4 autoloading under the clean Drupal\emoji_reactions namespace.

Accessibility

WCAG 2.1 AA compliant — every button carries an aria-label, count changes are announced via aria-live regions, and all interactions are fully keyboard-navigable.

Post-Installation

After enabling the module, follow these steps to get reactions appearing on your content:

Add the field to a content type.

Go to Structure → Content types → [Your Content Type] → Manage fields. Add a new field of type Emoji Reaction. On the field settings page you can enable anonymous reactions for this field instance and set cardinality (leave it at 1; the module manages multi-reaction logic internally).
Configure the display.

Go to Manage Display for the same content type. Set the formatter for your new field to Emoji Reactions. Click the ⚙ gear icon to choose a layout, set size and colour scheme, enable or disable counts/labels/tooltips/animation, and whitelist which emojis appear in this view mode. Repeat for each view mode (Full content, Teaser, etc.) as needed.
Manage your emojis.

Go to Configuration → Content → Emoji Reactions → Manage Emojis (/admin/config/content/emoji-reactions/emojis). Six emojis are installed by default. Add new ones, reorder them with drag-and-drop, or disable any you do not need. Each emoji supports Unicode characters, image URLs, or raw SVG markup, and carries its own accessibility label and tooltip description.
Adjust global settings.

Go to Configuration → Content → Emoji Reactions (/admin/config/content/emoji-reactions). Key options include:
- Anonymous reaction window and tracking method (IP, session, or both).
- Flood limit per IP per hour.
- Default layout fallback.
- Whether to allow multiple reactions or reaction changes per user per entity.
- Real-time update polling toggle and interval.
Set permissions.

Go to People → Permissions and configure:
- administer emoji reactions — full admin access (restrict to trusted roles).
- react with emojis — for authenticated users.
- react as anonymous — for anonymous visitors.
- view emoji reaction statistics — for editors or analysts.
- delete own reactions — for users who should be able to undo their own reactions.
View reactions and analytics.

The reaction widget will now appear on any content that has the field. The admin reaction log is available at Reports → Reaction Log (/admin/reports/emoji-reactions/log), and site-wide statistics at Reports → Emoji Reactions Statistics (/admin/reports/emoji-reactions).

For headless or decoupled frontends, enable the REST resources at Configuration → Web services → REST and use the GET /api/emoji-reactions/entity/{entity_type}/{entity_id}/{field_name} and POST /api/emoji-reactions/react endpoints. A CSRF token for session-based calls is available at GET /emoji-reactions/token.

Additional Requirements

Drupal 10.x or 11.x
PHP 8.1 or higher
Drupal core modules: User, Field, Serialization, REST (all included in Drupal core)

No third-party PHP libraries, JavaScript frameworks, or external services are required. The module is entirely self-contained.

Recommended Modules / Libraries

JSON:API —
Recommended for headless Drupal integrations. Use alongside the Emoji Reactions REST API to build fully decoupled React, Vue, or Angular frontends that display and submit reactions.
Simple OAuth —
Useful when your decoupled frontend authenticates users via OAuth 2.0 and needs to post reactions as an authenticated session.
Views Bulk Operations (VBO) —
Can complement the built-in bulk-delete functionality in the Reaction Log with additional bulk action options surfaced through Views.
Layout Builder —
The Emoji Reactions block integrates cleanly with Layout Builder, allowing reactions to be placed anywhere in the layout without requiring the field on the content type.
Paragraphs —
The emoji_reaction field type works on Paragraphs entities, making it straightforward to add reactions to individual content components inside a paragraph-based layout.
A Redis or Memcache cache backend — For high-traffic sites, swapping the cache.emoji_reactions bin from the default database backend to Redis or Memcache improves reaction count retrieval performance significantly.

Similar Projects

Flag —
Flag is the established solution for bookmarking, following, and liking content with binary on/off actions. Emoji Reactions differs by providing a multi-emoji, counted, analytics-backed reaction system with 23 display layouts, real-time updates, Views integration, a REST API, and a detailed log — rather than general-purpose flagging infrastructure.
Like & Dislike —
Provides a simple thumbs-up / thumbs-down widget. Emoji Reactions extends this concept to any number of configurable emojis, adds anonymous support, per-entity analytics, social-media-style display layouts, a REST API, and full Views and block integration.
Voting API —
VotingAPI is a developer-focused framework for recording votes and computing results. It provides no frontend UI or analytics dashboard of its own. Emoji Reactions delivers a complete, production-ready end-to-end solution — storage, UI, analytics, REST API, and admin tools — with no additional modules required.
Rate —
Rate builds on VotingAPI to provide star ratings, thumbs, and fivestar widgets. Emoji Reactions is focused specifically on expressive emoji-based engagement rather than numeric ratings, and brings social-media UX patterns, real-time counts, and decoupled frontend support that Rate does not provide.

Supporting This Module

If Emoji Reactions saves you time on your project, the best way to support continued development is to:

Report bugs and suggest features in the project issue queue.
Contribute patches, test coverage, or documentation improvements.
Post a review on the project page — community ratings help others discover the module.
Help test release candidates against Drupal 10 and 11 minor updates.

When reporting an issue, please include your Drupal core version, PHP version, the steps to reproduce, and any relevant log output from Reports → Recent log messages filtered by the emoji_reactions channel.

Community Documentation

Full installation, configuration, theming, hook, and REST API documentation is available in the README.md file included in the module.
Video walkthroughs, step-by-step tutorials, and example integrations for React, Vue, Angular, and headless Drupal are welcome contributions — please link them in the issue queue and they will be added here.
Example custom module code demonstrating the hook system (awarding points, sending notifications, custom log fields) can be found in the emoji_reactions.api.php file inside the module.

Use Cases

Emoji Reactions is well suited for:

Community and news sites — let readers express nuanced reactions beyond a simple like.
Corporate intranets and knowledge bases — give employees a lightweight way to acknowledge or respond to announcements and articles.
Learning management systems — add reactions to course content, lessons, or forum posts to gauge learner sentiment.
Event and conference sites — allow attendees to react to session descriptions, speakers, or announcements.
Decoupled / headless Drupal applications — consume the REST API from any JavaScript frontend and render reactions using your own components while Drupal handles storage and analytics.
E-commerce product pages — attach reactions to product nodes or review comments to surface social proof signals.