​
Installation

To install the required package, use the following command:

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.

import { Standard } from '@release0.com/react';

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

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

import { Popup } from '@release0.com/react';

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

​
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:

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' },
      }}
    />
  );
};

​
Additional Configuration

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

import { Standard } from '@release0.com/react';

const App = () => {
  return (
    <Standard
      agent="ag_wkudr50npuorrrjz6pyx84yv"
      style={{ width: '100%', height: '600px' }}
      prefilledVariables={{
        '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.