Feature
A customisable reviews widget that matches any brand
Templates that look like they belong on someone else's site are the fastest way to erode trust. Reviews Widget gives you seven layouts, full colour control per element, per-device column counts and a curated preset library — so the widget feels like part of your site, not a bolt-on.
Last reviewed by the Reviews Widget product team.
Seven layouts and when to use each
Reviews Widget ships grid, masonry, list, carousel, a two-row scrolling marquee, a floating star badge and review popups. All seven share one review card and one set of design tokens, so switching layout never means restyling — pick the layout that fits the page slot, not the one that fits your palette.
| Layout | Best for | Density | Notable behaviour |
|---|---|---|---|
| Grid | Homepages and landing sections | Up to 4 columns on desktop | Even card heights, balanced look |
| Masonry | Review walls and testimonial pages | Variable heights | No wasted whitespace on uneven review lengths |
| List | Long-form and detail-heavy pages | One per row | Room for photos and owner responses |
| Carousel | Hero and above-the-fold slots | 1–3 per view | Autoplay, loop, one review per slide on mobile |
| Floating star badge | Site-wide trust cue | Compact badge | Opens a full popup with source tabs |
Presets for fast wins
Pick from 14 curated presets — Midnight Indigo, Emerald Trust, Graphite Pro, Clean Slate, Nordic Mist, Deep Ocean, Sunset Coral, Editorial Serif, Neon Noir, Cards and more — shown as colour swatches so you can see each one before applying it. Presets set visual style only; layout and behavioural settings stay independent, so switching palette doesn't reset your carousel or column choices.
Prefer an exact match to your site? Match my website reads the page the widget will live on and fills the colour tokens from your real stylesheet.
Reviewer name formats
Choose how reviewer names appear: full name, first name only, first name with a last initial, initials only, or fully anonymous. Useful when privacy expectations differ by industry, and it keeps long imported names from breaking card layouts.
Colour tokens you can control
Every visual element is a separate token rather than a single accent colour, so the widget can match a brand exactly. Backgrounds support a transparent mode for hero sections, and dark mode can be forced globally or follow each visitor's system preference.
| Element | What you can change |
|---|---|
| Widget background | Colour or fully transparent |
| Review card | Background, text, border, radius, shadow |
| Stars | Filled and empty star colour |
| Header | Background, title colour, subtitle colour, underline accent, custom title and subtitle text |
| Aggregate row | Show or hide, plus its own colour treatment |
| Source chips and badges | Show or hide, colour, placement |
| Buttons | Write-a-review and Load more colours, radius from rounded to square |
Per-device and container responsiveness
Columns, carousel-per-view, mobile text alignment and appearance delays all have desktop, tablet and mobile controls. The widget uses container queries — so it responds to the width of the container you drop it into, not the viewport, which means it lays out correctly inside sidebars, half-columns and modal dialogs too.
Language
One setting translates every label the widget renders — tabs, buttons, dates, the owner-response label and the whole review form — into any of 80+ languages, with right-to-left layouts handled automatically. Details on the widget languages page.
Full carousel controls
Autoplay with a custom speed, loop on/off, three arrow styles (circle, square, minimal), dots on/off, independent per-view counts for desktop, tablet and mobile, and slides-to-scroll. On phones the carousel defaults to one review per slide with padded gutters, so navigation arrows never overlap the review copy.
Accessibility and reduced motion
Customisation shouldn't break usability. Aim for at least 4.5:1 contrast between review text and card background, as WCAG 2.2 AA requires, and keep autoplay slow enough to read — the widget honours prefers-reduced-motion and pauses autoplay on hover and focus.
- Carousel arrows and source tabs are real buttons with visible focus rings and keyboard support.
- Star ratings expose a text equivalent, so the score isn't carried by colour alone.
- Entrance animations and appearance delays are suppressed for visitors who prefer reduced motion.
- Photo lightboxes trap focus and close on Escape.
Header & aggregate rating
Rewrite the header title and subtitle, or hide the aggregate rating row entirely. Every header element has its own colour token — background, title, subtitle and the underline accent — plus a transparency toggle on the widget background for hero sections and coloured page bands.
Word truncation & Load more
Cap every card at a word count so long reviews don't blow out your grid — each truncated card gets its own Load more link that expands inline without reflowing the widget. Add a page-level Load more for longer feeds, plus optional appearance delays for a staggered fade-in on scroll.
Sources & further reading
- WCAG 2.2 quick reference — contrast (minimum) — 4.5:1 body text, 3:1 large text
- MDN — prefers-reduced-motion — respecting motion preferences
- MDN — CSS container queries — layout driven by container width