React

Two options: script tag via public/index.html (simple), or the npm SDK for programmatic control.

Option A — Script tag (Create React App / Vite)

Edit public/index.html and paste before </body>:

public/index.html

    <script
      src="https://cdn.angstroma.com/widget-v1e53f7da.js"
      integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
      crossorigin="anonymous"
      data-key="ang_live_YOUR_KEY"
      async
    ></script>
  </body>
</html>

Option B — npm SDK (programmatic control)

Install the SDK:

bash

npm install @angstroma/a11y-sdk

Wrap your application with A11yProvider and render the toolbar:

src/App.tsx

import { A11yProvider, A11yToolbar } from '@angstroma/a11y-sdk'

export default function App() {
  return (
    <A11yProvider apiKey="ang_live_YOUR_KEY">
      <A11yToolbar />
      {/* your app */}
    </A11yProvider>
  )
}

Enable or disable features from any component using the hook:

src/MyComponent.tsx

import { useA11y } from '@angstroma/a11y-sdk'

function MyComponent() {
  const { enableFeature, disableFeature } = useA11y()

  return (
    <button onClick={() => enableFeature('high-contrast')}>
      Enable high contrast
    </button>
  )
}

Tip

Use Option A for most sites. Use Option B if you need to control features programmatically, load student profiles, or use AI features from your own components.