Koeコエ

How to Embed Testimonials on Your Website (5 Methods)

·28 min read·
testimonialsweb designconversion optimizationsocial proofwidgets

How to Embed Testimonials on Your Website: 5 Methods That Work

Embedding testimonials on your website is one of the highest-ROI changes you can make to an existing site. Research from Spiegel Research Center found that displaying reviews can increase conversion rates by up to 270%. Yet most websites either skip testimonials entirely or bury them where visitors rarely look.

This guide covers five concrete methods to add testimonials to your website, the display formats that convert best, where to place them for maximum impact, performance considerations, and structured data markup to capture additional SEO value.

A dedicated testimonial platform is the fastest path from "collecting testimonials" to "displaying them live on your site." These tools handle storage, moderation, and rendering so you only need to paste one code snippet.

How Koe's Embed Widget Works

Koe generates a lightweight embed snippet for each widget you configure. You choose a display format — carousel, wall of love, or single card — then copy two lines of HTML into your page.

<div data-koe-widget="WIDGET_ID"></div>
<script src="https://koecollect.com/embed.js" async></script>

That is the entire integration. The script loads asynchronously (no render-blocking), fetches only approved testimonials for your widget, and renders them in the format you selected. When you collect a new testimonial and approve it in your Koe dashboard, it appears in the widget automatically — no code changes required.

Koe supports three widget types:

  • Carousel — Displays one testimonial at a time with auto-advance and manual controls. Ideal when page space is limited or you want each testimonial to receive full attention.
  • Wall of Love — A masonry grid showing multiple testimonials simultaneously. Visually compelling and well-suited to SaaS landing pages.
  • Card — A single featured testimonial, useful for placing a targeted quote next to a specific feature or pricing tier.

Other tools in this category include Senja and Testimonial.to, both of which follow a similar embed-snippet model. The main differences come down to pricing, collected formats (video support, star ratings), and design customization depth.

Why Widgets Beat Static HTML for Ongoing Sites

With a widget approach, your testimonials stay fresh without touching code. The trade-off is a small external script dependency. For sites where performance is paramount, choose a platform whose embed script uses async loading and lazy renders below the fold — Koe's embed.js does both.

Method 2: WordPress Plugins

If your site runs on WordPress, plugins give you a GUI-driven way to display testimonials without writing code.

Popular options:

  • Strong Testimonials — Free tier available, shortcode and block support, multiple display modes.
  • WP Testimonials Widget — Lightweight, sidebar-widget focused.
  • Real Testimonials — Schema markup built in, useful for SEO.

A typical WordPress shortcode embed looks like this:

[testimonials style="grid" count="6" category="saas-customers"]

Plugins are practical when your site is already on WordPress and you manage testimonials directly in the CMS. The downside: plugin quality varies, and poorly coded plugins can slow your site's Core Web Vitals scores. Always test Largest Contentful Paint (LCP) before and after installing a testimonial plugin.

Method 3: Manual HTML and CSS

For complete design control — or when you have a small, stable set of testimonials — hardcoding them directly in HTML is perfectly valid. This approach carries zero external dependencies and renders instantly.

Semantic HTML for a Single Testimonial

<figure class="testimonial">
  <blockquote>
    <p>"Switching to this tool cut our onboarding time from two weeks to three days. The ROI was visible within the first month."</p>
  </blockquote>
  <figcaption>
    <img src="/images/testimonials/sarah-chen.jpg" alt="Sarah Chen" width="48" height="48" loading="lazy">
    <div>
      <strong>Sarah Chen</strong>
      <span>Head of Operations, Meridian Labs</span>
    </div>
  </figcaption>
</figure>

CSS Grid Layout for a Testimonial Wall

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.testimonial {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 0;
}

