Installation

Install the Indite React SDK to integrate your bot into your React application:

npm install @indite.io/react

Standard

Embed your bot directly into your React component using the Standard component. You can customize the container’s size to fit your layout.

import { Standard } from '@indite.io/react'
 
const App = () => (
  <Standard
    bot="lead-generation-copy-3luzm6b"
    style={{ width: '100%', height: '600px' }}
  />
)

This creates a responsive container with full width and a fixed height of 600px.

Popup

Display your bot as a popup window using the Popup component. The autoShowDelay property controls when the popup appears.

import { Popup } from '@indite.io/react'
 
const App = () => (
  <Popup bot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
)

The popup will automatically open 3 seconds after the page loads.

Bubble

Show your bot as a floating bubble on your site. You can customize its appearance and preview message.

import { Bubble } from '@indite.io/react'
 
const App = () => (
  <Bubble
    bot="lead-generation-copy-3luzm6b"
    previewMessage={{
      message: 'I have a question for you!',
      autoShowDelay: 5000,
      avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
    }}
    theme={{
      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
    }}
  />
)

This will display a bubble and show a preview message after 5 seconds.

Additional Configuration

You can prefill bot variables by passing the prefilledVariables prop. This is useful for personalizing the bot experience based on user data or context.

import { Standard } from '@indite.io/react'
 
const App = () => (
  <Standard
    bot="lead-generation-copy-3luzm6b"
    style={{ width: '100%', height: '600px' }}
    prefilledVariables={{
      'Current URL': 'https://my-site/account',
      'User name': 'John Doe',
    }}
  />
)

This example automatically provides the current URL and user name to the bot.
Learn more about variables here.

If your site URL contains query parameters (e.g. https://indite.io?User%20name=John%20Doe), those variables will be injected into the bot automatically. You do not need to manually transfer query parameters to the bot configuration.