← All install methods
Install ChatForge on a React Site
Three options — pick whichever is easiest for your setup.
Easiest — no code changes
Option A: Google Tag Manager
If your site has GTM, add ChatForge without touching your codebase.
Follow the GTM walkthrough →
Works for: any site with GTM, including custom React apps, Next.js, and SPAs.
Simple — one file edit
Option B: Add to public/index.html
If you have access to your project's public/index.html file, paste the script tag before </body>:
<script src="https://chatforge.aiedge247.com/widget.js" data-agent="YOUR-AGENT-ID"></script>
Deploy your app. The widget loads on every page.
Works for: Create React App, Next.js (pages/_document), Vite, custom builds.
Advanced — React component
Option C: useEffect Hook
Add the widget dynamically in your root App component or layout:
// In App.jsx or Layout.jsx
import { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://chatforge.aiedge247.com/widget.js';
script.setAttribute('data-agent', 'YOUR-AGENT-ID');
script.async = true;
document.body.appendChild(script);
return () => { document.body.removeChild(script); };
}, []);
return <div>{/* your app */}</div>;
}
Works for: any React app. Gives you full control over when/where the widget loads.
Fallback — zero access needed
Option D: Iframe Embed
If you can't modify the codebase at all, use an iframe injector via a browser extension, bookmarklet, or any HTML injection method:
<script>!function(){var i=document.createElement('iframe');i.src='https://chatforge.aiedge247.com/?demo=YOUR-AGENT-ID&embed=inline&minimal=1';i.style.cssText='position:fixed;bottom:20px;right:20px;width:380px;height:520px;border:none;z-index:99999;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.3)';document.body.appendChild(i)}();</script>