Back to blog
Tutorial

How to Add Testimonials to Your Ghost Site

Tamim
April 9, 2026
7 min read

Ghost is built for publishing. It handles newsletters, blog posts, and membership sites with less friction than almost any other platform. What it does not handle is testimonials.

There is no quote component in the Ghost editor. No social proof block. No built-in way to display a curated set of customer replies. If you run a Ghost-powered newsletter landing page or product page and want testimonials, you have to build the solution yourself. If you are also thinking about how to collect testimonials at scale as your audience grows, that is worth reading alongside this guide.

This guide covers three approaches: using Ghost's built-in callout and HTML cards to build static testimonials, building a dedicated testimonials page with custom HTML, and embedding a live carousel using an iframe. Each has specific situations where it is the right call.


Where Testimonials Make Sense on a Ghost Site

Ghost is different from Webflow or Framer. Most Ghost sites are either content-forward publications (blogs, newsletters) or creator membership sites. The typical pages where testimonials appear:

  • The subscription/signup landing page — where visitors decide whether to subscribe to a newsletter or join a membership
  • The About page — building credibility for the creator or publication
  • A dedicated sales page for a course, product, or paid membership tier
  • Individual post pages — for creators selling a specific product through an article

Ghost's Koenig editor (the block-based editor used for pages and posts) is where all three methods get added.


Method 1 — Use the Callout Card for Simple Quote Display

Ghost's Koenig editor has a Callout card that renders a highlighted block with an icon, background color, and text. It was designed for notices and highlights, but it works surprisingly well as a simple testimonial card.

How to use it

  1. In the Ghost editor, type / to open the card menu
  2. Search for Callout and select it
  3. Remove the default emoji icon or replace it with " (quotation marks work visually)
  4. Type the testimonial text
  5. Add the person's name and title below the quote in smaller text (use the callout's text formatting)
  6. Set the background color to a light neutral to differentiate it from your normal content

For multiple testimonials

Create multiple Callout cards in sequence. If you want them side by side, you need to use Ghost's HTML card (Method 2) — the Callout card stacks vertically by default.

When this works

This is the right method when:

  • You want something on the page in under 5 minutes
  • You have 2 to 3 short testimonials that do not need social verification
  • The testimonials are from readers, listeners, or students — not public social media
  • Your Ghost theme handles Callout cards with consistent styling

Where this breaks down

No side-by-side layout. Callout cards stack vertically. A sequence of 5 testimonials becomes a long vertical column, which looks like a changelog, not a social proof section.

No connection to the original source. The testimonial is text you typed. There is no link to an original post, no profile photo, no username. A callout block with a quote is no different from a blockquote — the only proof is your word.

Not a carousel. Readers scroll past it rather than engaging with it. A static list of quotes in callout blocks has low visual impact compared to a scrollable carousel. For a sense of what good testimonial layouts actually look like, browsing some testimonial examples can help you calibrate the bar before you commit to a format.


Method 2 — Build a Testimonial Section with the HTML Card

Ghost's HTML card lets you write raw HTML directly in the editor. This is the most flexible native option — you can build any layout, add custom styles inline, and create a multi-column testimonial grid without touching your theme files.

Building a basic testimonial grid in HTML

Add an HTML card (type /html in the editor) and paste a structure like this:

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0;">

  <div style="background: #f9f9f9; border-radius: 12px; padding: 24px;">
    <p style="font-size: 1rem; line-height: 1.6; margin: 0 0 16px;">"This newsletter is the only one I read every week without fail."</p>
    <p style="font-size: 0.875rem; color: #666; margin: 0;">— Alex M., product manager</p>
  </div>

  <div style="background: #f9f9f9; border-radius: 12px; padding: 24px;">
    <p style="font-size: 1rem; line-height: 1.6; margin: 0 0 16px;">"Switched from three other newsletters to just this one. Worth every penny."</p>
    <p style="font-size: 0.875rem; color: #666; margin: 0;">— Rachel T., founder</p>
  </div>

</div>

Adding a photo

If you have the person's image URL, add it to each card:

<img src="PHOTO_URL" alt="Name" style="width: 48px; height: 48px; border-radius: 50%; margin-bottom: 12px;">

When this works

The HTML card approach is right when:

  • You want full layout control without editing your Ghost theme
  • You have a small, stable set of testimonials (3 to 8) that rarely change
  • You are comfortable with basic HTML and inline CSS
  • You want side-by-side card layout that the Callout card cannot provide

Where this breaks down

Maintenance is entirely manual. Every change means opening the page or post in Ghost's editor, locating the HTML card, editing raw HTML, and republishing. There is no content layer — the testimonials are embedded directly in the page markup.

