Next.js

Install the Angstroma widget in a Next.js application using the built-in Script component. Works with App Router (v13+) and Pages Router.

Coming soon

A dedicated Next.js npm package is on the roadmap. The next/script approach below works today in every Next.js app. If you prefer a React component wrapper, use @angstroma/a11y-sdk in a client component.

App Router (Next.js 13+)

Add the widget to your root layout at app/layout.tsx. It loads on every page automatically.

app/layout.tsx

import Script from 'next/script'

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

Note

Use strategy="afterInteractive" â€” this loads the widget after the page becomes interactive. Do not use strategy="beforeInteractive", which would block page rendering.

Pages Router

Add to pages/_app.tsx:

pages/_app.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://cdn.angstroma.com/widget.js"
        data-key="ang_live_YOUR_KEY"
        strategy="afterInteractive"
      />
    </>
  )
}

Using an environment variable

Store the API key in your environment rather than hardcoding it. Add to .env.local:

.env.local

NEXT_PUBLIC_A11Y_KEY=ang_live_YOUR_KEY

Then use it in the layout:

app/layout.tsx

<Script
  src="https://cdn.angstroma.com/widget.js"
  data-key={process.env.NEXT_PUBLIC_A11Y_KEY}
  strategy="afterInteractive"
/>

Note

The API key is public by design â€” it is embedded in your page HTML. It identifies your tenant but does not grant write access to your account. Treat it like a public analytics ID, not a password.

With the npm SDK (optional)

If you need programmatic control (enabling features from code, loading user profiles, using AI features), use the JavaScript SDK instead of the script tag.