install guide

heytappr + next.js

add heytappr to a next.js app router project with next/script in the root layout.

where it goes

in the app router, add it to app/layout.tsx using the next/script component with strategy afterInteractive. that loads it once after the page hydrates, on every route.

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.tappr.app/embed.js"
          data-tapprid="your-business"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

things worth knowing

• put it in the root layout, not a page, so it's there on every route.

• give the controls your guides point at stable ids or data attributes. styling classes change often and break selectors.

• allowlist your web origin in the heytappr workspace, or the embed won't load. add every origin you serve from, including staging.