.testimonial blockquote {
  margin: 0 0 1rem;
  font-style: italic;
  color: #374151;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial figcaption img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

Manual HTML is best when you have five or fewer evergreen testimonials. When your testimonial library grows, maintaining hardcoded HTML becomes tedious — that is when switching to a widget pays off.

For more on what makes a testimonial compelling at the copy level, see customer testimonial examples.

Method 4: JavaScript Widget (Custom-Built)

If you need testimonials pulled from your own API — for example, from a database of customer submissions — you can build a lightweight JavaScript widget without a third-party dependency.

Minimal Vanilla JS Fetch-and-Render Example

(function () {
  const container = document.getElementById('testimonial-widget');
  if (!container) return;

  fetch('/api/testimonials?status=approved&limit=6')
    .then(function (res) { return res.json(); })
    .then(function (data) {
      const html = data.testimonials.map(function (t) {
        return `
          <figure class="testimonial">
            <blockquote><p>${escapeHtml(t.text)}</p></blockquote>
            <figcaption>
              <strong>${escapeHtml(t.name)}</strong>
              <span>${escapeHtml(t.company)}</span>
            </figcaption>
          </figure>
        `;
      }).join('');
      container.innerHTML = html;
    })
    .catch(function () {
      container.style.display = 'none';
    });

  function escapeHtml(str) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
  }
})();

Always escape user-generated content before inserting it into the DOM. The example above uses a text node approach to prevent XSS.

Method 5: CMS Integrations (Webflow, Squarespace, Wix)

No-code and low-code CMSes have their own integration paths.

Webflow

Webflow's custom code embed (available on paid plans) accepts raw HTML. Paste the Koe widget snippet — or any other embed snippet — directly into an Embed component. For a native Webflow approach, use the CMS Collections feature to store testimonials as collection items and display them via Collection List components.

Squarespace

Squarespace supports code blocks in most templates. Navigate to the page editor, add a Code Block element, and paste your embed snippet. Note that JavaScript execution is restricted on the free plan — you need a paid Squarespace subscription for the widget script to run.

Wix

Wix provides an HTML iframe widget via the Wix Editor. For a standard JavaScript embed, use the Velo by Wix (formerly Wix Code) custom code feature under Site Settings > Custom Code. Set the script to load on "All Pages" or a specific page.

Display Format Options

Choosing the right display format matters as much as choosing the right method.

A carousel cycles through testimonials with prev/next controls or auto-advance. Advantages: space-efficient, works well above the fold. Disadvantage: visitors may not click through, meaning they only see the first testimonial. Mitigate this by making the first testimonial your strongest and showing a partial peek of the next card to signal scrollability.

Wall of Love (Masonry Grid)

Shows many testimonials at once in a Pinterest-style layout. This format communicates volume — "look how many people love this product." It works well on dedicated testimonial pages and for products with large communities. For more on building dedicated pages, see testimonial page design best practices.

One large testimonial with the customer's photo, name, title, and company. Use this format when you have an exceptionally quotable testimonial from a recognizable name or brand. Place it near a pricing section or CTA button for maximum impact.

Slider

Similar to a carousel but typically shows multiple testimonials side by side at wider breakpoints. Useful on wide-screen homepage sections. Ensure touch swipe works on mobile.

Inline Quote

A short quote embedded within body copy, styled with a blockquote. Best for blog posts and feature-description pages where you want to reinforce a specific claim with a real customer voice.

Placement Best Practices: Where to Embed for Maximum Impact

Location determines whether a testimonial is seen and whether it influences behavior. The rule: place testimonials at points of doubt or decision.

Above the Fold on the Homepage

Your single strongest testimonial — one with a specific result and a recognizable company — belongs in the hero section. Visitors form impressions in seconds. A credible quote visible immediately reduces bounce rate by giving visitors a reason to stay.

Adjacent to the Pricing Section

Prospects who scroll to pricing are actively evaluating cost. A testimonial here should address ROI directly: "We saw a 3x return within 60 days" outperforms "Great product, highly recommend." Pair each pricing tier with a testimonial from a customer on that plan if possible.

On Feature Pages

After you describe what a feature does, show a testimonial from someone who used that feature. This closes the gap between your marketing claim and real-world validation.

On the Checkout or Sign-Up Page

Conversion anxiety peaks just before commitment. A sidebar or banner testimonial on your checkout page reassures visitors they are making a safe choice. Conversion rate optimization research consistently ranks this as one of the highest-value placements.

On Landing Pages

