Install in Next.js

Steps

1. Open your root layout. app/layout.tsx in the App Router, or pages/_app.tsx in the Pages Router.
2. Add the Script component with your address and strategy="afterInteractive". The dashboard’s Next.js tab has it with your domain ID filled in.
3. Deploy, so the change reaches your live domain.
4. Verify on the dashboard’s Installation page.

App Router

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.accessora.io/embeds/js/latest/autoload.js?domainId=YOUR_DOMAIN_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://cdn.accessora.io/embeds/js/latest/autoload.js?domainId=YOUR_DOMAIN_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Route changes

Put the script in the root layout, not in a page or a component that mounts and unmounts. Next.js keeps the layout between client-side navigations, so the widget stays put and the panel remembers the visitor’s choices. Page-wide adjustments such as High Contrast and Stop Animations stay on across routes. Font Size and Line Height apply to the text on the page when they’re switched on, so new content from a route change may need a page reload to pick them up. The skip links, and on Enterprise the automated fixes, watch the page for new content and keep up with each new route.

The Next.js integration guide has the same steps with a short FAQ.