How do I Embed a Chatbot in a React app?

Embed a chatbot in React by either adding a hosted chat widget script in public/index.html, installing a React chatbot component from npm, or rendering an iframe. With CustomGPT.ai, create an agent, copy the Live Chat or iframe code, and paste it into your React app’s layout.

Scope:
Last updated: July 2026. Applies globally; verify chatbot tracking, cookies, and personal data handling against local privacy laws such as GDPR in the EU and CCPA/CPRA in California.

Prerequisites for embedding a chatbot in React

Before you add any chatbot, you need a working React project with Node.js and npm (or yarn/pnpm) set up. A typical app is created with tools like Create React App or Vite, which give you an index.html shell and a root React component. 

The chatbot UI is usually mounted either:

• globally, via a script tag in public/index.html, or
• inside your React component tree (for example in App.tsx or a layout shell), if you’re using a React webchat component.

Make sure you can run npm start (or your dev command), and you’re comfortable editing JSX/TSX files before proceeding. 

Common ways to embed a chatbot in a React app

In practice, there are three common patterns:

1. Hosted chat widget via script
   Your chatbot platform gives you a <script> snippet. You paste this into your site’s HTML so it injects a floating button or chat window. This is the simplest no-code option. 
2. React chatbot component/library
   Some platforms provide a React SDK or component library (for example, a <Webchat /> React component) that you install from npm and render within your React tree.
3. Embedded iframe
   The provider gives you an iframe URL and/or embed code. You wrap it in a React component and control sizing and responsiveness yourself. This is very generic and works with almost any hosted chatbot.

Each method trades off ease of setup, customization, and how tightly it integrates with your React state and routing.

Method 1 — Add a hosted chat widget script

This is the “copy–paste a snippet” approach most non-technical teams start with.

Steps

1. Get the script snippet from your chatbot provider
   In your provider’s dashboard, look for “Install on website”, “Widget code”, or “Live Chat”. You’ll usually get a <script> tag and maybe a small <div> placeholder.
2. Open your React app’s HTML shell
   For Create React App, open public/index.html. For Vite or other tools, open the main HTML file where the React root is declared.
3. Paste the script before the closing </body>
   This ensures the DOM is loaded first and the widget then injects itself into the page without blocking rendering.
4. Restart your dev server and verify the widget
   Run your dev command (npm start, npm run dev, etc.). Load the app in a browser and confirm the chat bubble appears on every page.
5. Optionally restrict it to specific routes
   If the provider supports programmatic initialization, you can skip index.html and instead insert the script using a top-level React component that only renders on certain routes, or toggles the widget on/off in effect hooks.

This method is fast and works even if your chatbot platform isn’t React-aware, but you have less control from inside React components.

Method 2 — Use a React chatbot component library

If you prefer everything to live in React, use a React-native webchat library.

Steps

1. Choose a React-compatible webchat SDK
   Some providers offer a dedicated React webchat library that you install from npm and use like any other component. For example, Botpress has a Webchat React library that requires React 18+.
2. Install the package
   From your project root, run a command like:

npm install @botpress/webchat

1. Wrap your app with any required provider
   Many SDKs expose a context provider (for example, WebchatProvider) that you place high in your component tree to initialize the client and theme.
2. Render the chat component where you want it
   In your layout or page component, add the chat UI:

import { Webchat } from '@botpress/webchat';

function Layout() {
  return (
    <>
      {/* page content */}
      <Webchat configuration= /* your bot config */  />
    </>
  );
}

1. Pass configuration, user info, and handlers
   Use props or hooks to pass bot IDs, theme options, and handlers for events like “message sent” or “conversation started”. Some SDKs provide hooks (such as useWebchat) for deeper control of conversation state. 
2. Style the chat component
   Use the library’s theming options or your own CSS/utility classes to match your app’s design.

This approach gives you full React integration, but it depends on the platform supporting a React SDK.

Method 3 — Embed a chatbot with an iframe

Use this method when your provider exposes a hosted chat page or iframe snippet.

Steps

1. Get the iframe embed code or URL
   Your chatbot provider should offer an “Embed via iframe” option that gives you a <iframe src=”…”> snippet and recommended dimensions.
2. Create a reusable ChatbotIframe component
   For example:

const ChatbotIframe = () => (
  <iframe
    src="https://your-chat-provider.com/agent/123"
    style= width: '100%', height: '100%', border: 'none' 
    title="Support chatbot"
  />
);

1. Place the component in your layout or page
   You can embed it as a full-screen support page or inside a sidebar/drawer.
2. Handle responsiveness
   Use CSS or responsive utilities to ensure the iframe looks good on smaller screens. You can constrain height with a fixed vh value or flexbox container.
3. Be aware of refresh behavior
   Because the chat is in an iframe, refreshing the page usually resets the conversation session. Some providers (including CustomGPT.ai) explicitly note this limitation for iframe embeds.

This method is extremely flexible and works with almost any SaaS chatbot, but is more isolated from your React state and routing logic.

How to do it with CustomGPT.ai

CustomGPT.ai lets you build an AI agent from your content, then deploy it as a Live Chat widget or iframe embed that works seamlessly in React apps.

Option A — Live Chat widget script (floating chat bubble)

1. Create and configure your agent
   In the CustomGPT.ai dashboard, create a CustomGPT.ai agent, add your data sources, and customize its behavior and appearance.
2. Make the agent public and open Live Chat
   On the agent card, open the menu, click CustomGPT.ai Deploy Agent docs, and click Make Public. Go to the Live Chat section.
