Next.js

Next.js has a built-in <Script> component that loads third-party scripts the right way, so use that rather than dropping a raw tag into your JSX.

App Router #

Add the script to your root layout (app/layout.tsx) inside the <body>:

tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.plotap.com/widget.js"
          data-key="hx_pub_your_key_here"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

strategy="afterInteractive" loads the widget once the page is interactive, which is what you want. It never blocks your first paint.

Pages Router #

If you're on the Pages Router, do the same thing in pages/_app.tsx:

tsx

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://api.plotap.com/widget.js"
        data-key="hx_pub_your_key_here"
        strategy="afterInteractive"
      />
    </>
  );
}

Client-side navigation just works

The widget attaches once on load and listens for text selection globally, so moving between routes with the App Router or next/link needs no re-init. Loading it once in the layout covers every page.

Your data-key is the public key and is safe in client-side code. It only works from the origins you allow. See Quotas, origins & keys. For the general flow and how to verify it's working, see Installation.