React

Add the widget with the script tag in public/index.html. It works in every React app today.

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="inc_live_YOUR_KEY"
      async
    ></script>
  </body>
</html>

Option B — npm SDK (coming soon)

Coming soon

npm package coming soon — use the script tag today. @incluxa/a11y-sdk is not published to npm yet, so the commands below will not work until it is. They show the planned API.

Install the SDK (once published):

bash

npm install @incluxa/a11y-sdk

Wrap your application with A11yProvider and render the toolbar:

src/App.tsx

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

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

Enable or disable features from any component using the hook:

src/MyComponent.tsx

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

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

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

Tip

Use Option A today. Option B, for controlling features from your own components, will be available when the npm package is published.