How to Embed Testimonials on Any Website (Step-by-Step)

You've collected great testimonials from your customers. Now what? The testimonials sitting in your inbox, your Google Drive, or your testimonial collection tool aren't helping your business until they're on your website — visible to prospects at the exact moments when trust matters most.

Embedding testimonials on your website might sound like a technical challenge, but it doesn't have to be. Whether you're running a custom-coded site, a WordPress blog, a Shopify store, or a Squarespace portfolio, there are straightforward ways to display your testimonials beautifully and effectively.

This guide walks you through everything you need to know — from choosing the right display format to step-by-step embedding instructions for every major platform.

Before You Embed: Choosing the Right Display Format

Before you touch any code or settings, decide how you want your testimonials to appear. The format you choose affects user experience, engagement, and conversion impact. Here are the most common options:

Testimonial Carousel / Slider

A horizontal slider that displays one testimonial at a time, with arrows or autoplay to cycle through them.

Best for: Homepages, hero sections, and areas where vertical space is limited.

Pros:

• Compact — fits a lot of social proof into a small area
• Visually dynamic and engaging
• Familiar UI pattern that visitors understand intuitively

Cons:

• Most visitors only see the first 1–2 testimonials (low engagement with later slides)
• Autoplay can be annoying or distracting
• Mobile experience can be clunky if not implemented well

When to use it: When you want to add social proof to a page without dominating the layout — for example, a testimonial section between your hero and features sections on a homepage.

Testimonial Grid / Masonry Layout

A multi-column grid of testimonial cards, similar to a Pinterest-style layout.

Best for: Dedicated testimonial pages, Wall of Love pages, and sections where you want to display many testimonials at once.

Pros:

• Displays volume — visitors see many testimonials simultaneously
• Scrollable and browsable, encouraging exploration
• Responsive and adapts well to different screen sizes

Cons:

• Takes up significant vertical space
• Can feel overwhelming if not well-designed
• Requires more testimonials to look full (a grid with 3 cards looks sparse)

When to use it: When you have 15+ testimonials and want to create an immersive social proof experience. Ideal for a dedicated Wall of Love page.

Single Featured Testimonial

One testimonial displayed prominently — often a video with supporting text.

Best for: Sales pages, pricing pages, and landing pages where one powerful testimonial has more impact than many.

Pros:

• Maximum visual impact
• Focused attention on your strongest endorsement
• Clean, uncluttered design

Cons:

• Limited social proof (just one voice)
• Heavy reliance on choosing the right testimonial

When to use it: When you have a standout testimonial that's particularly relevant to the page's audience. A featured video testimonial from a recognizable customer on your pricing page can be incredibly effective.

Inline Testimonials

Testimonials woven into the page content at relevant points — for example, a testimonial about your customer support placed next to your support section, or a testimonial about ROI placed next to your pricing.

Best for: Long-form sales pages, feature pages, and anywhere you want to reinforce specific claims with social proof.

Pros:

• Context-relevant — the testimonial appears right when the visitor is thinking about that topic
• Natural and non-intrusive
• Highly effective for objection handling

Cons:

• Requires more planning and design effort
• Can slow down page loading if many videos are embedded throughout

When to use it: When you want to use testimonials as strategic persuasion tools rather than a standalone section.

Floating Widget / Badge

A small widget fixed to the corner of the screen that displays rotating testimonials or a notification-style popup ("Sarah from Denver just left a review").

Best for: Sites where you want persistent social proof without dedicating page real estate.

Pros:

• Visible on every page without taking up layout space
• Creates a sense of ongoing activity and social proof
• Low commitment from a design perspective

Cons:

• Can be perceived as spammy or annoying if overused
• Limited space for detailed testimonials
• May conflict with other floating elements (chat widgets, cookie banners)

When to use it: As a supplement to other testimonial displays, not as a primary strategy. Works well for e-commerce sites during high-traffic periods.

