Skip to content
intoCHAT

React integration

Add an AI chatbot to your React app

Add the intoCHAT widget with one script tag in index.html, or load it from a small component with useEffect. It stays in place across client-side route changes.

Create your agent free

Last updated:

How intoCHAT works in React

The intoCHAT widget is a plain script, not a React component. It reads your agent ID from the data-chatbot-id attribute of the script element that loaded it, then adds a chat bubble to document.body, outside your React tree. That means it works with any router or state library, and re-renders never touch it. Colors, position and the welcome message are set in intoCHAT, so you don't need a new build to change them.

Install intoCHAT in a React app

  1. Create and train your agent

    Sign up for intoCHAT, create an agent and add your site on the Knowledge tab. The crawl renders JavaScript-heavy pages before reading them, so routes your app renders in the browser are read as visitors see them.

  2. Copy the script tag

    Open the Share tab and copy the code under Bubble Chat. It already contains your agent ID.

  3. Simplest option: paste it into index.html

    Paste the script tag just before the closing body tag in index.html: in the project root for Vite, or in public/index.html for Create React App.

  4. Or load it from a component

    To keep it in code instead, add the IntoChatWidget component below and render it once in your root component, such as App. Use one option, not both.

  5. Check it

    Run your app. The chat bubble appears in the bottom corner and stays as you move between routes.

IntoChatWidget.jsx

import { useEffect } from 'react'

export default function IntoChatWidget() {
  useEffect(() => {
    // Load the widget only once, even when StrictMode runs effects twice
    if (document.getElementById('intochat-embed')) return

    const script = document.createElement('script')
    script.id = 'intochat-embed'
    script.src = 'https://www.intochat.ai/api/embed.js'
    script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
    document.body.appendChild(script)
  }, [])

  return null
}

The widget reads its agent ID from the data-chatbot-id attribute of the script element that loaded it, so set the attribute before adding the element to the page. The id check stops a second copy in development.

What the agent can do in your React app

  • Client-side actions

    Register functions with window.IntoChatActions.register, and the agent can call them during a chat to read state from your app or trigger something it defines.

  • Custom API actions

    Let the agent call your HTTP API with bearer, basic, API key or custom header auth. Import a request from cURL, and choose which response fields the model sees.

  • Reads your rendered pages

    The website crawl renders JavaScript-heavy pages before reading them, finds up to 500 URLs from your sitemap and links, and lets you exclude paths with patterns.

  • Grounded answers

    Hybrid semantic and keyword search over your content, with rules that keep answers to your sources, resist prompt injection and say when the answer isn't there.

  • Lead capture

    Ask for an email address or phone number in the chat, manually, by rules or when the AI decides. Leads are emailed to you and export to CSV.

  • No rebuild to restyle

    Colors, avatar, launcher icon, position and welcome message are set on the Appearance tab and load with the widget, not from your bundle.

Frequently asked questions

Should I use index.html or the component?

index.html is the simplest option and loads the widget on every page. Use the component when you want to decide in code whether it loads, for example only in production or only after a visitor accepts cookies. Use only one of the two, or you get two bubbles.

Why do I see two chat bubbles in development?

React StrictMode runs effects twice in development, and the widget adds a new bubble each time its script runs. The id check at the top of the effect stops the second run from adding another script. Also check that the script isn't in index.html as well.

Does the widget slow down my React app?

Loaded from the component, the script is added after your app has rendered, so it doesn't hold up the first render. In index.html it is a regular script at the end of the body. In both cases the chat window runs in its own iframe served by intoCHAT, separate from your app's code.

Does it work with React Router and other client-side routing?

Yes. The widget lives in document.body, outside your React root, so route changes and re-renders don't affect it. It also stays if the component that loaded it unmounts, until the next full page load.

Can the agent run code in my React app?

Yes, with client-side actions. Register a function with window.IntoChatActions.register, and the agent can call it during a chat to read state from your app or trigger something it defines. If your code runs before the widget has loaded, push the name and function as a pair onto window.IntoChatActionsQueue, and the widget registers them when it starts.

My app has a Content Security Policy. What do I need to allow?

Allow www.intochat.ai in script-src for the script, connect-src for loading the agent's settings and frame-src for the chat window. Without these, the browser blocks the widget and the bubble doesn't appear.

See it answer from your own website

Paste your website address and chat with an agent built from your pages. It takes about a minute.

Create your agent free

Free plan, no credit card needed.