Skip to content
Hazelsong

At a glance · 15 of 23

The rating line layout

The stars first — that same average, rounded to the nearest whole star — then the score itself, then "out of 5" and the number of ratings, on one line with no border and no background, for a page where the figure is the whole point and a box would be in the way. The score sits next to the words that scale it, because "4.6" and "out of 5" are one figure: leading with the score would put the stars between its two halves. It draws nothing at all if no testimonial has a rating — an empty five stars would be a lie by omission, and nothing means nothing: the wall notice and the Hazelsong line go with it rather than being left over an empty space. Like the badge, it reads its average and its count from all the testimonials the widget was given rather than from a narrowed selection of them.

Live — the widget script itself, not a picture of it.

Fit

Where it reads well

Best for
Inline in a sentence, or under a product title.
How many to show
Any.

Embed

Putting it on your page

One tag. The layout is a query string, so changing your mind later does not mean touching the page again.

The tag for this layout
<script src="https://hazelsong.com/widget/YOUR-SLUG.js?template=rating" async></script>
<div id="hazelsong-wall"></div>

Your own slug is in your dashboard, with the tag ready to copy. Works on WordPress, Shopify, Webflow, Squarespace, Framer, Wix, or a file you wrote by hand — see where the tag goes on each one. Add &theme=dark for a dark page, or &tag=onboarding to show only the testimonials you gave that label — the label is one you added in your dashboard, and the narrowing is done on the server, so the page never receives the rest.

Put the rating line on your page

All 23 layouts are on every plan, on as many pages as you like.