Mobile responsiveness requires extra work. The grid layout above is desktop-first. On mobile, you need a media query to switch from 2 columns to 1. Inline styles cannot use media queries — you would need a <style> block in your HTML card or a theme-level CSS change.

Still no verification. Same problem as Method 1 — the testimonials are claims, not verifiable proof.


Method 3 — Embed a Live Carousel with an Iframe

The HTML card also accepts <iframe> tags. This lets you embed a fully styled, scrollable testimonial carousel from an external service — rendering real social proof with live profile photos and links to original posts.

How it works with LaunchWall

  1. In LaunchWall, paste the URL of an X post that generated genuine public replies from your audience
  2. LaunchWall fetches all public replies
  3. Select the replies you want to appear in your carousel
  4. Publish and copy the <iframe> embed code
  5. In Ghost, add an HTML card and paste the iframe code directly

The carousel renders in your Ghost page with real X profile photos, usernames, tweet text, and a link back to the original post. Readers who want to verify a testimonial can click through to X and see the actual reply.

Step-by-step for Ghost

  1. Open the Ghost editor for the page or post where you want testimonials
  2. Click the + button to insert a card, or type /
  3. Select HTML from the card list
  4. Paste your LaunchWall iframe embed code into the HTML card
  5. Click outside the card — Ghost will show a preview placeholder in the editor
  6. Preview using Ghost's Preview button (top right) or view the published page to see the rendered carousel

Ghost editor preview behavior

Ghost's editor does not render iframes inline — you will see a gray card with a code icon in the editor view. This is expected. The carousel renders correctly on the published page and in the preview mode. Always check the published output before assuming the embed is broken.

Placement for newsletters and landing pages

For a newsletter landing page, place the testimonial carousel:

For a membership or paid tier page, place it:

  • Near the pricing section
  • In a dedicated "What subscribers say" section between the feature list and the purchase button

Ghost pages support multiple HTML cards, so you can have a static quote or two at the top and a full carousel lower on the page.


Ghost-Specific Considerations

Theme compatibility

Ghost themes control the base styles for your site. An iframe embed inherits no theme styles — it is self-contained. This means the carousel looks the same regardless of your theme, which is a feature: it will not accidentally inherit a dark background or unexpected font from your theme.

The HTML card wrapper element does inherit theme styles. If your theme applies a max-width to content blocks, your carousel will be constrained to that width. To allow the carousel to fill wider than the content column, add a width override in the HTML card:

<div style="width: 100%; max-width: 900px; margin: 0 auto;">
  <!-- your iframe here -->
</div>

Ghost Pro vs self-hosted

The HTML card and iframe embed work identically on Ghost Pro (managed hosting) and self-hosted Ghost instances. There are no platform-specific restrictions on embedding third-party content.

Membership gating

Ghost's membership features let you gate content behind a paywall. Testimonials should almost always be visible to non-members — they exist to convert visitors into subscribers. Make sure the section or page containing your testimonials is set to Public visibility, not Member or Paid.

Email newsletters

Ghost sends posts as email newsletters. <iframe> tags do not render in email clients — they are stripped for security reasons. If you reference your testimonials in an email, link to the published page rather than embedding the carousel in the email body. The Callout card (Method 1) is the only method that renders in Ghost email newsletters.


Which Method Should You Use?

You need something up in 5 minutes and have a few short quotes: Use Callout cards (Method 1). Stack them vertically on the page, link to the original source if you have one.

You want a designed multi-column grid and are comfortable with HTML: Use the HTML card (Method 2). Paste the grid template, fill in your quotes, done.

Your testimonials are public X replies and you want verifiable social proof: Use the iframe embed (Method 3). It is the only method that links back to the real posts and shows real profile photos. For a newsletter or membership landing page where conversions matter, this is the strongest option.

You want both static quotes and live social proof: Combine them. Use a Callout card near the top for one strong subscriber quote, and an embedded carousel lower on the page for the full set of X replies. Ghost pages support both in the same editor.


The Newsletter-Specific Case for Verified Testimonials

Newsletter readers are a skeptical audience. They subscribe to dozens of things, they unsubscribe quickly, and they have seen every "join 12,000 subscribers" claim under the sun. Fake or unverifiable testimonials do not move them.

A real tweet from a real subscriber — with a profile photo, a username they can look up, and a link to the original post — is different. It is the kind of social proof that signals to a prospective subscriber: these are real people saying real things about a real publication.

For a creator or publisher using Ghost, that distinction is the whole game.


LaunchWall is built for the founder or creator who already has social proof on X and wants it on their site today. The $1 trial takes 15 minutes.

Start a 7-day trial for $1 →