Next.js

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

Coming soon

npm package coming soon — use the script tag today. The next/script approach below works in every Next.js app. The @incluxa/a11y-sdk React wrapper is not published to npm yet.

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-v1e53f7da.js"
          integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
          crossOrigin="anonymous"
          data-key="inc_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-v1e53f7da.js"
        integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
        crossOrigin="anonymous"
        data-key="inc_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=inc_live_YOUR_KEY

Then use it in the layout:

app/layout.tsx

<Script
  src="https://cdn.angstroma.com/widget-v1e53f7da.js"
  integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
  crossOrigin="anonymous"
  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 (coming soon)

The npm package is coming soon — use the script tag today. When it is published, the JavaScript SDK will add programmatic control (enabling features from code, loading user profiles, using AI features).