Overview

Demo

Default Widget:

A clean, out-of-the-box 5-star rating widget with “Click to rate” text. You can customize the top and bottom text directly in the Craft Admin Panel (including before/after rating messages), no code required, and optionally allow editors/user groups to manage those same text settings per entry.

Click to rate

Extended Scale Widget (10-Star Rating)
A version of the rating widget that uses a larger scale (for example, 10 instead of 5) so users can give more granular scores. This is configured entirely in Craft field settings, and the same scale/behavior controls can be delegated to editors or specific user groups if you enable the related override permissions.

Widget with a scale of 10
Click to rate

Icon Style Variations (Stars, Hearts, Emoji)
This demo uses the Emoji icon mode only, with an emoji copied from a website or elsewhere and pasted into the Emoji field in Craft. It is a simple no-code way to personalize the widget style in the admin panel, and that same icon/text configuration access can be granted to editors or selected user groups.

Pick any emoji you want
Or even a custom svg

 

Data model and metrics

Field settings and Customization

Rating Field Settings

The Rating field settings let you control how ratings look, behave, and can be customized by editors. At a high level, you configure the visual style (icon mode and scale), interaction rules (guest access and whether users can change ratings), display text, and optional per-entry override permissions for editorial teams.

Widget Preview

The Widget Preview shows a live “Before Rating” and “After Rating” example so you can quickly validate your icon choice, scale, and text settings before saving. It is a visual check only and does not save or cast real ratings.

Icon Appearance

Use Icon Appearance to choose how each rating step is rendered. Icon Mode supports built-in options (such as star, heart, thumbs, emoji, and custom SVG). If you select Emoji, set the Emoji Icon. If you select Custom SVG, paste one SVG icon in Custom SVG Markup; the widget repeats that icon across the configured scale.

Rating Icon Appearance

Rating Behavior

Scale controls the number of rating steps shown (for example, 5 creates a 1–5 rating). Default Enabled State determines whether new elements start with the widget enabled. Allow Guest Ratings controls whether non-logged-in visitors can rate. Allow Users to Change Their Rating controls whether a user can update a previously submitted rating.

Rating Behavior

Text Overrides

Text Overrides controls the optional messages around the widget. Text Above Widget appears above the icons, Text Below Widget (Before Rating) appears when no user rating exists yet, and Text Below Widget (After Rating) appears after a rating is submitted. These fields support rating tokens such as user rating, vote count, and average values.

Rating Text Overrides

Editor Overrides

Allow Editor Overrides is the master switch for per-entry customization. When enabled, you can grant granular permissions for what editors may change per entry: widget enabled state, preview visibility, scale, icon appearance, guest-rating behavior, user rating-change behavior, and each text override field. This lets developers keep defaults centralized while allowing controlled flexibility at the content-entry level.

Rating Editor Overrides

 

Template Overrides

Engagement’s Ratings, Likes/Dislikes, and Favorites widgets are fully customizable. For each widget type, you can override the Twig/HTML, CSS, and JavaScript independently, either site-wide or per template/render call, so you can keep a global default while tailoring specific experiences where needed. Full template override details are available here: Template Overrides Documentation.