React chat widget for your app
A provider, a component, a hook
@welcomeai/react wraps the widget in the components a React app expects. It loads the script from the CDN rather than bundling it, so your bundle does not change and fixes reach you without a release on your side.
What it does
Not in your bundle
Bundling would put Preact inside your React app and freeze the widget at whatever version you installed. A script tag keeps both of those problems away.
Calls made early are kept
The provider queues anything you call before the script arrives and replays it, so a widget opened on mount behaves the same as one opened later.
Inline or floating
WelcomeAIWidget for the bubble, WelcomeAIInline for a panel inside your own layout, WelcomeAITrigger for your own button.
How to connect it
Read the full guide- 1
Install the package
pnpm add @welcomeai/react, or the equivalent for your package manager.
- 2
Wrap your app
Put WelcomeAIProvider near the root with your widget id.
- 3
Drop in a component
WelcomeAIWidget for the floating bubble, or WelcomeAIInline where you want it embedded.
- 4
Allow your domain
Add it to the widget's allowed domains so the origin-bound token is issued for it.
Questions people ask
Does it work with Next.js?
Yes, in the App Router and the Pages Router. The components are client components, so mark the file accordingly.
What if the script fails to load?
A failed load is not cached, so a later mount tries again rather than staying broken for the session.
Can I use it without React?
Yes. The same widget is one script tag on any page, and the JavaScript API is the same.
What teams use it for
Put your knowledge to work today
Free for 14 days. No card, and nothing to install on your site.