Star Rating Badge

New

Show your average rating and review count as a neat badge. Use a card, an inline line under a headline or button, or a small badge floating in a corner. Enter your real numbers, link to your reviews page and copy the code. The badge is plain HTML and CSS, with no JavaScript and nothing loaded from xorbin.com.

Live preview
Embed code

Everything happens in your browser. The code is self-contained: it doesn't load anything from xorbin.com and doesn't track your visitors. The share link keeps your settings in the part of the address after #, which is never sent to a server.

How to add the star rating badge to your website

  1. Enter your average rating and number of reviews, and set the text. The preview updates as you go.
  2. Choose the layout, size and colors.
  3. Click Copy code.
  4. Paste it into your page as HTML, where the badge should appear. A floating badge positions itself, so it can go anywhere, including your site-wide footer code.
  • WordPress: add a Custom HTML block and paste the code. For every page, use a header and footer code plugin or your theme's footer.
  • Shopify: add a Custom Liquid section in the theme editor. For every page, paste it into theme.liquid just before </body>.
  • Wix: use Embed code → Embed HTML. Wix shows embeds inside a frame, so for a floating badge use Settings → Custom code (body end) instead.
  • Squarespace: add a Code block. For every page, use Code injection → Footer.
  • Webflow: drag in an Embed element. For every page, use Site settings → Custom code → Footer.
  • Plain HTML: paste the code where the badge should appear, or just before </body>.

To come back to your design later, click Copy share link and save the link. Opening it restores every setting.

Features

Accurate stars

Partial stars show the exact score, so 4.7 looks different from 4.5.

Three layouts

A card, an inline line under a headline or button, or a floating corner badge.

Point the badge at your reviews page so visitors can read the reviews themselves.

Optional review markup

Add AggregateRating JSON-LD for a product, app, course or other item the page is about.

Using review markup correctly

Search engines can show stars next to a page when it has AggregateRating markup, but only if the rating is real and about the item on that page. Keep these rules in mind:

  • Use the markup only on the page about the rated item, not on every page of your site.
  • The numbers must match the reviews visitors can see or reach from the page.
  • Google doesn't show stars for reviews a business collects about itself, so Local business and Organization rarely get stars.
  • Some types need more properties for rich results. For example, Google expects a software app to also have a price and an operating system. Check your page with Google's Rich Results Test.

The markup is left out while the number of reviews is 0.

Frequently asked questions

Does it pull my reviews automatically?

No. You enter the score and count yourself, which keeps the badge fast and free of outside requests. Update the numbers when they change.

Will the markup give me stars in Google?

It can for supported types such as products, software apps, courses, books and recipes, when the reviews are real and shown on the page. Google decides whether to show them, and doesn't show stars for reviews a business collects about itself.

Can I use a review platform's name?

You can write any source text, such as "Verified customer reviews". If you mention a platform, make sure the score matches what it shows, and link to your profile there.

Does the floating badge cover my content?

It sits in a bottom corner with a small offset, like a chat button. Choose the corner that doesn't clash with other floating elements, such as a chat or cookie banner.

Can I remove the Xorbin credit?

Yes. Turn off the credit link under Credit before you copy the code. The floating badge never has one.

Further reading

Last updated:

© 2008–2026 XORBIN.COM. All rights reserved.