> ## Documentation Index
> Fetch the complete documentation index at: https://developers.tally.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed in Next.js

> Mount a Tally embed in a Next.js page using the next/script component.

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.

```tsx theme={null}
// 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>
  );
}
```

<Note>
  This example targets the Pages Router. For the App Router, render the same `<Script>` and
  `<iframe>` from a Client Component (`'use client'`).
</Note>