Docs Block Reference Reviews

Reviews

A Google-style testimonials panel: a header that references the business's Google profile — the multi-colour Google "G", the business name, the aggregate star rating, the total review count, and "Write a review" / "See all reviews" links — over a static grid of review cards. Each card shows the reviewer's avatar (or a coloured initial), name, gold star rating, date, the review text, and an optional "Read on Google" deep-link.

It is a proof block: static, readable, and visibly tied to Google, so it reads as verified social proof a visitor can go and check. Place it near a call to action. It is pure server-rendered HTML with no animation engine, so it renders identically on the page, in the editor, and in screenshots.

Real reviews only. Populate it with the business's actual Google reviews (owner-entered). Never fabricate testimonials. It is forward-compatible with a live Google feed filling the same list later.

When to use it

  • A social-proof / credibility section, usually near a CTA or pricing
  • Showing a business's real Google rating and its recent reviews
  • A trust panel a visitor is meant to stop, read, and believe

When not to use it

  • A moving, ambient band of quotes as page texture — use Marquee (Testimonial mode)
  • Made-up or placeholder testimonials — don't; this block is for real reviews only
  • A single quote as a design accent — use Text, or a Section with a heading

Reviews vs Marquee testimonial

Two blocks show customer quotes; they are not interchangeable.

  • Reviews — static and verified. The Google header (logo, aggregate

    • rating, "N reviews", action links) is the whole point: it signals these are real, checkable reviews. Everything is visible and readable at once. This is a conversion element you put near a CTA.

  • Marquee (Testimonial mode) — moving and ambient. A continuously drifting

    • strip of short quotes with no header, read at a glance. It is page texture, a decorative "wall of love", not a proof panel.

Pick Reviews when the visitor should read and trust; pick Marquee testimonial when you want a moving quote strip as an accent. Don't add a Google header to the marquee, and don't auto-scroll the Reviews block. See blocks/marquee.

Header

Show header — toggle (default on)

The Google-branded header row: the "G", business name, aggregate rating, count, and the action links. Turn it off for a bare grid of cards.

Business name — text

Shown next to the Google "G". Falls back to the site name if left blank.

Aggregate rating — number (auto-averaged if blank)

The large rating number and its stars. Leave blank to auto-average the card ratings.

Review count — number (auto-counted if blank)

The "N reviews" figure. Leave blank to count the cards.

See all reviews — URL (profile_url)

Links "See all reviews" to the business's Google profile. Hidden if blank.

Write a review — URL (write_url)

Links the "Write a review" button to the Google "leave a review" page. Hidden if blank.

Layout

Columns — 1 to 3 (default 3)

How many cards per row.

Align — Left · Center · Right (default Center)

Alignment of the header and the grid.

Colours

Swatches for the card look:

  • Card (card_bg, default white) — card background.
  • Text (text_color) — reviewer name and review text.
  • Muted (muted_color) — dates and secondary text.
  • Accent (accent_color, Google blue) — links and the "Write a review" button.
  • Star (star_color, Google gold #fbbc04) — the rating stars.
  • Border (border_color) — card border and empty-star colour.

Reviews

The list of review cards. Each card:

  • Name — reviewer name (the avatar shows their initial when no photo).
  • Rating — 1 to 5 stars (the panel offers 5 and 4 only — a testimonials wall shows positives).
  • Date — free text, for example "2 weeks ago" or "March 2026".
  • Text — the review body.
  • Link — optional; becomes a "Read on Google" deep-link to the source review.
  • Avatar — optional; a photo URL (otherwise a coloured initial is drawn).

Blank rows (no name and no text) are dropped automatically.

Element shape

The reviews are stored as a JSON array on the reviews setting:

``json { "type": "reviews", "settings": { "business_name": "Bright Home Services", "profile_url": "https://g.page/bright-home", "write_url": "https://g.page/r/bright-home/review", "show_header": "1", "columns": 3, "align": "center", "accent_color": "#1a73e8", "star_color": "#fbbc04", "reviews": [ { "name": "Sarah M.", "rating": 5, "date": "2 weeks ago", "text": "On time, tidy, and the result looks fantastic.", "url": "" }, { "name": "David L.", "rating": 5, "date": "1 month ago", "text": "Clear pricing up front, no surprises.", "url": "" }, { "name": "Emily R.", "rating": 4, "date": "March 2026", "text": "Second time using them, same great service.", "url": "" } ] } } ``

Per review entry: name, rating (1–5), date, text, url (optional source link), avatar (optional photo URL). The aggregate rating and review_count auto-derive from the cards when left blank.

Per-device overrides

columns and align have separate Tablet and Mobile values, so the editor saves columns_tablet / columns_mobile and align_tablet / align_mobile. Colours and Show header are global. Defaults when unset: tablet columns = min(desktop, 2), mobile columns = 1.

Reveal

The block has no reveal of its own. On a snap / scene-mode section with 3D Reveal on, each card is a decompose sub-unit of the section's own reveal, so the section presets stagger the cards in. On a plain classic-scroll page the cards render flat. Don't add a second, per-block reveal.

Don't

  • Don't fabricate reviews or ship placeholders on a live site — real Google reviews only.
  • Don't set the aggregate rating higher than the cards support — keep it honest.
  • Don't use this for a moving quote ticker — that's Marquee (Testimonial mode).

Related

  • blocks/marquee — Testimonial mode, for a moving ambient quote strip (vs this static verified panel)
  • blocks/section — wraps the block; place Reviews on a section near your CTA
  • blocks/contact — pair a proof panel with a lead form
  • concepts/responsive-overrides — per-device columns and alignment