Landing pages for paid traffic have narrow goals. A testimonial near the CTA is almost always a positive variable in A/B tests. For a broader framework, see landing page conversion tips.

A/B Testing Your Testimonial Placements

Do not assume which placement or format is best for your audience — test it.

What to test:

  • Position: Above the fold vs. below the value proposition vs. adjacent to pricing
  • Format: Carousel vs. wall vs. single card
  • Content: Metric-focused testimonials vs. emotional/story-focused testimonials
  • Author credibility: Industry-recognizable company names vs. relatable job titles

Run each test for at least two business cycles (typically two weeks minimum) to account for weekly traffic patterns. Track the metric that matters for that page — sign-up completions, trial starts, or checkout completions — not just clicks.

Tools like Google Optimize (now sunset, replaced by A/B testing features in GA4), VWO, or Optimizely handle the split logic. If you lack a testing tool, manually swap content on alternating weeks and compare weekly averages as a lower-fidelity alternative.

For broader social proof strategy beyond testimonials, see social proof marketing examples.

Performance Considerations

Testimonial widgets introduce external HTTP requests, images, and JavaScript. Done carelessly, they degrade Core Web Vitals — particularly LCP and Cumulative Layout Shift (CLS).

Lazy Load Images

All customer avatar images should use loading="lazy". Widgets that load above the fold should eagerly load the first testimonial's avatar and lazy-load the rest.

<img src="/avatars/customer.jpg" alt="Customer name" loading="lazy" width="48" height="48">

Always specify width and height attributes to prevent layout shift (CLS).

Load Widget Scripts Asynchronously

Any third-party embed script should use the async or defer attribute. The async attribute is appropriate for self-contained widget scripts that do not depend on other scripts:

<script src="https://koecollect.com/embed.js" async></script>

This ensures the browser does not block HTML parsing while downloading the script.

Lazy Render Below-the-Fold Widgets

For widgets placed well below the fold — a testimonial wall at the bottom of a long landing page — use an Intersection Observer to defer rendering until the widget enters the viewport:

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      loadTestimonialWidget(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('[data-koe-widget]').forEach(function (el) {
  observer.observe(el);
});

Koe's embed script handles this automatically for widgets configured as below-fold placements.

Schema Markup for Testimonials

Structured data helps search engines understand your testimonial content. While Google does not guarantee rich snippets for testimonials alone, Review schema on relevant pages can contribute to aggregate rating displays and enhanced SERP appearances.

Review Schema Example

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "128"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "Sarah Chen"
      },
      "reviewBody": "Switching to this tool cut our onboarding time from two weeks to three days.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      }
    }
  ]
}

Add this as a <script type="application/ld+json"> block in your page <head>. Only include testimonials for which you have an associated rating — Google's guidelines require a numeric rating value for Review schema to be eligible for rich results.

Use Google's Rich Results Test to validate your markup before deploying.

Collecting the Testimonials to Display

The methods above are only as effective as the testimonials you have to work with. A sparse library of vague quotes limits what any embed can do.

The highest-converting testimonials share three traits: specificity (a real result or number), context (the customer's role and company), and relevance (they address the objection a target buyer faces).

For a systematic process to fill your testimonial library, see how to collect testimonials.

Summary: Which Method Should You Use?

| Situation | Recommended Method | |---|---| | New site, want fastest setup | Dedicated widget (Koe, Senja) | | WordPress site | Plugin or widget embed code | | Fewer than 5 evergreen testimonials | Manual HTML | | Need custom data source or API | Custom JavaScript widget | | Webflow, Squarespace, or Wix | CMS-specific embed code block |

For most sites, a dedicated widget is the right starting point. It eliminates manual HTML maintenance, keeps testimonials fresh automatically, and typically takes under five minutes to deploy — paste the snippet, configure the widget in the dashboard, done.

If you are evaluating which tool to use, Koe offers a free plan with unlimited testimonial collection and embeddable widgets. The embed snippet follows the same two-line pattern shown at the top of this guide, and all three widget formats — carousel, wall, and card — are included.

Sources and further reading:

Back to blog

Ready to try Koe for free?

Collect, manage, and display testimonials in one place.

Get started free