Skip to main content
Next.js ships with a <Script> component that loads external scripts at the right moment in the page lifecycle. Use it to load the Tally widget and call Tally.loadEmbeds() once it’s available. 
// pages/index.tsx
import Script from 'next/script';

export default function Homepage() {
  return (
    <div>
      <iframe
        data-tally-src="https://tally.so/embed/mRoDv3?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
        loading="lazy"
        width="100%"
        height="216"
        frameBorder={0}
        marginHeight={0}
        marginWidth={0}
        title="Newsletter subscribers"></iframe>

      <Script src="https://tally.so/widgets/embed.js" onLoad={() => Tally.loadEmbeds()} />
    </div>
  );
}
This example targets the Pages Router. For the App Router, render the same <Script> and <iframe> from a Client Component ('use client').