Embedding Testimonials on WordPress

WordPress is the most popular website platform in the world, and there are several ways to embed testimonials depending on your setup.

Method 1: Using a Testimonial Widget (Easiest)

Most testimonial collection platforms — including VideoTestimonials — provide embed widgets that work on WordPress with a simple copy-paste.

Step-by-step:

1. Generate your embed code in your testimonial platform. This is typically a <script> tag or an <iframe> embed.
2. Open the WordPress page editor for the page where you want the testimonials to appear.
3. Add a Custom HTML block (in Gutenberg) or switch to the Text/HTML tab (in the Classic Editor).
4. Paste the embed code into the HTML block.
5. Preview the page to confirm the testimonials display correctly.
6. Publish or update the page.

Tips for WordPress:

• If you're using a page builder like Elementor, Divi, or Beaver Builder, use their respective HTML/Code module to paste the embed code.
• Some caching plugins may interfere with dynamic embed widgets. If testimonials don't appear after publishing, try clearing your cache.
• For video testimonials, ensure your hosting allows <iframe> embeds (most do by default).

Method 2: Using a WordPress Plugin

Several WordPress plugins specialize in testimonial display. While these can work for text testimonials, they often lack support for video testimonials and advanced layouts.

Popular options include:

• Strong Testimonials
• Testimonials Widget
• Easy Testimonials

Limitations: Most WordPress testimonial plugins are designed for text-only testimonials that you manually enter into the WordPress dashboard. They typically don't sync with external testimonial collection platforms, don't support video natively, and require manual updates when you collect new testimonials.

For most users, the embed widget approach (Method 1) is faster, more flexible, and keeps your testimonials in sync with your collection platform automatically.

Method 3: Manual HTML/CSS

If you're comfortable with code, you can build custom testimonial displays using HTML, CSS, and optionally JavaScript.

Basic text testimonial card structure:

<div class="testimonial-card">
  <div class="testimonial-content">
    <p>"This product changed how our entire team works. We've saved 10 hours per week since switching."</p>
  </div>
  <div class="testimonial-author">
    <img src="author-photo.jpg" alt="Author name" class="testimonial-avatar" />
    <div>
      <strong>Jane D.</strong>
      <span>VP of Operations, Tech Company</span>
    </div>
  </div>
</div>

For video testimonials, embed the video using an <iframe> or <video> tag within the card:

<div class="testimonial-card">
  <div class="testimonial-video">
    <video controls poster="thumbnail.jpg">
      <source src="testimonial-video.mp4" type="video/mp4" />
    </video>
  </div>
  <div class="testimonial-author">
    <strong>John S.</strong>
    <span>Founder, Marketing Agency</span>
  </div>
</div>

Pros of manual approach: Full design control, no external dependencies.

Cons: Time-consuming to build and maintain, no automatic syncing with your collection tool, requires coding skills, and you'll need to handle video hosting separately.

Embedding Testimonials on Shopify

Shopify stores benefit enormously from testimonials — both on product pages (as reviews) and on the homepage and landing pages (as brand testimonials).

Method 1: Embed Widget (Recommended)

Step-by-step:

1. Generate the embed code from your testimonial platform.
2. In Shopify Admin, go to Online Store → Themes → Customize.
3. Navigate to the page where you want to add testimonials (homepage, product page, etc.).
4. Add a "Custom Liquid" section (or "Custom HTML" depending on your theme).
5. Paste the embed code into the custom section.
6. Position the section by dragging it to the desired location on the page.
7. Save the theme customization.

Tips for Shopify:

• For product pages, you can add testimonial widgets to the product template so they appear on all product pages automatically.
• If you want different testimonials on different product pages, use a platform that supports product-level filtering (e.g., showing only reviews for the specific product being viewed).
• Shopify's Online Store 2.0 themes offer more flexibility with section placement than older themes.

Method 2: Editing Theme Code Directly

