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:
- All components are rendering as expected.
- Variables are being prefilled correctly.
- Auto-show delays and custom themes match your requirements.