React Integration
AI chat widget for your React application
Building a React application? Add AI-powered support in under 5 minutes. The widget works with React 18+, Next.js, Remix, Vite, and any React-based framework. Full TypeScript support included.
IntegrationPage.whyAddChatbot
React is the most popular frontend framework, used by millions of developers worldwide. LaunchChat's widget is built with Preact (React-compatible) and can be embedded in any React application using a simple script tag or by creating a wrapper component.
IntegrationPage.features
React & TypeScript friendly
Embed via script tag or create a React component wrapper. The widget works with React 18+, React 19, and all major React frameworks. TypeScript types are available for the config object.
Works with any React framework
Compatible with Next.js, Remix, Gatsby, Astro (React), Vite, Create React App, and custom React setups. No framework-specific configuration needed.
SPA-friendly
The widget persists across client-side route changes. Conversation state is maintained as users navigate your single-page application without page reloads.
Custom component wrapper
Create a React component wrapper around the widget for tighter integration. Pass config as props, control visibility with state, and integrate with your app's design system.
IntegrationPage.whyChooseLaunchChat
- Works with React 18+, Next.js, Remix, and all React frameworks
- SPA-friendly — persists across route changes
- Custom React component wrapper for tighter integration
- 3KB gzipped — won't bloat your React bundle
IntegrationPage.howToAdd
Get your widget ID
Create a free LaunchChat account, connect your data sources, and generate your widget ID from the dashboard.
Add to your React app
Use the script tag approach (simplest) or create a React component wrapper. For Next.js, use next/script. For Vite, add to index.html or load dynamically.
Configure and customize
Set your brand colors, greeting, position, and behavior via the config object or dashboard settings.
Deploy and monitor
Your AI support is live. Monitor conversations, track deflection rates, and use knowledge gap data to improve coverage.
IntegrationPage.embedCode
import { useEffect } from 'react';
interface LaunchChatProps {
widgetId: string;
primaryColor?: string;
position?: 'bottom-right' | 'bottom-left';
greeting?: string;
}
export function LaunchChat({
widgetId,
primaryColor = '#0D9488',
position = 'bottom-right',
greeting,
}: LaunchChatProps) {
useEffect(() => {
window.NotionSupportConfig = {
widgetId,
primaryColor,
position,
greeting,
};
const script = document.createElement('script');
script.src = 'https://launchchat.dev/widget.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [widgetId, primaryColor, position, greeting]);
return null;
}React component wrapper with TypeScript props. Clean mount/unmount handling. Use in your root layout.
// app/layout.tsx or any page component
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script id="launchchat-config" strategy="afterInteractive">
{`window.NotionSupportConfig = { widgetId: 'YOUR_WIDGET_ID' };`}
</Script>
<Script
src="https://launchchat.dev/widget.js"
strategy="afterInteractive"
/>
</body>
</html>
);
}Next.js App Router integration using next/script with afterInteractive strategy. Widget initializes after page hydration.
// Add to index.html before </body>
<script>
window.NotionSupportConfig = { widgetId: 'YOUR_WIDGET_ID' };
</script>
<script src="https://launchchat.dev/widget.js" async></script>
<!-- Or load dynamically in your React app: -->
// useEffect(() => {
// window.NotionSupportConfig = { widgetId: 'YOUR_WIDGET_ID' };
// const s = document.createElement('script');
// s.src = 'https://launchchat.dev/widget.js';
// s.async = true;
// document.body.appendChild(s);
// }, []);For Vite or Create React App, add to index.html or load dynamically in a useEffect hook.
IntegrationPage.faq
Does LaunchChat work with React 18+?
Yes. LaunchChat's widget is built with Preact (React-compatible, 3KB) and works with React 18, React 19, and all major React frameworks including Next.js, Remix, and Vite.
Can I create a React component wrapper?
Yes. You can create a React component that manages the widget lifecycle with useEffect. Pass config as props, control visibility with state, and integrate with your app's design system.
Does it work with Next.js?
Yes. Use next/script with the afterInteractive strategy for optimal loading. Works with both App Router and Pages Router. See the code example above.
Will it persist across SPA route changes?
Yes. The widget persists across client-side route changes in single-page applications. Conversation state is maintained as users navigate your app without page reloads.
Does it affect my React bundle size?
No. The widget loads from an external script (3KB gzipped) and is not bundled with your React app. It won't increase your JavaScript bundle size.
Can I control the widget programmatically?
The widget initializes based on the config object. For advanced control, you can conditionally render the script based on React state (e.g., only show for authenticated users).