Testimonial widget for Next.js

A client component (works with client-side navigation)

The quickest way to show the widget on any App Router or Pages Router page.

1. In VideoTestimonials, open Studio → Widgets, open (or create) a widget, and copy the code from its Code tab (HTML / Script).
2. Create a client component that renders the <div> with the same data-vt-* attributes.
3. Append the embed.js script in a useEffect, and remove it in the cleanup, so the widget initialises whenever the component mounts.
4. Import the component into the page where the testimonials should appear.

"use client";

import { useEffect } from "react";

export function Testimonials() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://videotestimonials.video/embed.js";
    script.async = true;
    document.body.appendChild(script);
    return () => script.remove();
  }, []);

  // Copy these attributes from your widget's Code tab.
  return <div data-vt-widget="carousel" data-vt-space-id="YOUR_SPACE_ID" />;
}

Loading embed.js with next/script in a layout runs it once per visit. Widgets on pages reached later by client-side navigation would not initialise, which is why the script is appended when the component mounts.

Server-rendered testimonials from the REST API

You want testimonials in the HTML that search engines and AI crawlers read first, styled with your own components.

1. Create an API key in the VideoTestimonials dashboard under Settings → API Keys and store it in an environment variable such as VT_API_KEY.
2. In a Server Component, fetch https://app.videotestimonials.video/api/v1/testimonials?status=approved&space_id=YOUR_SPACE_ID with Authorization: Bearer and the key.
3. Cache the response with fetch's next.revalidate option so the API isn't called on every request.
4. Render the data array with your own components.

type Testimonial = {
  id: string;
  submitter_name: string;
  text_content: string | null;
  rating: number | null;
};

export default async function TestimonialsPage() {
  const res = await fetch(
    "https://app.videotestimonials.video/api/v1/testimonials?status=approved&space_id=YOUR_SPACE_ID",
    {
      headers: { Authorization: `Bearer ${process.env.VT_API_KEY}` },
      next: { revalidate: 3600 },
    },
  );
  const { data }: { data: Testimonial[] } = await res.json();

  return (
    <ul>
      {data.map((t) => (
        <li key={t.id}>
          <blockquote>{t.text_content}</blockquote>
          <p>{t.submitter_name}</p>
        </li>
      ))}
    </ul>
  );
}

API access is part of the Pro plan. The key stays on the server because the fetch runs in a Server Component.

Source: Next.js docs: fetch and next.revalidate