Installation

Install the Indite React SDK to begin integrating your bot:

npm install @indite.io/react

Embedding a Standard Bot

Use the Standard component to embed your bot directly into your React application. You can adjust 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 example creates a bot container that spans the full width of its parent and has a fixed height of 600px.

Popup

Display your bot as a popup window using the Popup component. The autoShowDelay property lets you control 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: Prefilling Bot Variables

You can prefill variables for your bot 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',
    }}
  />
)

In this example, the bot receives the current URL and user name automatically.
For more details about variables, see here.

If your site URL contains query parameters (for example, 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.