Testimonial widget for React

The widget in a React component

Single-page apps built with Vite, Create React App or similar, where routes render in the browser.

1. In VideoTestimonials, open Studio → Widgets, open (or create) a widget, and copy the code from its Code tab (HTML / Script) — the code is a <div> with data-vt-* attributes and one <script> tag.
2. Create a component that renders the <div> with the same data-vt-* attributes.
3. In a useEffect, create a script element pointing at https://videotestimonials.video/embed.js and append it to the page, so it runs after the div has mounted.
4. Remove the script element in the effect's cleanup function.
5. Render the component wherever the testimonials should appear.

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" />;
}

embed.js finds widget divs once, when it runs. Loading it once in index.html only works if the div is already in the page at that moment.

Source: React docs: useEffect (connecting to an external system)

An iframe, with no script

You'd rather not load a third-party script, or the widget lives on a route that mounts later.

1. In VideoTestimonials, open Studio → Widgets, open your widget, and copy the link from its Code tab (URL / iFrame).
2. Render an <iframe> with that URL as its src and a title for accessibility.
3. Give it a fixed height that fits your layout — the iframe doesn't resize itself to its content.

export function TestimonialsFrame() {
  return (
    <iframe
      src="https://videotestimonials.video/embed/YOUR_SPACE_ID?widget=carousel"
      title="Customer testimonials"
      style={{ width: "100%", height: 520, border: 0 }}
    />
  );
}

Your own markup, from the REST API

You want testimonials rendered by your own components, in your own design system.

1. Create an API key in the VideoTestimonials dashboard under Settings → API Keys. It is shown once — store it as a server-side secret.
2. From your server or API route (never from browser code, which would expose the key), call GET https://app.videotestimonials.video/api/v1/testimonials?status=approved&space_id=YOUR_SPACE_ID with the header Authorization: Bearer YOUR_KEY.
3. Render the returned data array — submitter_name, text_content, video_url, rating and more — with your own components.

API access is part of the Pro plan.