> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zynfo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React Integration: Add AI Agents to SPAs

> Dynamically inject the ZynfoAI agent widget into Single Page Applications built with React, Next.js, or Vite for seamless customer support.

# React Integration

If you are building a modern Single Page Application (SPA) using React, Next.js, or Vite, you can dynamically inject the ZynfoAI agent widget script when your application mounts.

## Implementation Guide

Use a standard `useEffect` hook in your main layout or root `App` component to load the AI agent asynchronously:

```jsx theme={null}
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Dynamically load the AI agent widget script
    const embedScript = document.createElement('script');
    embedScript.src = 'https://your-domain.com/widget/embed.js';
    embedScript.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID_HERE'); // Replace with your Agent ID
    embedScript.async = true;
    
    document.head.appendChild(embedScript);

    return () => {
      // Cleanup the script and widget when the React component unmounts
      document.head.removeChild(embedScript);
      const widget = document.getElementById('chatbot-widget');
      if (widget) widget.remove();
    };
  }, []);

  return <div>Your application content here...</div>;
}
```

## Remote Configuration

Just like the standard HTML embed, you do not pass configuration props directly to the widget in your React code. All appearance and behavioral settings are fetched automatically in real-time based on the `data-chatbot-id` you provide.

## Related Topics

* [HTML Snippet Integration: Embed Your AI Agent](/embed/html-embed)