For more control, you can edit your Shopify theme's Liquid templates directly.

1. Go to Online Store → Themes → Actions → Edit Code.
2. Find the template file for the page you want to modify (e.g., templates/index.liquid for the homepage, templates/product.liquid for product pages).
3. Add the embed code in the desired location within the template.
4. Save and preview.

Caution: Editing theme code directly can cause issues if you're not familiar with Shopify's Liquid templating language. Always duplicate your theme before making code changes.

Method 3: Shopify App

Shopify has several testimonial and review apps in the App Store. However, many of these are designed for text reviews and don't support video testimonials well. If video is important (and it should be), a dedicated embed widget from a video testimonial platform will typically provide a better experience.

Embedding Testimonials on Squarespace

Squarespace's design-first approach makes it a popular choice for portfolios, service businesses, and creative professionals — all of whom benefit significantly from testimonials.

Method 1: Code Block (Recommended)

Step-by-step:

1. Generate the embed code from your testimonial platform.
2. Open the Squarespace page editor for the target page.
3. Add a new section or find the location where you want testimonials.
4. Insert a Code Block (click the "+" button → "Code" in the block menu).
5. Paste the embed code into the code block.
6. Ensure "Display Source" is unchecked — this renders the code visually rather than showing the raw HTML.
7. Save the page.

Tips for Squarespace:

• Squarespace restricts certain types of JavaScript on lower-tier plans. If your embed doesn't work, check that your plan supports custom code injection.
• For site-wide elements (like a floating testimonial widget), use Squarespace's Code Injection feature under Settings → Advanced → Code Injection. Paste the code in the Footer section.
• Squarespace's built-in testimonial features (like the Quote block) are limited to text and don't support video. The code block approach is more flexible.

Embedding Testimonials on Wix

Wix's drag-and-drop editor makes it relatively straightforward to add testimonials, though the approach differs from other platforms.

Method 1: HTML Embed (Recommended for Video)

Step-by-step:

1. Generate the embed code from your testimonial platform.
2. Open the Wix Editor for your site.
3. Click the "+" button to add a new element.
4. Select "Embed Code" → "Custom Embeds" → "Embed a Widget".
5. Paste the embed code and click "Apply."
6. Resize and position the embed element as needed.
7. Publish your site.

Tips for Wix:

• Wix sandboxes custom code embeds in iframes, which can sometimes affect styling. If your testimonial widget looks different than expected, check if the issue is related to Wix's iframe containment.
• For responsive designs, ensure the embed widget is set to scale with the page width.

Method 2: Wix App Market

Wix has testimonial apps available in their App Market. These are easy to install but are typically limited to text testimonials and may not support video.

Method 3: Wix's Built-in Testimonial Elements

Wix offers pre-designed testimonial strips and sections in their template library.

1. Click "+" → "Interactive" or search for "Testimonials" in the Add Panel.
2. Choose a testimonial layout template.
3. Customize the text, images, and design.

Limitation: These built-in elements are text-only and require manual updates for each new testimonial.

Embedding Testimonials on Custom HTML/CSS Sites

If you're running a custom-built website, you have the most flexibility — and the process is straightforward.

Method 1: Script-Based Embed Widget

Step-by-step:

1. Generate the embed code from your testimonial platform. It will typically look something like this:

<div id="videotestimonials-widget" data-wall-id="your-wall-id"></div>
<script src="https://widget.example.com/embed.js" async></script>

2. Open the HTML file for the page where you want testimonials.
3. Paste the embed code at the desired location in the <body>.
4. Save and deploy the file.

The script automatically loads and renders the testimonial widget in the designated <div>. Most platforms handle responsive design, lazy loading, and video playback automatically.

Method 2: iFrame Embed

Some platforms provide <iframe> embed codes instead of (or in addition to) script-based embeds.

