Install on a React app

For a single-page React app, load the widget once from your root component. It then stays present for the whole app, including after in-app navigation.

Verify your domain first: Verify your domain.

Option A — script tag in index.html (simplest)

Add your install snippet before </body> in public/index.html (or your framework's root HTML template):

<script src="https://plugin.inclusifyx.com/v1/embed.js" data-site="YOUR-SITE-TOKEN" async defer></script>

That single shell HTML serves your entire app, so the widget is present everywhere.

Option B — load it from your root component

This is the pattern the dashboard's React install tab gives you. Add a small hook and call it from your root component:

// Add to your App.js or _app.tsx
import { useEffect } from 'react';

function useInclusifyX() {
  useEffect(() => {
    // Prevent double-loading in React strict mode
    if (document.querySelector('script[data-site="YOUR-SITE-TOKEN"]')) return;

    const script = document.createElement('script');
    script.src = 'https://plugin.inclusifyx.com/v1/embed.js';
    script.setAttribute('data-site', 'YOUR-SITE-TOKEN');
    script.async = true;
    document.head.appendChild(script);
  }, []);
}

// Usage: call useInclusifyX() in your root component
export default function App() {
  useInclusifyX();
  return <YourApp />;
}

Copy the exact code (with your real token) from the React tab in your dashboard's install panel.

You don't re-inject on navigation

Load the widget once, as above. The widget detects React route changes and re-applies itself — you don't need to add it to each route or page component. If it loads on first paint but seems to drop after navigating, see The widget disappears when I navigate my app.

Confirm

Run your app, navigate between a few routes, and confirm the accessibility button stays present. The domain switches to Active in your dashboard after the first real page load.