Star Rating Display Widget

Show a rating summary such as 4.7 out of 5 from 312 reviews on Google, with fractional stars, a 5-to-1 star breakdown and a link to the review page - using the figures you type, clearly labelled as yours.

Page Components Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/star-rating-display" title="Star Rating Display by A2Z Tools" width="100%" height="345" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Enter the average (0 to 5), the number of reviews, a short source label such as 'on Google' and, optionally, the review page's address and a breakdown with one '5 | 250' line per star level. The average is shown to one decimal and five stars are filled to match: 4.7 gives four full stars and one 70% star, clipped through the CSSOM. If you give only the breakdown, the average and count are worked out from it, sum(stars x count) / sum(count). Bars use whole percentages rounded by the largest-remainder method, so they always add up to exactly 100. Screen readers hear one sentence, 'Rated 4.7 out of 5 from 312 reviews on Google', and each bar reads '5 stars: 250 reviews, 80%'. If your average and your own breakdown disagree by 0.1 or more, the footnote says what the breakdown averages. The footnote always states that the figures come from the site owner and that A2Z does not fetch or verify them. Styles: stars (gold), accent (your brand colour) or a compact badge.

Method

  • Shown rating = round(rating x 10) / 10; star i (0-4) fill = clamp(rating - i, 0, 1)
  • From a breakdown: average = sum(stars x count) / sum(count); count = sum(count)
  • Bar % = largest-remainder rounding of count / total x 100 (floors, then the leftover points go to the largest fractions)
  • Accessible text: 'Rated r out of 5 from n reviews <source>'; stars and bars aria-hidden
  • Disclosure: footnote 'Figures supplied by the site owner ... A2Z Tools does not fetch or verify them'; mismatch note when the breakdown averages differently

Worked examples

Breakdown only

Inputs: 5 | 250, 4 | 44, 3 | 9, 2 | 4, 1 | 5

Result: 4.7 out of 5 from 312 reviews; bars 80%, 14%, 3%, 1%, 2%

(1250 + 176 + 27 + 8 + 5) / 312 = 1466 / 312 = 4.699.

Stated average disagrees

Inputs: Rating 4.9, 312 reviews, same breakdown

Result: Shows 4.9 and adds 'The breakdown itself averages 4.7.'

The publisher's figure is kept; the difference is disclosed.

Unsafe link

Inputs: Source 'on Trustpilot', source URL javascript:alert(1)

Result: Label shown as plain text, no link

Only https, http, mailto and tel links are created.

The figures are the site owner's own. A2Z Tools does not fetch, check or verify ratings or review counts.

Limitations

  • Shows only the figures you type - no live sync with any review platform, and no proof they are accurate.
  • Adds no structured data, so it cannot produce star snippets in search results.
  • A 5-point scale only; 10-point guest scores must be converted (divide by 2) before entering.
  • Individual reviews are not shown - use the Testimonials Widget for quotes.

Where publishers use it

  • A plumber's Wix home page showing its Google rating next to the call button
  • A Shopify store's product page summarising ratings collected by its own review app
  • A dentist's Squarespace site linking a 4.9 rating to the practice's review page
  • A mobile app landing page quoting the App Store rating and review count
  • A hotel's WordPress booking page with the guest-score breakdown from its own survey

Questions

Does A2Z fetch my rating from Google or Trustpilot?

No. The widget only shows the numbers typed into the builder; it never contacts Google, Trustpilot, Facebook or any other review site, and it cannot tell whether the figures are current. Update the embed when your rating changes, and the footnote under the widget says plainly that the figures come from you and are not verified by A2Z.

Will this add review stars to my Google results?

No, the widget injects no Review or AggregateRating structured data. Google's review snippet guidelines say not to aggregate reviews or ratings from other websites, and pages about a business that controls the reviews about itself - directly or through an embedded widget - are ineligible for star snippets. A rating copied from Google onto your own site falls under both.

How are the bar percentages rounded?

With the largest-remainder method, so they always total 100. For 250, 44, 9, 4 and 5 reviews out of 312 the exact shares are 80.13, 14.10, 2.88, 1.28 and 1.60; flooring gives 98, and the two leftover points go to the largest fractions (.88 and .60), giving 80, 14, 3, 1 and 2%.

What if my average does not match the breakdown?

Review sites often compute averages with weighting or over a different period than the counts you can see, so small differences are normal. The widget keeps your stated average but adds 'The breakdown itself averages 4.7.' to the footnote when the two differ by 0.1 or more, so visitors are not misled.

Is the rating readable without seeing the stars?

Yes. The star shapes and bars are hidden from screen readers; a single sentence such as 'Customer rating: Rated 4.7 out of 5 from 312 reviews on Google.' carries the information, and the large number and review count are visible text, so nothing relies on the gold colour.

What do the three styles look like?

stars: a large score tile, gold stars and the breakdown. accent: the same with stars and bars in your accent colour. badge: a compact pill with the score, small stars and the count - good for headers and footers.

Sources

  1. Review snippet structured data - guidelines - Google Search Central . 'Don't aggregate reviews or ratings from other websites'; self-serving reviews (including through embedded widgets) are ineligible for star review features. Updated 2026-09-08; checked 2026-10-01.
  2. FTC's Endorsement Guides: What People Are Asking - US Federal Trade Commission . Advertisers are responsible for not misrepresenting reviews and endorsements.

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 Star Rating Display
https://a2z.tools/embed/star-rating-display

Related widgets

More Page Components widgets →

  • Testimonials Widget

    Page Components Tool New

    Customer quotes as cards, a featured quote, a list or a manual slider, with stars and initials avatars.

    Get code

  • Trust Badge Builder

    Page Components Generator New

    Your own claims - family owned, free estimates, licensed - as clean badges, each marked self-declared.

    Get code

  • Stats Counter

    Marketing Tool New

    An animated band of up to four headline numbers that count up once when they scroll into view.

    Get code

  • Comparison Table

    Page Components Tool New

    Feature-by-feature comparison of 2-6 products with ticks, crosses and words, a sticky first column and grouping.

    Get code

  • FAQ Accordion

    Page Components Tool New

    Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.

    Get code

  • Image Gallery with Lightbox

    Page Components Tool New

    Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.

    Get code

Preview

CustomizeGet code