Try the live rating, likes, and favorites controls below. You can test the basics of how each widget behaves.
Gives your sites Ratings, Likes/Dislikes, and Favorites fields with flexible guest handling, per-entry editor overrides, and front-end template control.
Engagement gives Craft CMS sites Ratings, Likes/Dislikes, and Favorites fields. Built to be ready to go from the start or customizable to exactly the needs of your site.
Full technical documentation is available on this site. Need help or something not working as expect, don't hesitate to contact me!
{{ craft.engagement.render(entry.myRatingFieldHandle) }}
{{ craft.engagement.render(entry.myLikesFieldHandle) }}
{{ craft.engagement.render(entry.myFavoritesFieldHandle) }}Each field type supports:
Control if users need to be logged in and how the widgets work when they are not:
When guests are blocked from interaction:
Override All Renderings and just use the render function in all your templates
<?php
return [
'widgetTemplates' => [
'ratings' => [
'html' => 'engagement/overrides/ratings/html',
'css' => 'engagement/overrides/ratings/css',
'js' => 'engagement/overrides/ratings/js',
],
'likes' => [
'html' => 'engagement/overrides/likes/html',
'css' => 'engagement/overrides/likes/css',
'js' => 'engagement/overrides/likes/js',
],
'favorites' => [
'html' => 'engagement/overrides/favorites/html',
'css' => 'engagement/overrides/favorites/css',
'js' => 'engagement/overrides/favorites/js',
],
],
];Or override per call
{{ craft.engagement.render(entry.myRatingField, {
widgetTemplates: {
html: 'engagement/overrides/ratings/html-v2',
css: 'engagement/overrides/ratings/css-v2',
js: 'engagement/overrides/ratings/js-v2'
}
}) }}Override exactly what you need when you need
Use the Control Panel moderation area to review and manage activity.
Give your site a customizable ratings field
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.
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.
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.
Being a built in field, you can access the properties of the rating for that specific entry anywhere in your templates so you can display the results of your rating field to your users.
Use these Rating field properties in Twig when you need to read current widget configuration, aggregate rating data, or display text/behavior settings in templates. In practice, you’ll usually access them from your field handle (for example, entry.ratingHandle.average) and output only the values you need.
| Setting | Description |
|---|---|
enabled | Whether the rating widget is enabled for this entry. |
id | Aggregate record ID for this entry/field/site context. |
elementId | Craft element ID the rating belongs to. |
fieldId | Craft field ID for this rating field. |
siteId | Site ID for this rating context. |
average | Current average rating value. |
voteCount | Total number of submitted ratings. |
scale | Maximum rating scale (for example, 5). |
icon | Active icon mode (star, heart, thumbs, emoji, customSvg). |
emojiIcon | Emoji character used when icon mode is emoji. |
customSvg | SVG markup used when icon mode is customSvg. |
allowGuestRatings | Whether guests are allowed to submit ratings. |
allowUserRatingChange | Whether users can change an existing rating. |
headingText | Optional text shown above the rating widget. |
clickToRateText | Text shown before the current user has rated. |
yourRatingText | Text shown after the current user has rated. |
percentage | Computed value: average converted to a 0–100 percentage. |
roundedAverage | Computed value: average rounded to one decimal place. |
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.
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.
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.
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.
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.
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.
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.
Default Widget:
A clean, out-of-the-box Like/Dislike widget with clear thumbs controls. You can customize the text directly in the Craft Admin Panel (including heading and button labels), no code required, and optionally allow editors/user groups to manage those same text settings per entry.
Emoji Icon Variation (Pasted Emoji):
This demo uses Emoji icon mode, with emoji copied from a website or elsewhere and pasted into the Like Emoji and Dislike Emoji fields in Craft. You can also 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.
The Likes/Dislikes field settings let you control how the widget looks, behaves, and can be customized by editors. At a high level, you configure the visual style (icon mode and state colors), interaction rules (guest access and whether users can change votes), display text, and optional per-entry override permissions for editorial teams.
The Widget Preview shows a live “Before Interaction” and “After Interaction” example so you can quickly validate icon style, color states, and text settings before saving. It is a visual check only and does not cast real likes/dislikes.
Use Icon Appearance to choose how like/dislike buttons are rendered. Icon Mode supports built-in options (thumbs, emoji, none, and custom SVG). If you select Emoji, set both Like Emoji Icon and Dislike Emoji Icon. If you select Custom SVG, provide SVG markup for both the like and dislike icons. You can also define before/after color states for both buttons.
Default Enabled State determines whether new elements start with the widget enabled. Allow Guest Interactions controls whether non-logged-in visitors can like/dislike. Allow Users to Change Their Vote controls whether users can switch vote direction or remove their vote after interacting.
Text Overrides controls optional messaging around the widget. Text Above Widget appears above the control, while Like Button Text and Dislike Button Text define button labels. These fields support tokenized values such as counts and vote state.
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, icon appearance, icon colors, guest interaction behavior, vote-change behavior, and text override fields. This keeps defaults consistent while allowing controlled flexibility at the content-entry level.
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.
Default Widget:
A clean, out-of-the-box Favorites widget with a simple toggle interaction. You can customize the text directly in the Craft Admin Panel (including heading and button text for favorite/unfavorite states), no code required, and optionally allow editors/user groups to manage those same text settings per entry.
Favorites Customization Options:
You can customize the Favorites widget entirely in Craft field settings, including icon mode, emoji icon (including pasted emoji), custom SVG icon, before/after favorite colors, guest interaction behavior, and top/bottom text behavior. Like the other widget types, these settings can remain admin-only or be selectively granted to editors and specific user groups through override permissions.
Use these Favorites field properties in Twig to read favorite totals, current favorite state, display configuration, and text settings. You’ll usually access them from your field handle (for example, entry.favoritesHandle.favoriteCount) and render only the values needed in your template.
| Setting | Description |
|---|---|
enabled | Whether the favorites widget is enabled for this entry. |
id | Aggregate record ID for this entry/field/site context. |
elementId | Craft element ID this favorites field belongs to. |
fieldId | Craft field ID for this favorites field. |
siteId | Site ID for this favorites context. |
favoriteCount | Total number of favorites for the entry. |
isFavorited | Whether the current user/session has favorited this entry. |
icon | Active icon mode (heart, star, emoji, none, customSvg). |
emojiIcon | Emoji used when icon mode is emoji. |
beforeFavoriteColor | Background/color value used before the entry is favorited. |
afterFavoriteColor | Background/color value used after the entry is favorited. |
customSvg | SVG markup used when icon mode is customSvg. |
allowGuestInteractions | Whether guests can favorite/unfavorite. |
headingText | Optional text shown above the favorites widget. |
favoriteText | Optional button text shown before favoriting. |
unfavoriteText | Optional button text shown after favoriting (for toggle-off state). |
The Favorites field settings let you control how the favorite widget looks, behaves, and can be customized by editors. At a high level, you configure visual style (icon mode and colors), interaction rules (guest access), display text, and optional per-entry override permissions for editorial teams.
The Widget Preview shows a live “Before Interaction” and “After Interaction” example so you can quickly validate icon choice, color states, and text settings before saving. It is a visual check only and does not toggle real favorites.
Use Icon Appearance to choose how the favorite control is rendered. Icon Mode supports built-in options (heart, star, emoji, none, and custom SVG). If you select Emoji, set the Emoji Icon. If you select Custom SVG, paste SVG markup for the icon. You can also configure before/after favorite color states.
Default Enabled State determines whether new elements start with the widget enabled. Allow Guest Interactions controls whether non-logged-in visitors can favorite/unfavorite entries.
Text Overrides controls optional messaging around the widget. Text Above Widget appears above the control, while Favorite Button Text and Unfavorite Button Text define button labels for each state. These fields support tokenized values such as favorite counts and current state.
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, icon appearance, icon colors, guest interaction behavior, and text override fields. This keeps defaults consistent while allowing controlled flexibility at the content-entry level.
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.
The Engagement moderation area gives you a control panel view of rating, like/dislike, and favorite activity across your site. Use it to see which entries are getting interaction, inspect individual votes, and clean up activity when needed.
The overview screen shows recent activity across all three engagement types:
Each moderation tab includes search, sorting, and pagination controls so you can find the entries that need attention.
Open an aggregate row to view the individual activity behind it. Detail pages show the entry, field, totals, and individual rows for each interaction.
For ratings and likes/dislikes, you can see the individual vote value, user, session ID, and created date. For favorites, you can see who favorited the entry, their session ID, and when it happened.
Logged-in activity links back to the Craft user when available. Guest activity is labeled as Guest and includes the session ID used to track the interaction.
This makes moderation useful for both member-only and guest-enabled interaction setups.
On detail pages, you can select individual rows and delete them. After rows are deleted, Engagement recounts the aggregate totals so the entry’s rating, like/dislike, or favorite count stays accurate.
If aggregate totals ever need to be rebuilt, Engagement also includes console recount commands for ratings, likes/dislikes, and favorites. The main use case for this would be if something got corrupted in the database. Not something that should be needed ever, but there if needed.
php craft engagement/recount/rating --all
php craft engagement/recount/like --all
php craft engagement/recount/favorite --allYou can also recount a single aggregate by passing its ID instead of using --all.
Guest & User Interaction
Engagement lets you decide what happens when logged-out visitors try to rate, like, dislike, or favorite content. When guest mode is enabled anyone is allowed to cast a vote. The Plugin uses session id to store the users behavior to prevent duplicate votes
These settings live in the Engagement plugin settings page and apply whenever a guest is not allowed to interact with a widget.
Each field also decides whether guests are allowed to interact at all.
Ratings and Likes/Dislikes can also control whether users are allowed to change their choice later.
If guests are allowed, they can interact normally. If guests are not allowed, Engagement uses the global setting: show a message or redirect them to the login URL.
Engagement lets you query entries by Rating, Likes/Dislikes, and Favorites metrics directly from your field handle on an element query. This keeps queries Craft-native and easy to compose with other entry filters.
Basic pattern:
{% set results = craft.entries()
.myFieldHandle({
/* criteria */
})
.all() %}Each Engagement field handle accepts a criteria object. You can combine Engagement criteria with normal Craft query methods like section, site, orderBy, limit, and relatedTo.
{% set entries = craft.entries()
.section('articles')
.myRatingField({
minAverage: 4,
minVoteCount: 10
})
.limit(12)
.all() %}| Key | Type | Description |
|---|---|---|
| enabled | boolean | Filters by the effective enabled state for that field on each entry. |
| siteId | int | Filters metrics using a specific site context. |
| Key | Type | Description |
|---|---|---|
| minAverage | number | Minimum average rating. |
| maxAverage | number | Maximum average rating. |
| minVoteCount | int | Minimum number of rating votes. |
| maxVoteCount | int | Maximum number of rating votes. |
| hasVotes | boolean | true = voteCount > 0, false = voteCount = 0. |
{% set topRated = craft.entries()
.myRatingField({
minAverage: 4.2,
minVoteCount: 25,
hasVotes: true
})
.all() %}| Key | Type | Description |
|---|---|---|
| minLikes | int | Minimum like count. |
| maxLikes | int | Maximum like count. |
| minDislikes | int | Minimum dislike count. |
| maxDislikes | int | Maximum dislike count. |
| minTotalVotes | int | Minimum total votes (likes + dislikes). |
| maxTotalVotes | int | Maximum total votes (likes + dislikes). |
| totalVotes | int | Exact total votes shorthand. |
| minScore | int | Minimum score (likes - dislikes). |
| maxScore | int | Maximum score (likes - dislikes). |
| score | int | Exact score shorthand. |
{% set controversial = craft.entries()
.myLikesField({
minLikes: 20,
minDislikes: 20,
minTotalVotes: 50
})
.all() %}{% set highlyPositive = craft.entries()
.myLikesField({
minTotalVotes: 30,
minScore: 20
})
.all() %}| Key | Type | Description |
|---|---|---|
| minFavorites | int | Minimum favorite count. |
| maxFavorites | int | Maximum favorite count. |
| hasFavorites | boolean | true = favoriteCount > 0, false = favoriteCount = 0. |
{% set mostSaved = craft.entries()
.myFavoritesField({
minFavorites: 15,
hasFavorites: true
})
.all() %}Use orderBy() with field-handle sort tokens:
ratings: <handle>__average, <handle>__voteCount
likes: <handle>__likes, <handle>__dislikes, <handle>__score, <handle>__totalVotes
favorites: <handle>__count
{% set trending = craft.entries()
.section('news')
.myRatingField({ minVoteCount: 10 })
.orderBy('myRatingField__average desc, postDate desc')
.all() %}{% set mostLiked = craft.entries()
.myLikesField({ minTotalVotes: 25 })
.orderBy('myLikesField__score desc')
.all() %}{% set mostFavorited = craft.entries()
.myFavoritesField({ hasFavorites: true })
.orderBy('myFavoritesField__count desc')
.all() %}