React AI Chat Widget
In a React single-page app the tricky part of any third-party widget is lifecycle: you want it to appear once and then follow the user through every client-side route without tearing down and re-initialising. EasyChatWidget handles that with a tiny component that injects the script on mount and cleans up on unmount.
Because it runs entirely outside the React tree, there is no state to thread, no context to wire, and nothing added to your bundle. Train it on your app's content and it answers users at any hour, in their own language, and pulls you in when a conversation needs a human.
Why add EasyChatWidget to React
- Initialises once and rides along through every client-side route
- Lives outside the React tree - no bundle weight, no extra re-renders
- Ships as a drop-in component or a plain tag in index.html
- Answers on its own and escalates to a person when required
Best for: React use cases
SaaS dashboards
Answer in-app how-to and billing questions without pulling engineers into support.
Web apps & portals
Give users contextual help that persists as they move between views.
Startup products
Add a support and onboarding channel before you have a support team.
Internal tools
Explain workflows and policies to staff right where they work.
How to install the chat widget on React
- 1Create a ChatWidget componentAdd the component below - it injects the script on mount and removes it on unmount.
- 2Render it onceRender <ChatWidget /> near the root of your app (e.g. in App.jsx) so it loads on every route. In dev, StrictMode mounts effects twice - harmless, but you may briefly see the widget initialise twice.
- 3Or use index.htmlPrefer no component? Paste the plain script tag before </body> in public/index.html (Create React App) or in the root index.html (Vite).
Your embed snippet
Copy this and follow the steps above.
import { useEffect } from 'react'
export default function ChatWidget() {
useEffect(() => {
const s = document.createElement('script')
s.src = 'https://easychatwidget.com/widget.js'
s.dataset.widgetId = 'YOUR_WIDGET_ID'
s.async = true // injected scripts are async by default; "defer" has no effect here
document.body.appendChild(s)
return () => { s.remove() }
}, [])
return null
}YOUR_WIDGET_ID with the ID from your dashboard. Don’t have one yet? Create a free account to get it.See the React chat widget in action
EasyChatWidget vs. building chat yourself
How the EasyChatWidget AI chat widget compares with building chat yourself on React.
