Testimonial Open Graph Image Template
A testimonial card with a star row, quote, and an avatar attribution.
A testimonial card with a star row, quote, and an avatar attribution.
Search blocks by description or jump to a page.
Every Open Graph image template is included with Basic and Pro. Pick a plan to copy the code, install with the CLI, and download the raw SVG.
Already purchased? Log in
Use the Testimonial template to turn a customer quote into the share card itself, so social proof travels wherever the link goes. It opens with a five star row, sets the quote large in the middle, and closes with an initials avatar, the person's name, and their role, the shape every convincing testimonial takes.
This template is a metadata image route for the Next.js App Router. The file exports size, contentType, and alt values plus a default async function that returns an ImageResponse. When the page is shared, satori converts the JSX into an SVG document, the runtime rasterizes that SVG into a 1200 by 630 PNG, and Next.js serves the result and wires the og:image and twitter:image tags into the page head automatically. The stars are drawn inline as SVG, so they stay crisp at any size the feed renders them.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-testimonial
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a customer story, move it into that route instead, for example app/customers/northwind/opengraph-image.tsx. You can also copy the code from this page straight into your project.
The card renders text with Inter, read from assets/fonts at your project root with node:fs so the font files never ship to the browser. Download the latin woff files for weights 400, 500, 600, and 700 from Fontsource and save them as assets/fonts/inter-latin-400-normal.woff and so on.
The content object holds the brand, the quote, the author, their role, and the two letter initials for the avatar. The quote renders at 44 pixels wrapped in typographic quotation marks; it stays comfortable up to roughly three lines, so trim anything longer or drop the size a few pixels. The star row is fixed at five filled stars drawn by the Star component; edit that component's fill or render fewer stars for a partial score. Swap the initials block for a real avatar if you have one.
satori supports a focused subset of CSS: flexbox layout only, flat colors, and an explicit display: flex on any element with multiple children. Keep those rules in mind if you rework the layout.