> ## Documentation Index
> Fetch the complete documentation index at: https://docs.release0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to integrate Release0 with React

> Integrate Release0 agents in React applications using optimized components for seamless user experiences. This guide provides usage examples and integration methods for React projects.

## Installation

To install the required package, use the following command:

```bash theme={null}
npm install @release0.com/react
```

## Standard Integration

The `Standard` component creates a container with a width of 100% (matching the parent width) and a height of 600px.

```javascript theme={null}
import { Standard } from '@release0.com/react';

const App = () => {
  return (
    <Standard
      agent="ag_wkudr50npuorrrjz6pyx84yv"
      style={{ width: '100%', height: '600px' }}
    />
  );
};
```

<Frame style={{ maxWidth: '400px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/YWq2zuUGbHzFURAJ/images/integrations/react-standard.png?fit=max&auto=format&n=YWq2zuUGbHzFURAJ&q=85&s=34d30104acf9d6284e8fe21079e680f2" alt="React Standard" width="544" height="601" data-path="images/integrations/react-standard.png" />
</Frame>

## Popup Integration

The `Popup` component automatically triggers a popup window after a specified delay. The example below triggers it after 3 seconds:

```javascript theme={null}
import { Popup } from '@release0.com/react';

const App = () => {
  return <Popup agent="ag_wkudr50npuorrrjz6pyx84yv" autoShowDelay={3000} />;
};
```

<Frame style={{ maxWidth: '400px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/YWq2zuUGbHzFURAJ/images/integrations/react-popup.png?fit=max&auto=format&n=YWq2zuUGbHzFURAJ&q=85&s=adfd36efc0f4de2e65dddacd5680e54e" alt="React Popup" width="547" height="399" data-path="images/integrations/react-popup.png" />
</Frame>

## Bubble Integration

The `Bubble` component displays a bubble with a preview message. In this example, the message appears after 5 seconds, and you can customize the theme and avatar:

```javascript theme={null}
import { Bubble } from '@release0.com/react';

const App = () => {
  return (
    <Bubble
      agent="ag_wkudr50npuorrrjz6pyx84yv"
      previewMessage={{
        message: 'I have a question for you!',
        autoShowDelay: 5000,
        avatarUrl: 'https://release0.com/images/logo512.png',
      }}
      theme={{
        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
      }}
    />
  );
};
```

<Frame style={{ maxWidth: '400px' }}>
  <img src="https://mintcdn.com/release0-13d037a7/YWq2zuUGbHzFURAJ/images/integrations/react-bubble.png?fit=max&auto=format&n=YWq2zuUGbHzFURAJ&q=85&s=9dd1caec966649d6e8540c69eae54718" alt="React Bubble" width="543" height="643" data-path="images/integrations/react-bubble.png" />
</Frame>

## Additional Configuration

To prefill agent variables in your embed code, use the `initialContext` option. The example below pre-populates values for `Current URL` and `User name`:

```javascript theme={null}
import { Standard } from '@release0.com/react';

const App = () => {
  return (
    <Standard
      agent="ag_wkudr50npuorrrjz6pyx84yv"
      style={{ width: '100%', height: '600px' }}
      initialContext={{
        'Current URL': 'https://my-site/account',
        'User name': 'John Doe',
      }}
    />
  );
};
```

> **Note**: If your site URL contains query parameters (e.g., `https://release0.com?User%20name=John%20Doe`), these variables are automatically injected into the bot. Manual transfer is not necessary.

***

### Validation and Testing

Before deploying, ensure:

1. All components are rendering as expected.
2. Variables are being prefilled correctly.
3. Auto-show delays and custom themes match your requirements.