Skip to main content
Let’s add the SurfaceFormScript() component that we created in Step 2 to the app/layout.tsx file: 
import Script from "next/script";
import SurfaceFormScript from "./surfaceFormScript";

export default function RootLayout({
	children,
}: Readonly<{
	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" // Replace this with your Site ID
          strategy="beforeInteractive"
         />
      </head>
		<body>
		 {children}
		  <SurfaceFormScript
           formUrl="REPLACE ME WITH FORM URL" // Replace this with a Surface Form URL
           embedType="popup"
           popupSize="medium" // "small", "medium", "large"
           buttonClassName="surface-form-button"
         />
		  </body>
	  </html>
	);
}
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>
    );
}