Step 1: Embed Surface Tag | App Router

Navigate to the app/layout.tsx file.
Add the following code in the Start of <head> tag section.

Check out the How to Get Site ID page to get your site ID.

import Script from "next/script";

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"
          strategy="beforeInteractive"
         />
      </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.