<iframe
  src="https://widget.example.com/wall/your-wall-id"
  width="100%"
  height="800"
  frameborder="0"
  allowfullscreen
></iframe>

Pros: Simple, sandboxed, and works everywhere.

Cons: Less flexible for styling, fixed height can cause layout issues, and some SEO crawlers don't index iframe content.

Method 3: API Integration

For developers who want full control, many testimonial platforms offer APIs that let you fetch testimonial data and render it with your own templates.

A typical API workflow:

1. Fetch testimonials from the API endpoint
2. Parse the JSON response containing testimonial text, video URLs, author info, etc.
3. Render using your own templates — complete design freedom
4. Cache responses to avoid unnecessary API calls on every page load

// Example: Fetching testimonials from an API
async function loadTestimonials() {
  const response = await fetch('https://api.example.com/testimonials?wall_id=YOUR_ID');
  const data = await response.json();

  const container = document.getElementById('testimonials');
  data.testimonials.forEach(testimonial => {
    const card = createTestimonialCard(testimonial);
    container.appendChild(card);
  });
}

Best for: Teams with development resources who need deep customization or want to integrate testimonials into a complex, custom-designed page.

Embedding on React, Next.js, and Other JavaScript Frameworks

If your site is built with React, Next.js, Vue, or another JavaScript framework, embedding testimonials requires slightly different approaches depending on whether you're using a script-based widget or an API.

Script-Based Widget in React/Next.js

Script tags don't work the same way in React as they do in plain HTML. You'll need to load the script dynamically.

In React (using useEffect):

import { useEffect } from 'react';

function TestimonialWall() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.example.com/embed.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="videotestimonials-widget" data-wall-id="your-wall-id" />;
}

In Next.js (using next/script):

import Script from 'next/script';

function TestimonialWall() {
  return (
    <>
      <div id="videotestimonials-widget" data-wall-id="your-wall-id" />
      <Script src="https://widget.example.com/embed.js" strategy="lazyOnload" />
    </>
  );
}

API-Based Integration in React

For maximum control in a React app, fetch testimonials from the API and render them with your own components:

import { useState, useEffect } from 'react';

function TestimonialGrid() {
  const [testimonials, setTestimonials] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/testimonials?wall_id=YOUR_ID')
      .then(res => res.json())
      .then(data => setTestimonials(data.testimonials));
  }, []);

  return (
    <div className="testimonial-grid">
      {testimonials.map(t => (
        <div key={t.id} className="testimonial-card">
          {t.videoUrl && <video src={t.videoUrl} controls />}
          <p>{t.text}</p>
          <strong>{t.authorName}</strong>
        </div>
      ))}
    </div>
  );
}

Best Practices for Embedding Testimonials

Regardless of your platform, these best practices will help you get the most impact from your embedded testimonials.

1. Place Testimonials Where Doubt Lives

Don't just put testimonials on a dedicated page and hope people find it. Place them at the exact points in your pages where visitors are most likely to hesitate:

• Pricing page: Address "is it worth the money?" concerns
• Signup/checkout page: Reduce last-minute abandonment
• Feature pages: Reinforce that specific features deliver real value
• Homepage hero section: Establish credibility immediately

2. Match Testimonials to Page Context

A testimonial about your amazing customer support belongs on your support page, not your pricing page. A testimonial about ROI belongs near your pricing. Contextual relevance dramatically increases impact.

3. Prioritize Video Over Text

When you have both video and text testimonials, lead with video. Video testimonials generate 2–3x more engagement than text testimonials and are perceived as significantly more authentic. Use text testimonials as supplementary proof, not your primary display.

4. Keep Load Times Fast

Embedding multiple videos can slow down your page if not implemented carefully. Best practices for performance:

• Use lazy loading — only load video content when the testimonial is scrolled into view
• Use thumbnail images instead of auto-playing videos
• Load the embed script asynchronously to prevent render-blocking
• Compress video files if you're self-hosting

