# ROI Dashboard Embed
A JavaScript component that allows you to embed the ROI Dashboard into any web application, including PHP applications.
## Features
- ✅ Easy integration with any web application
- ✅ Works with PHP, HTML, or any web framework
- ✅ Complete ROI dashboard functionality
- ✅ Responsive design with Tailwind CSS
- ✅ TypeScript support
- ✅ UMD and ES module builds
- ✅ Built with Vite for optimal performance
## Installation
### Option 1: NPM Package (Recommended)
```bash
npm install @percy.ai/roi-embed
```
### Option 2: Direct Script Include
Download the built files from the `dist/` directory and include them in your project.
## Quick Start
### HTML Usage
```html
ROI Dashboard
```
### PHP Integration
```php
ROI Dashboard
```
### JavaScript/TypeScript
```javascript
import { initROIEmbed } from '@percy.ai/roi-embed';
import '@percy.ai/roi-embed/dist/roi-embed.css'; // Import CSS
// Initialize the dashboard
initROIEmbed('roi-dashboard', {
userId: 123,
clientKey: 'your-client-key',
defaultRange: {
from: new Date(2024, 0, 1),
to: new Date()
}
}).then(root => {
console.log('ROI Dashboard initialized successfully');
}).catch(error => {
console.error('Failed to initialize ROI Dashboard:', error);
});
```
## Required Files
When using the embed, you need to include **both** files:
1. **JavaScript**: `roi-embed.umd.js` (1.72MB) - The component logic
2. **CSS**: `roi-embed.css` (66KB) - Tailwind CSS and component styles
## Configuration Options
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `userId` | number | Yes | The ID of the user to display ROI data for |
| `clientKey` | string | No | Client API key for authentication |
| `defaultRange` | object | No | Default date range for the dashboard |
| `defaultRange.from` | Date | No | Start date for the default range |
| `defaultRange.to` | Date | No | End date for the default range |
| `apiUrl` | string | No | Custom API URL (uses default if not provided) |
## Examples
Complete examples are provided in the package:
- `example.html` - Basic HTML integration
- `example.php` - PHP application integration
## Build Information
The package includes:
- **UMD Build** (`roi-embed.umd.js`): For direct browser usage with `