⚛️React Integration Guide

Add an AI chatbot to your React app via index.html or a useEffect hook component.

1Option A: Add to index.html (simplest)

Open public/index.html (Create React App) or index.html (Vite) and paste the embed script before the closing </body> tag. This is the fastest approach and requires no React code.

2Option B: Create a ChatWidget component with useEffect

Create a ChatWidget.tsx component that dynamically loads the script in a useEffect hook. This approach gives you full control over when the widget loads and provides proper cleanup when the component unmounts.

3Render the component once in your app root

If using Option B, add <ChatWidget /> to your App.tsx or root layout component. It renders null so it produces no visible DOM — it only loads the script.

4Replace YOUR_BOT_ID

Replace the placeholder YOUR_BOT_ID with your actual bot ID from the BotEmbed.ai dashboard.

Code Examples

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>

  <!-- BotEmbed.ai Chat Widget -->
  <script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>
</html>

src/components/ChatWidget.tsx

import { useEffect } from 'react';

export function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID';
    script.dataset.theme = 'light';
    script.dataset.position = 'bottom-right';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Clean up on unmount
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

src/App.tsx

import { ChatWidget } from './components/ChatWidget';

function App() {
  return (
    <>
      {/* Your app routes and content */}
      <h1>My React App</h1>

      {/* Render once at the root — produces no visible DOM */}
      <ChatWidget />
    </>
  );
}

export default App;

Tips

Option A (index.html) is simpler and works for most use cases. Use Option B if you need to conditionally load the widget or pass dynamic props.

The useEffect cleanup function removes the script when the component unmounts, preventing duplicate widgets during hot-module reloads in development.

If using TypeScript, the component already has correct typing since it returns null.

Works with Create React App, Vite, and any other React setup.

Previous🔷 Webflow Next▲ Next.js