Docs

Drop the embed snippet onto any page; works in App Router and Pages Router.

Embed a form on a Next.js page

When you'd use this — your marketing site is Next.js and you want the form to render directly on /contact (or any other page) without managing an iframe yourself.

The FastYoke embed is a single <script> tag. It is not a React component, so there's no npm package to install and no SSR/CSR boundary to think about. The same snippet works in App Router (app/contact/page.tsx) and Pages Router (pages/contact.tsx).

1. Copy the snippet from the Embed panel

Open the form in the admin shell, switch to the Embed tab, pick a mode (start with inline), and click Save embed. The panel shows a copyable snippet of the form:

<script async src="https://app.fastyoke.io/embed.js" data-embed="em_AbCd1234567890EfGhIjKl"></script>

The em_… value is the embed ID assigned when you saved.

2. Paste it into your Next.js page

JSX accepts a raw <script> tag inline — you do not need next/script for this, and you do not need to escape anything. This is the most common stumbling block: people reach for next/script and end up debugging hydration mismatches that don't exist.

export default function ContactPage() {
  return (
    <main>
      <h1>Contact us</h1>
      <script
        async
        src="https://app.fastyoke.io/embed.js"
        data-embed="em_AbCd1234567890EfGhIjKl"
      />
    </main>
  );
}

For inline mode the form renders where the tag sits. For modal, slide, or bubble modes the placement of the tag doesn't matter — the chrome is a fixed overlay. Make sure your production domain is on the Settings → Embed domains allowlist before launch, otherwise visitors see the unavailable placeholder.

See also