Popup | App Router | Surface Docs

Add the following code to the app/layout.tsx file:

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"
          data-site-id="SITE_ID"
          strategy="beforeInteractive"
        />
        <Script
          strategy="afterInteractive"
          id="surface-form-script"
          dangerouslySetInnerHTML={{
            __html: `
              (function () {
                const surface_src = "REPLACE ME WITH FORM URL"
                const surface_embed_type = "popup"
                const target_element_class = "surface-form-button"
                const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
              })();
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Using a verified custom domain? Add data-custom-domain="forms.example.com" to the Surface Tag. Follow the custom-domain setup guide before publishing the change.

You must replace the REPLACE ME WITH FORM URL with the form URL from the Surface Form Builder.

Add the surface-form-button className to the element you want to use to trigger the form.

export default function Home() {
    return (
        <div>
            <button className="surface-form-button">Open Form</button>
        </div>
    );
}