Skip to main content
Compact proof

Rating breakdown widget: your scores by platform

Your overall score above one bar per review platform, each with its own average and review count, so they can be compared at a glance.

Last updated

Customize the Rating BreakdownStart 7-Day Free Trial
  1. 1Step 1Rating Breakdown chosenNot the right fit? Compare every layout side by side.Compare layouts
  2. 2Step 2Customize itColors, fonts and card style, previewed live as you change them.Open the builder
  3. 3Step 3Embed itPaste one snippet into Webflow, Framer, WordPress, Shopify or any site.See how to embed

Customize the Rating Breakdown

Customization

Stars, buttons and links
#7c3aed
Colors & size
Rating star icon color
#f59e0b
Review card fill color
#0c1020
Reviewer name text color
#ffffff
Type & card shape
How large the whole widget renders
Match my page is usually best. The widget takes on your section color
A different arrangement on phones. Switch the preview to Mobile to see it
Font family used for reviews
Card corner border radius
Card border
#1e293b
Badges & Metadata
Show ratingStar rating icons
Show sourceSource platform, e.g. Google, Trustpilot, G2
Delivery
Inline, or floating over your page
Heading & buttons
Show a headingHeader title above widget
Show the overall scoreAn aggregate rating above the reviews
Show a tab per platformOne tab for each review source
Show a call-to-action buttonCall-to-action button
Show a Write a review buttonSends visitors to your review form
Show "Powered by"Footer brand watermark
SAMPLE REVIEWS

LIVE PREVIEW: Rating Breakdown

5.09 reviews, 6 platforms
GoogleGoogle4.91,204
TrustpilotTrustpilot4.8648
G2G24.7412
FacebookFacebook4.9167
Powered byStoryProof
Rating Breakdown

Try this widget on your website

Copy the code below and paste it into your website.

<div data-storyproof-demo data-layout="ratings"></div>
<script async type="text/javascript" src="https://storyproof.io/widget.js"></script>
See guides for
Shopify logoShopify install guideWordPress logoWordPress install guideWix logoWix install guideWebflow logoWebflow install guideSquarespace logoSquarespace install guideFramer logoFramer install guideNotion logoNotion install guideGhost logoGhost install guideWooCommerce logoWooCommerce install guide
Powered byStoryProof

What is the Rating Breakdown widget?

The Rating Breakdown answers the question a single score invites: “according to whom?” It shows your overall average in large type, then a row for each platform with its logo, a bar, its average and how many reviews it is based on.

It is the candid version of a badge. Instead of one flattering number, visitors see where the reviews come from and how many there are on each site, which is what a careful buyer checks anyway.

Where the Rating Breakdown works best

  • Pricing and comparison pages, where the score gets questioned.
  • A trust or reviews page, summarising what customers say across every platform you are reviewed on.
  • A pop-up or a corner card, since it can be delivered either way, not only inline.

When to choose a different layout

  • Choose the Rating Badge when one platform's score is enough and space is tight.
  • Choose the Review Grid when visitors need to read the reviews themselves, not only the numbers.

What the Rating Breakdown can show

Your overall score, stars and total review count, then for each platform its logo, name, bar, average and count. Platform logos can be hidden, and card colour, border and corner radius apply.

Setting it up

  1. 1The breakdown is most convincing when it includes every platform you are reviewed on, not only the best one.
  2. 2Pair it with a Review Grid or Testimonial Wall further down the page for visitors who want to read the reviews behind the numbers.

Rating Breakdown questions

Rating Breakdown or Rating Badge?

The breakdown compares several platforms in one panel. The badge shows a single platform's score in a small pill.

Does it show individual reviews?

No. It summarises scores and counts. Use a layout such as the Review Grid alongside it to show the reviews themselves.

Which platforms can it include?

Platforms you import reviews from, such as Google, G2 and Trustpilot, appear as their own rows.

Related layouts

Further reading: Review widgets: what they are and how to choose one · Compare every layout

1-Line Embed Integration

Embed on Any Platform With One Snippet

No developer skills needed. Copy your widget's two-line snippet, paste it into your site builder, and your testimonials appear wherever you put it.

Works With Every Website Builder:

FramerWebflowWordPressShopifyNext.js / ReactHTML / Tailwind
embed-widget.html
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>
Loads asynchronouslyEdits apply without re-pasting
Previous layoutRating BadgeCompact score chip for a headerNext layoutCompany LogosThe brands your reviewers work for

Every StoryProof widget layout

19 layouts, each with its own page, live preview and setup guide. Pick by where the widget will sit on your site.

Walls and grids

One story at a time

Video

Strips and banners

Compact proof

Let your customers make the case for you

Put your customers’ own words on the pages that sell. Start your 7-day free trial today.

Nothing to install • 7 days free • No credit card required