How to Embed Testimonials on Your Website (HTML, React, Webflow)

Want to add testimonials to your website? This guide shows you exactly how — whether you're using plain HTML, React, WordPress, or Webflow.

The Fastest Way: Embed Widget

The simplest approach is using a testimonial widget. One line of code, works anywhere.

HTML / Any Website

<script 
  src="https://hypewalls.com/widget.js" 
  data-id="your-wall-id"
></script>

That's it. The widget loads asynchronously, matches your site's color scheme, and displays your approved testimonials.

React / Next.js

// components/Testimonials.jsx
import { useEffect } from 'react';

export function Testimonials() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://hypewalls.com/widget.js';
    script.setAttribute('data-id', 'your-wall-id');
    document.body.appendChild(script);
    
    return () => script.remove();
  }, []);

  return <div id="hypewall-widget" />;
}

Webflow

Go to your page settings

Scroll to "Custom Code" → "Before </body> tag"

Paste the HTML snippet

Publish

WordPress

Edit the page where you want testimonials

Add a "Custom HTML" block

Paste the embed code

Save

Framer

Add a Code component

Paste the script

Adjust sizing as needed

Widget Customization

Most testimonial widgets support customization:

<script 
  src="https://hypewalls.com/widget.js" 
  data-id="your-wall-id"
  data-theme="light"
  data-layout="carousel"
  data-max="5"
></script>

Options:

data-theme: "light" or "dark"

data-layout: "grid", "carousel", or "list"

data-max: Maximum testimonials to show

DIY: Build Your Own

If you want full control, here's how to build a simple testimonial section:

Basic HTML/CSS

<section class="testimonials">
  <h2>What our customers say</h2>
  <div class="testimonial-grid">
    <div class="testimonial-card">
      <div class="stars">★★★★★</div>
      <p>"This product changed everything for us. Revenue up 40% in 2 months."</p>
      <div class="author">
        <img src="avatar.jpg" alt="Sarah Chen" />
        <div>
          <strong>Sarah Chen</strong>
          <span>CEO, TechStart</span>
        </div>
      </div>
    </div>
    <!-- More cards... -->
  </div>
</section>

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

.testimonial-card {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
}

.stars {
  color: #f59e0b;
  margin-bottom: 0.5rem;
}

.author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>

React Component

function TestimonialCard({ quote, author, role, rating }) {
  return (
    <div className="bg-gray-50 p-6 rounded-xl">
      <div className="text-amber-400 mb-2">
        {'★'.repeat(rating)}
      </div>
      <p className="text-gray-700 mb-4">"{quote}"</p>
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-rose-500 rounded-full" />
        <div>
          <p className="font-medium">{author}</p>
          <p className="text-sm text-gray-500">{role}</p>
        </div>
      </div>
    </div>
  );
}

Where to Place Testimonials

For maximum impact, add testimonials:

Hero section — Right below your main headline

Before pricing — Reduces objections

Checkout/signup — Final push

Feature sections — Relevant social proof

Dedicated page — Your "Wall of Love"

Performance Tips

Testimonial widgets can slow your site if not done right:

✅ Load scripts async

✅ Use lightweight widgets (hypewalls is <10kb)

✅ Lazy load below-the-fold testimonials

❌ Don't embed heavy video widgets above the fold

❌ Don't load 50+ testimonials on page load

Get Started

The fastest way to add testimonials:

Collect a few testimonials

Copy your embed code

Paste it on your site

Takes about 5 minutes total.

*Need help embedding? Check our docs or reach out.*