--- title: "Testimonial widget designs — all eleven, rendered" description: "Every Testymo widget design rendered in full: wall, grid, list, carousel, marquee, spotlight, quote, single, avatars, rating and badge — plus a live embed." url: https://testymo.com/examples --- The designs # Eleven testimonial widget designs Every Testymo widget is the same one-line embed; the design decides what it draws. Eleven of them ship, and this page renders all eleven — from a wall that deserves a page of its own to a rating line that fits inside a header. Each one below says when it earns its place and what it costs you. No design demands a particular field. Each draws whichever slots your form fills — the stars, the quote, the face, the name, the byline — and quietly omits the rest. So the question is never which design is best, it is which one fits this spot on this page. Below, one design at a time: what it draws, when it earns its place, what it costs you. Where those spots are in the first place — which parts of a page carry the doubt, and what belongs at each — is the subject of [how to display testimonials on your website](https://testymo.com/blog/how-to-display-testimonials), and the same eleven are sorted by position rather than by design on [social proof sections](https://testymo.com/social-proof-examples). [Wall](#wall)[Grid](#grid)[List](#list)[Carousel](#carousel)[Marquee](#marquee)[Spotlight](#spotlight)[Quote](#quote)[Single](#single)[Avatars](#avatars)[Rating](#rating)[Badge](#badge) [Live embed](#live) 01 ## Wall Masonry columns, every approved quote at once. The homepage workhorse. - **Use it when** — You have nine or more quotes worth reading and a page whose job is volume — a dedicated testimonials page, or the foot of a long landing page after the argument has been made. - **What it costs** — It needs inventory. Five cards read as a struggle to fill the space, and one vague “great service” discounts the specific quotes beside it. Every quote ships as text, so a wall of thirty weighs thirty quotes. Draws · Stars · quote · photo · name · byline > They rebuilt our checkout in a week and conversions doubled. I keep waiting for the catch. JP June Park COO · Fernwell > Quietly the best agency we have worked with — no theatrics, no re-scoping, just the thing we asked for, early. AS Amrit Sahani Founder · Loam > We put the widget on the pricing page on a Tuesday. By Friday our sales calls had stopped opening with 'so who else uses this?' DW Dee Whitfield Head of Revenue · Halcyon Labs > Worth every penny, twice over. LN Lena Novak Owner · Studio Novak > I sent the link on a Monday and had eleven testimonials by Wednesday. Previously that was a quarter of chasing people on email. MT Marco Tarantino Marketing Lead · Brightpost > The approval step is the whole product for me. Nothing reaches our homepage that I have not read twice. PN Priya Nandakumar Brand Director · Solstice > Our customers are builders. They will not sign up for a portal to say something nice. One link, three questions, done — that is the only version of this that works. TR Tomas Reinholt Ops Lead · Brindle > Signed for a month. Stayed three years. Make of that what you will. IS Ivy Sandoval CEO · Northbank > The form looks like our site. Customers assume we built it, which is exactly the point — nobody wants to be routed to a survey vendor mid-compliment. HA Hana Aoki Design Lead · Meridian Type 02 ## Grid Even columns, equal cards, ruthless order. - **Use it when** — Your quotes run to roughly the same length and the surrounding page is already on a grid — a features page, a case-study index, anywhere tidiness beats texture. - **What it costs** — Equal cards mean the longest quote sets the height of its whole row, so one outlier leaves white space in every neighbour. Trim it or move it to a spotlight. Draws · Stars · quote · photo · name · byline > Installed it on Webflow by pasting one line. My developer was annoyed at how little there was to do. FA Femi Adeyemi Founder · Two Rivers > We run four brands off one account and each one's wall looks like it was designed for it. SM Sofia Marchetti Group Marketing · Ardent Group > Good work overall, though the kickoff ran long and I would have liked the first draft a week earlier. RH Reuben Hale Product Manager · Cobbler > The star average on our pricing page went from a claim to a number. It moved trial-to-paid more than any copy change we tried that quarter. AB Ana Beltrán Growth · Ledgerline > Three questions. My customers finish it in the car park. GO Grace Okonkwo Practice Owner · Fieldhouse Dental > I edited the form four times before I liked it. Every change was a version I could read, and the old answers still line up with the questions that asked them. CR Callum Reid Head of CX · Piedmont 03 ## List One per row, stacked, capped at a readable measure. - **Use it when** — The quotes are long and deserve to be read in order — a story-shaped page, a narrow column, or a layout that would collapse to one column on a phone anyway. - **What it costs** — Vertical space, honestly spent. Three long quotes is most of a screen, and a reader who is scanning rather than reading will pass all of it. Draws · Stars · quote · photo · name · byline > The follow-up alone deserves five stars. NH Nina Halvorsen Operations · Kestrel Freight > We had 240 testimonials sitting in a spreadsheet doing nothing. Now they are a wall, a carousel and a badge, and I changed the shape twice without touching the site. YD Yusuf Demir Web Lead · Anvil & Co > I have already sent three friends. That is not a review, that is a confession. BL Bea Lindqvist Illustrator · Freelance 04 ## Carousel One at a time, arrows and dots, room for long quotes. - **Use it when** — Space is tight and you have several quotes that are genuinely equal. It advances on its own every six seconds, with arrows and dots for a reader who wants to move faster than that. - **What it costs** — Almost nobody advances past the first slide, so treat everything behind it as a bonus and never as proof the page depends on. Put your best quote first. Draws · Stars · quote · photo · name · byline > The photo field was the surprise. Faces on a wall read completely differently to initials — people stop scrolling. OB Owen Blackwood Creative Director · Harrow Studio 05 ## Marquee An endless horizontal run that pauses on hover. - **Use it when** — A full-width strip between two sections, where the movement earns a glance and no single quote has to carry anything. - **What it costs** — Motion, which is attention you are spending rather than earning. Nothing in it can be depended on being read — it pauses under the pointer, and that is the only way to finish a long quote. Draws · Stars · quote · photo · name · byline > They just get it. RD Rafael Duarte CTO · Solstice > Public in one click. No redeploy. MO Margaret Oyelaran Comms · Northbank > Demo page up 18%. TB Theo Brandt Head of Growth · Halcyon Labs > It loads before our hero image does. WZ Wei Zhang Frontend · Ledgerline > Ask at the end, not six months later. FL Freya Lindholm Studio Manager · Harrow Studio > Two unprompted checkout compliments. IF Isabel Ferreira Ecommerce · Two Rivers 06 ## Spotlight One quote, oversized, centred, with the face beneath it. - **Use it when** — One testimonial is specific enough to carry a page on its own — a number, a before-and-after, a named doubt that got resolved. - **What it costs** — Every bit of the weight rests on one voice at a time — give it several and it rotates through them on a timer, so every quote you point at it has to be able to carry the page alone. Generic praise set at this size is embarrassing in a way it never is inside a wall. Draws · Stars · quote · photo · name · byline > The star average on our pricing page went from a claim to a number. It moved trial-to-paid more than any copy change we tried that quarter. AB Ana Beltrán Growth · Ledgerline 07 ## Quote A pull-quote block with no card around it. - **Use it when** — Mid-article or mid-page, where a bordered box would read as an advert. It sits in the type rather than on top of it. - **What it costs** — No frame means no separation — it needs air above and below, and it disappears entirely if you drop it into a busy section. Like the spotlight it rotates once you give it more than one quote, which is movement arriving mid-paragraph: a second chance on a slow page, an interruption on a dense one. Draws · Stars · quote · photo · name · byline > Our conversion rate on the demo page went up 18% the month we added the wall. I cannot prove causation and I do not care. TB Theo Brandt Head of Growth · Halcyon Labs 08 ## Single Exactly one card, pinned. - **Use it when** — A sidebar, a footer, or the space beside a pricing table: one quote chosen to answer the objection that particular spot creates. - **What it costs** — It is only as good as the match. A quote about fast onboarding sitting beside a price is decoration, not proof. Draws · Stars · quote · photo · name · byline > The approval step is the whole product for me. Nothing reaches our homepage that I have not read twice. PN Priya Nandakumar Brand Director · Solstice 09 ## Avatars Stacked faces, a star line and a count. Pure proof, no words. - **Use it when** — Under a headline or beside a signup button — reassurance in one line, for a place where nobody is going to stop and read. - **What it costs** — No substance on its own, and it wants real faces: without a photo field it falls back to initials, which reassures less. Draws · Stars · photo · name JP AS DW LN MT PN TR IS Loved by 128 people 10 ## Rating The aggregate alone: average, stars, how many people said so. - **Use it when** — The top of a pricing page, a header, a checkout step — anywhere a number does the work a paragraph cannot. - **What it costs** — It draws no per-person content at all — no words, no faces — which makes it the one design a photo can never reach. Avatars, above, at least shows you who; this shows you only how many. And the number needs a denominator worth printing: at low counts it says less than a single good quote would. Draws · Stars only 4.8 / 5 based on 128 reviews 11 ## Badge A floating bubble that follows the page, rotating through your quotes. - **Use it when** — You want proof present on every screen of a site without giving it a section of its own. - **What it costs** — It is always on screen, which makes it the easiest of the eleven to resent. It rotates on a timer, so no single quote in it is guaranteed to be seen. Draws · Stars · quote · photo · name TR Our customers are builders. They will not sign up for a portal to say something nice. One link, three questions, done — that is the only version of this that works. Tomas Reinholt Not a drawing ## One line, actually running The eleven specimens above are faithful stills — same layouts, same neutral palette the real runtime ships, drawn in the page so they weigh nothing. This one is not a still. The wall below this paragraph is the actual embed, put here the way you would put it on your own site: That is the whole installation. One request to one origin — 16.7 KB of JavaScript, about 6 KB over the wire — with no framework, no cookies, no third-party calls and nothing to configure. That figure covers the demo widget's eight quotes. The testimonials ride inside the script rather than arriving in a second request, so a wall carrying thirty of them weighs thirty quotes' worth of text — measure the embed you paste in, not this one. The faces are lazy-loaded, so they cost nothing until the section they sit in comes near the screen, and the widget renders inside its own shadow root: this page's styling cannot reach into it and its styling cannot leak out. It is rendering exactly as a free account's embed would, footer link and all. How we measure that, and what the numbers mean for your page, is in [do testimonial widgets slow down your website](https://testymo.com/blog/testimonial-widget-page-speed). Pick a design in the editor, change it whenever you like, and the script tag on your site never changes. Collecting the quotes that fill it is the harder half — [how to ask for a testimonial](https://testymo.com/blog/how-to-ask-for-a-testimonial) is where that starts. [Start collecting →](https://testymo.com/app)