Product Review Box Widget
Sum up a product review the way magazines do: the product and its photo, your overall score out of 5 or 10 in a ring, a bar for each criterion, the verdict, short pros and cons, and a buy or learn-more button with an honest disclosure when the link earns you money.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="product-review-box"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Choose a 5 or 10 point scale and type your overall score, or list criteria as Criterion | score lines and switch on Overall = average of criteria. Scores must be plain numbers between 0 and the scale; a 12 on a 10-point scale is refused rather than quietly turned into 10, and the builder preview tells you which line was skipped. When averaging is on, the overall score is the sum of the criteria divided by their number, rounded half-up to one decimal - 9, 8.5, 7.5 and 8 make 8.25, shown as 8.3 - and a line under the ring says how the number was reached. The ring and the bars are drawn in your accent colour; screen readers hear Our score: 8.3 out of 10 and each criterion's value out of the scale. The label Our score makes clear this is the publisher's opinion, not an average of customer reviews. The button takes a label and an https address; switch on Sponsored or affiliate link and it gets rel=sponsored noopener, as Google asks for paid links, plus a short commission disclosure above it unless you write your own.
Method
- Score accepted when it is a number with up to 2 decimals and 0 <= score <= scale (5 or 10); otherwise refused
- Overall (average on) = round_half_up(sum(criteria) / count, 1); otherwise the typed score rounded to 1 decimal
- Ring arc = score / scale of the circumference; bar width = criterion / scale x 100%
- CTA: https only; rel = sponsored noopener when sponsored, else noopener; opens in a new tab
- Up to 10 criteria, 5 pros and 5 cons
Worked examples
Overall as the average of criteria
Inputs: scale 10; Comfort | 9, Build quality | 8.5, Storage | 7.5, Value for money | 8; average on
Result: Ring: 8.3 / 10; note: Our score = the average of the 4 criteria scores below, rounded to one decimal
(9 + 8.5 + 7.5 + 8) / 4 = 8.25, rounded half-up to 8.3.
A score above the scale
Inputs: scale 10, score 12
Result: No ring; preview note: The overall score must be a number from 0 to 10.
Out-of-range scores are refused rather than clamped to 10.
An affiliate button
Inputs: ctalabel Check the price, ctaurl https://shop.example/pack?ref=blog, sponsored on
Result: Link with rel="sponsored noopener" and the line: This is an affiliate link: we may earn a commission if you buy, at no extra cost to you.
Paid links are qualified for search engines and disclosed to readers.
Limitations
- One product per box; scales of 5 or 10 only.
- Adds no structured data - keep review markup in your page or SEO plugin.
- The button accepts https addresses only.
Where publishers use it
- An outdoor-gear blog ending each review with a score box and an affiliate button marked as sponsored
- A software review site rating apps on ease of use, features, support and value with criteria bars and an averaged score
- A food writer scoring restaurants out of 5 with a short verdict and a link to the booking page
- A YouTube creator's companion blog post repeating the on-screen verdict in a box readers can skim
Questions
Will this box give my review page stars in Google?
The box itself writes no structured data. Editorial reviews of a product can be eligible for review snippets, but only if your page carries Review markup that matches what readers see - most SEO plugins can add it, with the same score and scale. Keeping markup in one place avoids duplicate or conflicting reviews on the page, which Google may ignore.
Why is a score above the scale refused instead of capped?
Because a capped number would be a different opinion from the one you typed. If you enter 12 on a 10-point scale, the box shows no overall score and the builder preview explains why, so a typo cannot quietly turn into a perfect 10.
How is the average rounded?
Half-up to one decimal, the way people round by hand: 8.25 becomes 8.3 and 4.45 becomes 4.5. The calculation avoids the binary floating-point surprises that make some scripts show 4.4 for 4.45.
Do I need the sponsored setting for affiliate links?
If you earn a commission or were paid for the link, yes. Google asks for rel=sponsored on paid and affiliate links, and the FTC's endorsement guidance expects a clear disclosure near the recommendation. The setting adds both: the rel value and a plain-language disclosure line you can rewrite.
Can I use it for customer ratings instead of my own score?
It is designed for your editorial opinion and labels the number Our score. To show an average of customer reviews you have collected, use Review Grid, whose summary is worked out from the reviews it lists, or Star Rating Display for a rating you report from a review platform.
Sources
- Qualify your outbound links to Google - Google Search Central . rel=sponsored for advertisements, paid placements and affiliate links.
- Review snippet structured data - Google Search Central . Editorial product reviews can qualify when the markup matches visible content.
- FTC's Endorsement Guides: What People Are Asking - US Federal Trade Commission . Disclose material connections such as affiliate commissions clearly and near the recommendation.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Product Review Box https://a2z.tools/embed/product-review-box
<a href="https://a2z.tools/embed/product-review-box">A2Z Tools Product Review Box</a>
[A2Z Tools Product Review Box](https://a2z.tools/embed/product-review-box)
Product Review Box by A2Z Tools - https://a2z.tools/embed/product-review-box
Related widgets
-
Two clear columns of pros and cons with tick and cross icons, an optional title and a bottom line.
-
A wall of love: up to 60 of your reviews in a masonry grid with star filters and an honest average.
-
Your average rating, review count and star breakdown bars, with a link to where the reviews live.
-
A clear affiliate, Amazon Associates or sponsored-post notice for the top of an article, with a policy link.
-
Turn a Place ID or g.page link into a Review us on Google button, card or printable QR card.
-
A printable Scan to review us card for Google, Trustpilot, Yelp, Tripadvisor or Facebook, as PNG or print.
