Skip to main content
One story at a time

Quote Spotlight: a single testimonial quote widget

One sentence from a customer in large editorial type, for the pages where a single line carries the argument.

Last updated

Customize the Quote SpotlightStart 7-Day Free Trial
  1. 1Step 1Quote Spotlight chosenNot the right fit? Compare every layout side by side.Compare layouts
  2. 2Step 2Customize itColors, fonts and card style, previewed live as you change them.Open the builder
  3. 3Step 3Embed itPaste one snippet into Webflow, Framer, WordPress, Shopify or any site.See how to embed

Customize the Quote Spotlight

Customization

Stars, buttons and links
#7c3aed
Colors & size
Rating star icon color
#f59e0b
Reviewer name text color
#ffffff
Quote content text color
#e2e8f0
Type & card shape
How large the whole widget renders
Match my page is usually best. The widget takes on your section color
A different arrangement on phones. Switch the preview to Mobile to see it
Font family used for reviews
Author & Identity
Show avatarProfile photo icon
Show authorFull name of reviewer
Show job title and companyJob position and company name
Show first names onlyTruncates last names, e.g. Jamie W.
Badges & Metadata
Show ratingStar rating icons
Show sourceSource platform, e.g. Google, Trustpilot, G2
Delivery
Inline, or floating over your page
Motion
Advance automaticallyMoves on without a click
Show arrowsPrevious and next buttons
Show dotsOne dot per review
Text & Media
Cuts the quote and offers the rest behind a link
Heading & buttons
Show a headingHeader title above widget
Show the overall scoreAn aggregate rating above the reviews
Show a tab per platformOne tab for each review source
Show a call-to-action buttonCall-to-action button
Show a Write a review buttonSends visitors to your review form
Show "Powered by"Footer brand watermark
SAMPLE REVIEWS

LIVE PREVIEW: Quote Spotlight

We put the review wall under our pricing table and prospects quote the reviews back to us on calls.
Jamie Whitfield
Jamie Whitfield
Founder & CEO @ Northbeam Studio
Google logoReview from Google
Powered byStoryProof
Quote Spotlight

Try this widget on your website

Copy the code below and paste it into your website.

<div data-storyproof-demo data-layout="quote"></div>
<script async type="text/javascript" src="https://storyproof.io/widget.js"></script>
See guides for
Shopify logoShopify install guideWordPress logoWordPress install guideWix logoWix install guideWebflow logoWebflow install guideSquarespace logoSquarespace install guideFramer logoFramer install guideNotion logoNotion install guideGhost logoGhost install guideWooCommerce logoWooCommerce install guide
Powered byStoryProof

What is the Quote Spotlight widget?

Quote Spotlight sets one review as a large editorial pull quote, with the reviewer's name and photo underneath. There are no photos or video from the review and, by default, no stars, so it reads like a line from your own page rather than a review card dropped into it.

It rotates through your reviews, with arrows, dots and autoplay if you want them. Truncation is off by default for this layout, because a pull quote should be read whole.

Where the Quote Spotlight works best

  • Pricing pages, beside the plan table, where one sentence about value does more than a paragraph.
  • About and founder pages, in the flow of a story you are already telling.
  • Under a hero headline, as an understated line of proof that matches your type.

When to choose a different layout

  • Choose the Full-width Slider when you want stars and the review's photos or video on every slide.
  • Choose the Featured Review when a longer review needs room, with more listed beside it.

What the Quote Spotlight can show

The review text, the reviewer's name, photo, job title and company, and the platform badge. Star ratings are available but start switched off, and card colour, border and corner radius can frame the quote if you want a panel behind it.

Setting it up

  1. 1Choose short reviews. A pull quote works when it fits in two or three lines at large size.
  2. 2Use the size setting to bring the quote in line with the rest of your page's type.
  3. 3It can also be delivered as a centred pop-up or a corner card.

Quote Spotlight questions

Why are star ratings off by default?

A pull quote is editorial. Stars turn it back into a review card, so they start hidden. Switch them on if you want them.

Can Quote Spotlight show more than one review?

Yes, one at a time. It rotates through your reviews with autoplay, arrows or dots.

Will it match my site's fonts?

By default the widget inherits your page's font. You can also choose a system, serif, monospace, rounded or humanist font stack, all of which use fonts already on the visitor's device.

Related layouts

Further reading: Review widgets: what they are and how to choose one · Compare every layout

1-Line Embed Integration

Embed on Any Platform With One Snippet

No developer skills needed. Copy your widget's two-line snippet, paste it into your site builder, and your testimonials appear wherever you put it.

Works With Every Website Builder:

FramerWebflowWordPressShopifyNext.js / ReactHTML / Tailwind
embed-widget.html
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>
Loads asynchronouslyEdits apply without re-pasting
Previous layoutFull-width SliderOne review at a time, edge to edgeNext layoutFlip CardPortrait cards that flip on hover to reveal the review

Every StoryProof widget layout

19 layouts, each with its own page, live preview and setup guide. Pick by where the widget will sit on your site.

Walls and grids

One story at a time

Video

Strips and banners

Compact proof

Let your customers make the case for you

Put your customers’ own words on the pages that sell. Start your 7-day free trial today.

Nothing to install • 7 days free • No credit card required