How to Embed Testimonials in React, Next.js, and Vue (With Code)

Adding testimonials to a modern JavaScript framework is easier than you think. This guide covers two approaches: the script tag (zero code) and the REST API (full control).

Method 1: Script Tag (Works Everywhere)

The simplest approach. Paste one line of HTML and you're done. Works with React, Vue, Next.js, Astro, Svelte, WordPress, Webflow, or plain HTML.

<script
  src="https://trustwall.net/widget.js"
  data-project="YOUR_PROJECT_ID"
  data-layout="grid"
  data-theme="light"
  data-max="6">
</script>

Available Options

Attribute	Values	Default
data-layout	grid, list, carousel, masonry	grid
data-theme	light, dark	light
data-max	Any number	All

Using in React / Next.js

In React, you can use the script tag inside a useEffect hook:

import { useEffect, useRef } from 'react';

function Testimonials() {
  const ref = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://trustwall.net/widget.js';
    script.setAttribute('data-project', 'YOUR_PROJECT_ID');
    script.setAttribute('data-layout', 'carousel');
    ref.current.appendChild(script);
    return () => script.remove();
  }, []);

  return <div ref={ref} />;
}

Using in Vue

<template>
  <div ref="widgetContainer" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const widgetContainer = ref(null);

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://trustwall.net/widget.js';
  script.setAttribute('data-project', 'YOUR_PROJECT_ID');
  widgetContainer.value.appendChild(script);
});
</script>

Method 2: REST API (Full Control)

If you want to build your own UI, use the TrustWall API to fetch testimonials as JSON:

GET https://trustwall.net/api/testimonials/YOUR_PROJECT_ID

// Response:
[
  {
    "author_name": "Sarah Kim",
    "author_title": "Marketing Lead",
    "content": "Amazing product!",
    "rating": 5,
    "created_at": "2026-03-15T10:30:00Z"
  }
]

Fetch in React

const [testimonials, setTestimonials] = useState([]);

useEffect(() => {
  fetch('https://trustwall.net/api/testimonials/YOUR_ID')
    .then(res => res.json())
    .then(setTestimonials);
}, []);

Fetch Server-Side (Next.js)

export async function getStaticProps() {
  const res = await fetch(
    'https://trustwall.net/api/testimonials/YOUR_ID'
  );
  const testimonials = await res.json();
  return { props: { testimonials }, revalidate: 3600 };
}

This approach gives you full control over the HTML/CSS and works great with server-side rendering and static site generators.

Which Method Should I Use?

• Script tag — fastest setup, zero maintenance, auto-updates when you approve new testimonials
• REST API — full design control, works with SSR/SSG, can cache on your server

Both methods are available on all plans, including free.