Drop a testimonial widget into a Next.js or React app as a component

// components/StoryProofWidget.tsx
import Script from 'next/script';

// A Server Component is fine: next/script works without 'use client'.
export default function StoryProofWidget({ id }: { id: string }) {
  return (
    <>
      {/* Leave this div empty. The embed script fills it. */}
      <div data-storyproof-widget={id} />
      <Script src="https://app.storyproof.io/embed.js" strategy="afterInteractive" />
    </>
  );
}

// app/page.tsx (or any route)
import StoryProofWidget from '@/components/StoryProofWidget';

export default function Page() {
  return (
    <section>
      <h2>What customers say</h2>
      <StoryProofWidget id="YOUR_WIDGET_ID" />
    </section>
  );
}

// StoryProofWidget.tsx for React without Next (Vite, CRA)
import { useEffect } from 'react';

const SRC = 'https://app.storyproof.io/embed.js';

export function StoryProofWidget({ id }: { id: string }) {
  useEffect(() => {
    // Load the script once per page, however many times this mounts.
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const script = document.createElement('script');
    script.src = SRC;
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <div data-storyproof-widget={id} />;
}

// <StoryProofWidget id="YOUR_WIDGET_ID" />