Guide · 6 min read
How to embed a star rating widget on a landing page
The script tag is the easy part. Where you put it, and what your framework does before it runs, is what actually breaks.
One script tag, one target element, no card required.
A star rating widget is a script tag paired with a target element in a page's HTML: the tag reads a profile's rating and review count, then renders them into that element. On a landing page specifically, where it sits above the fold and when it loads both decide whether a visitor ever sees it.
The mistake that isn't the script tag
What people assume
Paste the script tag anywhere on the page and the rating shows up.
What's actually true
The target element has to exist in the DOM before the script runs. A landing page built with a client-side framework can execute the script before its own markup has finished mounting, and the widget renders into an element that isn't there yet.
The embed, step by step
-
Choose where it renders
Above the fold, near the headline or the primary CTA — not in a footer nobody scrolls to on a landing page built to convert in one screen.
-
Add the target element
A container in the HTML with the id or class the script expects. This has to exist in the markup before anything else happens.
-
Add the script tag after the target element
DOM order matters. If the page renders client-side, confirm the container mounts before the script initializes, not the other way around.
-
Set how it loads
Load it deferred so it doesn't compete with the page's main content for the first paint. A rating that appears half a second late beats a page that renders half a second slower.
-
Test before you ship it
Load the page fresh, not from cache. Check the mobile viewport separately from desktop. Confirm the rating actually renders — no console error is not the same thing.
What breaks it
Five symptoms, and what's usually behind each one. None of these are billing problems — SaaSVouch is one of several free options covered in the full cost comparison, so a broken embed is a placement issue, not a plan issue.
| Symptom | Usual cause |
|---|---|
| Nothing renders at all | Target element created after the script already ran |
| Rating flashes, then disappears | A client-side framework re-renders and wipes the container |
| Blocked entirely, silently | A Content-Security-Policy header doesn't allowlist the script's domain |
| Shows on desktop, not mobile | A responsive CSS rule hiding an element it wasn't meant to catch |
| Stale rating shown | The page is served from a cache built before the latest review |
What it costs
There's no price to run arithmetic against: registration has no payment step, as covered in the broader install guide. What this specific page costs is debugging time if the embed goes in wrong — almost always one of the five causes above, not a billing problem.
Questions to answer first
- Is the landing page rendered server-side or client-side? Client-side rendering is where load-order failures happen most.
- Do you control the Content-Security-Policy headers, or does someone else on the team? Confirm before you install, not after it silently fails.
- Is it going above the fold or below? Above the fold needs to load fast; below can defer more without costing you the first impression.
- Do you also want the rating inside Google's own search results, not just on the page itself? That's a separate piece of markup — see the schema requirements for star ratings in search results.
- Do you want more than a star rating, like a broader social-proof block? See how that's different from a rating widget alone before you decide.
Questions people ask
What is a star rating widget?
A script tag paired with a target element in a page's HTML. The script reads a profile's rating and review count and renders them into that element, updating on its own as new reviews arrive.
Where on a landing page should a star rating widget go?
Above the fold, close to the headline or the primary call to action, so it's visible without scrolling. A rating buried below several sections rarely gets read before a visitor decides.
Why does my widget show a blank space where the rating should be?
Almost always because the target element didn't exist yet when the script ran. Check whether your page renders client-side and confirm the container mounts first.
Does a Content-Security-Policy header block review widgets?
It can, and it fails silently — no error banner, just nothing rendering. Confirm the script's domain is allowlisted in the CSP header before assuming the install itself is broken.
Will it work with a single-page app or client-side framework?
Yes, but the target element has to exist before the script initializes, and a re-render can wipe a container that isn't re-created. Test after a route change, not just on first load.
How do I test that it's actually rendering before I ship it?
Load the page fresh, not from a cached version, on both desktop and mobile viewports, and confirm the rating visibly appears. A clean console with no errors doesn't guarantee the widget rendered.
List your product free, then embed the widget
Get the profile live first, then place the tag above the fold using the five steps above.
No pricing page exists at saasvouch.com/pricing and no payment step sits in front of registration, as of this writing.