React & Next.js Integration

Embed the AccessiblyKit widget seamlessly into your React or Next.js application.

Integration Steps

Step 1: Install Dependencies (Next.js only)

For Next.js apps, ensure you’ve installed the next/script package (it’s built-in):


npm install next

Step 2: Create a Custom Component

In your project, create a new component, e.g., AccessibilityWidget.jsx:


import { useEffect } from 'react';
import Script from 'next/script';
 
export default function AccessibilityWidget({ widgetId }) {
  useEffect(() => {
    if (window.__A11Y_WIDGET_ACTIVE__) return;
 
    window.__A11Y_WIDGET_ACTIVE__ = true;
 
    const script = document.createElement('script');
    script.src = "https://cdn-01.accessiblykit.com/a11y-widget.bundle.js";
    script.setAttribute("data-widget-id", widgetId);
    script.async = true;
 
    document.body.appendChild(script);
 
    return () => {
      script.remove();
      window.__A11Y_WIDGET_ACTIVE__ = false;
    };
  }, [widgetId]);
 
  return null;
}

Use the component at the root of your application, typically in _app.jsx or layout.jsx:


import AccessibilityWidget from './components/AccessibilityWidget';
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <AccessibilityWidget widgetId="YOUR_WIDGET_ID" />
      <Component {...pageProps} />
    </>
  );
}
 
export default MyApp;

You can add more attributes to customize the widget further:


<script
  src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-theme="dark"
  data-position="bottom-left"
  data-button-size="LARGE"
  data-button-color-mode="GRADIENT"
  data-button-primary-color="#504CFF"
  data-button-secondary-color="#A94CFF">
</script>

Parameter	Description	Default Value
`data-theme`	Widget theme (`auto`, `light`, `dark`)	`auto`
`data-language`	Widget language (`en`, `es`, etc.)	`en`
`data-position`	Widget position (`bottom-right`, etc.)	`bottom-right`
`data-button-size`	Widget button size	`SMALL`
`data-button-color-mode`	Button color mode (`SOLID`, `GRADIENT`)	`SOLID`
`data-button-primary-color`	Primary color (Hex)	`#504CFF`
`data-button-secondary-color`	Secondary color (Hex, for gradients)	`#A94CFF`

Using JavaScript API

Leverage the JavaScript API to interact with the widget:


// Open the widget programmatically
window.AccessibilityWidgetAPI?.openWidget();
 
// Enable a specific profile
window.AccessibilityWidgetAPI?.enableProfile('dyslexia');
 
// Reset all widget settings
window.AccessibilityWidgetAPI?.resetAllFeatures();

Need Further Assistance?

Explore our Developer Documentation or reach out directly to our Support Team.

Need More Help?

Schedule a personal support session or join our live training webinars.

Contact Support