3. Copy the Live Chat install code
   In the Live Chat page, copy the HTML script snippet provided under “CustomGPT.ai Live Chat install code”. This code injects the CustomGPT.ai chat bubble into any site when included in the HTML.
4. Paste the script into your React app’s HTML shell
   In your React project (for example, public/index.html), paste the script just before </body>. When your React app loads, the CustomGPT.ai chat bubble will appear on your pages, including local development builds.
5. Optionally use advanced customization
   For multilingual or dynamic behavior, follow the CustomGPT.ai CustomGPT.ai Live Chat customization docs docs to switch agents or languages via script, still using the same basic embed pattern.

Option B — iframe-embedded CustomGPT.ai agent

1. Open the agent’s Deploy → Integration tab
   In the CustomGPT.ai dashboard, open your agent, click Deploy, then go to the CustomGPT.ai iframe Integration docs. 
2. Copy the iframe code
   Scroll to the iframe section and click the code icon to copy the generated <iframe> CustomGPT.ai iframe embed code. This points to a hosted CustomGPT.ai chat UI for your agent.
3. Wrap the iframe in a React component
   Create a CustomGptIframe.tsx component and paste the iframe attributes into JSX (for example, using style or class names for height/width). Make sure to set title for accessibility.
4. Embed the component anywhere in your app
   Add <CustomGptIframe /> to a support page, drawer, or modal as needed. It behaves like any other React component.
5. Keep session behavior in mind
   The iframe guide notes that conversation history is not preserved when the page reloads, because the iframe is tied to the page lifecycle. Design navigation accordingly. 

All steps above are documented in the official CustomGPT.ai docs and rely only on the provided embed and Live Chat features. 

Example — Customer support chatbot in a React SPA

Let’s put it together with a realistic scenario.

You have a React dashboard for logged-in customers and you want a floating support chatbot that answers questions from your documentation.

1. Build a CustomGPT.ai agent from your docs
   In CustomGPT.ai, create an agent and connect your website to CustomGPT.ai or documentation URLs so it can answer support questions. 
2. Customize the agent and enable Live Chat
   Tweak its tone, suggested prompts, and appearance. Then go to CustomGPT.ai Deploy → Live Chat docs, make it public, and copy the Live Chat script embed. 
3. Add the script to public/index.html in your React app
   Paste the script before </body>. Start your React dev server and confirm that a “Chat” bubble appears in the bottom corner on all routes.
4. Test the experience in your actual flows
   Navigate through the dashboard and ask the bot questions you expect from real users. Adjust agent settings in CustomGPT.ai if answers are off.
5. Iterate on design and placement
   When ready for production, adjust widget settings (position, colors, greetings) from the CustomGPT.ai dashboard instead of changing your React code.

This approach gives you a fully hosted AI support agent with almost no extra React code, while still living alongside your React UI.

Conclusion

In the end, you’re choosing between fast, bolt-on chat widgets and fully controlled, maintainable integrations inside your product.

CustomGPT.ai lets you have both: a production-ready AI agent with copy-paste Live Chat or iframe embeds that still plug cleanly into your React architecture and data.

Embed a CustomGPT.ai chatbot in your React app, test it in your support flows, and launch with Live Chat or iframe code. Start building with CustomGPT.ai.

Frequently Asked Questions

How do I embed a chatbot in a React app?

You can embed a chatbot in React in three common ways: add a hosted widget script to your main HTML file for a sitewide chat bubble, render an iframe when you want the chatbot inline on a page, or place a React webchat component inside your component tree when chat needs tighter app integration. Most teams start with the script because it is the quickest setup, then move to a component or iframe when they need more control over layout or behavior.

Which embed method should you use in a React app: script widget, React component, or iframe?

Use a script widget when you want the fastest sitewide launch, an iframe when the chatbot should stay in a fixed section of a page, and a React component when it needs to share routing, layout, or app state. Teams with workflow-heavy use cases often need that deeper integration because chat becomes part of the product experience rather than just a floating support bubble.

How do I show a chatbot only on certain routes in a React app?

Render the chatbot from a top-level React component or layout and only initialize it on the routes where you want it to appear. This works well for paths such as help, support, or product pages where users are most likely to need assistance. If you paste a script directly into the main HTML file, the widget will usually load on every page, so route-specific display is easier when the chatbot is mounted from React instead.

Can I embed a chatbot inside a React page instead of using a floating chat bubble?

Yes. If you want the chatbot to appear inside a help center, landing page, or dashboard, use an iframe or other inline embed inside a React component instead of a floating bubble. This gives you fixed placement and lets you control the container’s size and responsiveness in React. That fixed placement is useful when the chatbot is part of a support workflow rather than a general sitewide assistant.

Should I build a custom React chat UI or use a hosted chatbot widget?

Build a custom React chat UI when you need full control over styling, layout, and how chat fits into your app. Use a hosted widget when speed and lower frontend maintenance matter more. A hosted widget is not the only option: React components and iframes are common alternatives when you need more control. The UI shell affects control and effort, while model and retrieval quality still drive the user experience.

What privacy and security checks should I make before adding a chatbot script to React?

Before adding a chatbot to React, check whether it uses tracking, cookies, or personal data and make sure your setup matches local privacy laws such as GDPR in the EU and CCPA/CPRA in California. If security review matters, look for independently audited controls such as SOC 2 Type 2 certification, then review the provider’s data-use terms before sending sensitive support conversations through the chatbot.

Related guide: If your React stack includes Next.js, compare the routing-specific setup in CustomGPT.ai Next.js chatbot embed patterns.

Related: if your frontend stack is Vue instead of React, use this guide to embedding a CustomGPT.ai chatbot in Vue.