Most testimonial platforms handle these optimizations automatically in their embed widgets.

5. Make Testimonials Filterable

If you have more than 15 testimonials, add filtering capabilities. Let visitors filter by industry, use case, company size, or other relevant attributes. Filterable testimonials perform significantly better because visitors can find proof from "someone like me."

6. Keep Content Fresh

Rotate featured testimonials periodically. A testimonial from three years ago feels stale, even if the content is still relevant. Aim to feature your newest and most compelling testimonials prominently, while keeping older ones available in the broader library.

7. Ensure Mobile Responsiveness

Over 50% of web traffic is mobile. Make sure your testimonial display looks great on phones:

• Video players should scale to the screen width
• Text remains readable without horizontal scrolling
• Carousel navigation works with swipe gestures
• Grid layouts adjust column count based on screen size

8. Include Key Information with Each Testimonial

Every testimonial — whether video or text — should include:

• Author name (first name and last initial at minimum)
• Role/title (adds credibility and context)
• Company or relevant identifier (industry, company size, or location)
• Photo or video thumbnail (visual elements increase trust)

Missing information reduces credibility. If a testimonial has no name or photo, prospects may question whether it's real.

9. Add a Clear CTA

Your testimonial section should include a call-to-action — but keep it subtle. A simple "Start your free trial" or "See plans and pricing" button near the testimonials section converts visitors who are ready to act after seeing social proof.

10. Test and Measure

Embed your testimonials and then track the impact:

• Heatmaps to see how visitors interact with the testimonial section
• Session recordings to observe whether visitors watch videos or scroll past them
• A/B tests to compare pages with and without testimonials
• Conversion tracking to measure the downstream impact on signups, purchases, or inquiries

Troubleshooting Common Embedding Issues

Testimonials Don't Appear After Embedding

Possible causes:

• Caching: Clear your site cache, CDN cache, and browser cache
• Script blocking: Ad blockers or security plugins may block the embed script. Test in an incognito window
• Content Security Policy: Your site's CSP headers may prevent loading external scripts. You may need to whitelist the testimonial platform's domain
• Plan restrictions: Some website platforms restrict custom code on lower-tier plans

Video Doesn't Play

Possible causes:

• Autoplay restrictions: Most browsers block autoplay with sound. Ensure videos load with a play button rather than autoplaying
• HTTPS mismatch: If your site is HTTPS but the video source is HTTP, browsers will block the content. Ensure all URLs use HTTPS
• Mobile compatibility: Some video formats don't play on all mobile browsers. MP4 with H.264 encoding is the safest cross-browser format

Widget Looks Wrong or Unstyled

Possible causes:

• CSS conflicts: Your site's CSS may override the widget's styles. Inspect the widget element to identify conflicting styles
• Container width: The widget may not have enough horizontal space. Ensure its parent container is full-width or has adequate dimensions
• iFrame sandboxing: If the widget is in an iframe (common on Wix), some styles may not apply as expected

Performance Impact

If your page feels slower after adding testimonials:

• Switch to lazy loading if available
• Reduce the number of testimonials loaded initially (show 6–9 with a "Load More" button)
• Use a lightweight embed format (script-based rather than iframe)
• Optimize the testimonial video thumbnails (compress images)

Wrapping Up

Embedding testimonials on your website isn't a "nice to have" — it's one of the highest-impact changes you can make to increase trust and drive conversions. The process is straightforward regardless of your platform, and the best approach for most businesses is to use an embed widget from your testimonial collection platform.

The key is to stop thinking of testimonials as a static section on your homepage and start thinking of them as a strategic asset — placed at the right moments, displaying the right content, and creating the confidence that turns visitors into customers.

VideoTestimonials provides embed widgets that work on any website platform — WordPress, Shopify, Squarespace, Wix, custom HTML, React, Next.js, and more. Collect video testimonials, customize your display, grab your embed code, and go live in minutes.