Install Hubbo in Next.js

Add the Hubbo embed script with next/script in the App Router or the Pages Router.

In Next.js you load Hubbo with the built-in next/script component. The embed does not need a React provider or hook, you only need to render the script once for the whole app.

App Router (app/)

Edit or create your root layout at app/layout.tsx (or .js):

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://api.hubbo.io/embed?key=ACCOUNT_KEY"
        strategy="afterInteractive"
        type="module"
        crossOrigin="use-credentials"
        id="hubbo-embed-script"
      />
    </html>
  );
}

Pages Router (pages/)

Open or create pages/_app.tsx and render the script next to your page component:

// pages/_app.tsx
import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://api.hubbo.io/embed?key=ACCOUNT_KEY"
        strategy="afterInteractive"
        type="module"
        crossOrigin="use-credentials"
        id="hubbo-embed-script"
      />
      <Component {...pageProps} />
    </>
  );
}

Reading the key from an environment variable

The account key is not a secret, it is visible in the page source in any case. Still, keeping it in an env var makes it easy to use a different account for staging:

<Script
  src={'https://api.hubbo.io/embed?key=' + process.env.NEXT_PUBLIC_HUBBO_KEY}
  strategy="afterInteractive"
  type="module"
  crossOrigin="use-credentials"
  id="hubbo-embed-script"
/>

Client-side navigation

The script is loaded once and stays on the page while Next.js navigates between routes. Notification, NPS and survey URL rules are evaluated against the real browser location, so they follow your route changes without extra code.

Place Script next to body

For App Router, put next/script with strategy="afterInteractive" as a sibling of <body> inside <html> (not in <head>). That matches current Next.js guidance for application-wide third-party scripts.

There is no official Hubbo npm package

Do not look for an @hubbo/* React or Next.js package. The script tag is the supported installation method.