Ratings widget

FranceThis guide

Spain

A star rating — stars, decimal average and review count — printed by your server into your page. It is the default variant (variant=compact), so you do not need to send variant at all.

See Google's structured data documentation for products for the exact fields it looks for.

Before you integrate

Read Before you start first. The schema mode you pick depends on whether your page already publishes its own Product structured data.

Request

GET https://saz-ssr-server.public.shopadvizor.com/v1/fragment?ean=3175681302679&lang=fr&schema=full&name=Biscuit%20Amande%20Gerbl%C3%A9
Authorization: Basic <your credential>

The response is a self-contained HTML fragment: the widget with its styles, plus a <script type="application/ld+json"> block. Server-side examples for each stack are in Step 1.

Examples

Each example is the fragment exactly as the endpoint returns it, with real product data, saved when these docs were built. Their JSON-LD is removed, so search engines do not index a documentation page as the product's ratings. Each one shows the request that produced it.

Default

Example, with hydrate.js

/v1/fragment?ean=3175681302679

Star colours

The star parameter picks one colour of the closed palette:

gold

The palette default.

Example, with hydrate.js

/v1/fragment?ean=3175681302679&star=gold

Custom CSS

Any colour outside the palette, and the rest of the look, comes from your own stylesheet, through the --sa-* custom properties on the shopadvizor-rating element. Try them here: every control restyles the live widget, and the block underneath is the CSS to paste in your stylesheet — only what differs from the defaults.

Example, with hydrate.js

Stars--sa-star

Empty part of the stars--sa-track

Background--sa-surface

Average--sa-ink

Review count and footer--sa-muted

Border--sa-line

Focus ring — shown when tabbing to the footer link--sa-accent

Corner radius--sa-radius

5px

Font--sa-fontYour page's font (default)Serif — GeorgiaSans-serif — Helvetica / ArialMonospace

Your stylesheet

/* Change a control above: the CSS to paste in your stylesheet appears here. */

The full list of properties is under Styling.

Without JavaScript

The same fragment with JavaScript disabled — what a search engine or an AI crawler reads, and what a visitor sees before hydrate.js loads or if it never does:

Example, JavaScript disabled

The compact rating looks exactly the same without JavaScript: the stars, the average and the count are all in the server-rendered HTML.

Structured data

With schema=full the fragment emits a complete Product node with its aggregateRating.

With schema=rating-only it emits only the rating, hanging from your own Product node's @id:

{ "@context": "https://schema.org",
  "@id": "https://example.com/p/123#product",
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": 4.51,
                       "reviewCount": 3085, "bestRating": 5, "worstRating": 1 } }

With schema=none there is no JSON-LD; fetch the numbers from GET /v1/data and nest them inside your own Product node yourself. See the third option.

The numbers in these examples are illustrative: the real ones change as new ratings arrive.

The average is displayed with two decimals and the locale's decimal separator (4,51 in French); the JSON-LD ratingValue is the same number with a dot (4.51).

JavaScript enhancement

hydrate.js is about 15 KB gzipped. Without it the widget is fully functional and fully indexable, and it looks the same: the compact rating has nothing for it to add. See Step 2.

Styling

The star parameter picks the star colour from a closed palette (gold, blue, orange, white, black), and accent sets the focus ring. Beyond them, override these CSS custom properties from your own stylesheet, on the shopadvizor-rating element:

Property	Default	What it colours
--sa-star	#f5b301	The stars
--sa-track	#e4e6ea	The empty part of the stars
--sa-surface	#fff	The widget background
--sa-ink	#181b20	The average
--sa-muted	#686f79	The review count and the footer
--sa-line	#e9ebee	The widget border
--sa-accent	#3f4754	The focus ring, shown when a visitor reaches the footer link with the keyboard (Tab). The same as the accent parameter
--sa-radius	5px	The corner radius
--sa-font	your page's font	The font: the widget inherits yours unless you set it

shopadvizor-rating {
  --sa-star:    #e31c39;   /* star fill          */
  --sa-surface: #fff;      /* widget background  */
  --sa-ink:     #181b20;   /* average            */
  --sa-radius:  8px;       /* corner radius      */
}

The widget loads no webfont of its own.