Skip to main content
Compact proof

Rating badge widget for your website

A platform logo, your average score, the stars and the verified review count, in a pill small enough to sit beside a price or a sign-up button.

Last updated

Customize the Rating BadgeStart 7-Day Free Trial
  1. 1Step 1Rating Badge 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 Badge

Customization

Stars, buttons and links
#7c3aed
Colors & size
Rating star icon color
#f59e0b
Review card fill color
#0c1020
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 Badge

Google logo5.09 reviews
Powered byStoryProof
Rating Badge

Try this widget on your website

Copy the code below and paste it into your website.

<div data-storyproof-demo data-layout="badge"></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 Badge widget?

The Rating Badge is the smallest layout. It shows one score from one source: the platform's logo, your average rating in large type, the stars, and the number of reviews behind it. No quotes and no names.

It is for the moment a visitor is about to commit, when they will not read a review but will glance at a number. Author details are off and the platform logo is on by default for this layout, because the badge is about the score, not a person.

Where the Rating Badge works best

  • Beside a pricing or sign-up button, where a score answers “is this any good?” at a glance.
  • A navbar, header or footer, as a permanent piece of proof on every page.
  • A corner card, since this is one of the layouts that can float in a corner of the page.

When to choose a different layout

  • Choose the Rating Breakdown when you collect reviews on several platforms and want each score shown separately.
  • Choose the Trusted-by Row when you want customer faces next to the score.

What the Rating Badge can show

Platform logo, average score, stars and review count. Card colour, border and corner radius apply, and the platform logo can be switched off.

Setting it up

  1. 1Show the platform your visitors trust most for your kind of business, such as Google for a local service or G2 for software.
  2. 2Match the badge's background to the section it sits in, or set it to transparent.

Rating Badge questions

Rating Badge or Rating Breakdown?

The badge shows one score from one platform in a small pill. The breakdown shows your overall score above one bar per platform, each with its own average and review count.

Can I put the badge in my site header?

Yes. It is compact enough for a navbar, a header or the space beside a button, and it can also float as a small corner card.

Does the badge show individual reviews?

No. It shows the score and the review count only.

Can I show my Google reviews in it?

Yes. You can import reviews from platforms such as Google, G2 and Trustpilot by pasting a link, then show them in any layout.

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 layoutAvatar StripA row of customer faces for a heroNext layoutRating BreakdownStars split out per platform

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

Further reading

All articles

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