Star Rating Badge
NewShow 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.
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
- Enter your average rating and number of reviews, and set the text. The preview updates as you go.
- Choose the layout, size and colors.
- Click Copy code.
- 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.liquidjust 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.
Links to your reviews
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.
Related tools
- Logo marquee widget — Show a scrolling strip of client or partner logos.
- Before and after image slider — Compare two photos with a draggable divider.
- Countdown timer widget — Count down to a sale, launch or event on your website.
Further reading
Last updated: