install guide

heytappr + remix

add heytappr to a remix or react router app with a script tag in the root route.

where it goes

add the script to app/root.tsx inside the body, next to the scripts component, so it renders on every route.

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
        <script
          src="https://cdn.tappr.app/embed.js"
          data-tapprid="your-business"
          defer
        />
      </body>
    </html>
  );
}

things worth knowing

• the root route wraps every page, so this is the only place you need it.

• 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.