> ## Documentation Index > Fetch the complete documentation index at: https://docs.maedo.in/llms.txt > Use this file to discover all available pages before exploring further. # React / Next.js Integration > How to add Maedo Webchat to your React or Next.js application. For React-based applications, we recommend using a component-based approach to ensure the widget mounts and unmounts correctly. ## Installation Steps 1. Create a new component called `MaedoWidget.tsx` (or `.jsx`). ```tsx MaedoWidget.tsx theme={null} import { useEffect } from 'react'; const MaedoWidget = () => { useEffect(() => { const script = document.createElement('script'); script.src = "https://cdn.maedo.in/scripts/webchat/widget-v2.js"; script.defer = true; script.setAttribute('data-agent-config', "YOUR_AGENT_TOKEN_HERE"); document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return null; }; export default MaedoWidget; ``` 2. Import and use this component in your root layout or main application component (e.g., `App.tsx` or `layout.tsx`). ```tsx layout.tsx theme={null} import MaedoWidget from './components/MaedoWidget'; export default function RootLayout({ children }) { return ( {children} ); } ``` ## Next.js (App Router) If you are using the Next.js App Router, ensure the component is a Client Component by adding `'use client';` at the top of the file.