# 📘 Third-Party Integration Guide - Call Detail Viewer
This guide explains how to integrate the Call Detail Viewer into third-party platforms.
## 🎯 Overview
The Call Detail Viewer allows you to display call details in a responsive iframe modal. It can be integrated in multiple ways:
1. **React Component** - For React-based applications
2. **Vanilla JavaScript** - For any web platform
3. **Direct Iframe** - Simple HTML iframe embedding
4. **API Integration** - Direct API calls
---
## 🚀 Method 1: React Component Integration
### Installation
If you're using React, you can import the `CallDetailEmbed` component:
```jsx
import CallDetailEmbed from 'path/to/CallDetailEmbed';
function YourComponent() {
return (
);
}
```
### Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `bid` | string | Yes | - | Business ID |
| `callid` | string | Yes | - | Call ID |
| `buttonText` | string | No | "View Details" | Button label |
| `buttonClassName` | string | No | "" | Custom CSS classes |
| `style` | object | No | {} | Inline styles |
| `autoOpen` | boolean | No | false | Open modal on mount |
| `children` | ReactNode | No | null | Custom trigger element |
### Examples
#### Basic Usage
```jsx
```
#### Custom Button
```jsx
```
#### Custom Trigger Element
```jsx
Click to view call
```
#### Auto-Open Modal
```jsx
```
---
## 🌐 Method 2: Vanilla JavaScript Integration
### Step 1: Include the Embed Script
Add this script tag to your HTML:
```html
```
### Step 2: Use the API
#### Option A: Programmatic Call
```html
```
#### Option B: Data Attributes (Auto-initialization)
```html
```
### JavaScript API
```javascript
// Open modal
window.CallDetailEmbed.open(bid, callid);
// Close modal
window.CallDetailEmbed.close();
// Access config
console.log(window.CallDetailEmbed.config);
```
### Complete Example
```html
Call Details Integration
Call Management
```
---
## 🔗 Method 3: Direct Iframe Embedding
### Basic Iframe
```html
```
### Responsive Iframe
```html
```
### Iframe with Modal Wrapper
```html
```
---
## 🔌 Method 4: API Integration
### Get Call Details API
```javascript
// Fetch call details
async function getCallDetails(bid, callid) {
const response = await fetch(
`http://your-domain:5000/calls/${bid}/${callid}`,
{
headers: {
'Content-Type': 'application/json'
}
}
);
const data = await response.json();
return data;
}
// Usage
const callData = await getCallDetails('7417', '91641440001764672424');
console.log(callData);
```
### API Endpoints
- **Get Call Details**: `GET /calls/{bid}/{callid}`
- **List Calls**: `GET /calls/{bid}`
- **Health Check**: `GET /health`
---
## 📱 Responsive Design
The embedded viewer is fully responsive and works on:
- ✅ Desktop (1024px+)
- ✅ Tablet (768px - 1023px)
- ✅ Mobile (< 768px)
The iframe automatically adjusts to the container size.
---
## 🎨 Customization
### Custom Styling
#### React Component
```jsx
```
#### Vanilla JavaScript
```javascript
// Customize via CSS
const button = document.querySelector('[data-call-detail-embed]');
button.style.cssText = `
background-color: #007bff;
color: white;
padding: 12px 24px;
border-radius: 8px;
border: none;
cursor: pointer;
`;
```
---
## 🔒 Security Considerations
1. **CORS**: Ensure your domain is whitelisted in the backend CORS settings
2. **Authentication**: Add authentication if needed for production
3. **HTTPS**: Use HTTPS in production
4. **Content Security Policy**: Configure CSP headers appropriately
---
## 📋 Integration Checklist
- [ ] Choose integration method (React/Vanilla JS/Iframe/API)
- [ ] Get your domain whitelisted for CORS
- [ ] Test with sample bid and callid
- [ ] Verify responsive behavior on mobile
- [ ] Test modal close functionality
- [ ] Verify iframe loads correctly
- [ ] Test error handling
- [ ] Add custom styling if needed
---
## 🐛 Troubleshooting
### Modal doesn't open
- Check browser console for errors
- Verify bid and callid are correct
- Ensure embed.js is loaded
- Check CORS settings
### Iframe shows blank
- Verify the URL is correct
- Check if `?iframe=true` parameter is included
- Verify backend API is accessible
- Check browser console for errors
### Styling issues
- Check if custom CSS conflicts
- Verify z-index values
- Ensure container has proper dimensions
---
## 📞 Support
For integration support:
1. Check this documentation
2. Review example code
3. Contact development team
---
## 📝 Example URLs
Replace `your-domain` with your actual domain:
- **Development**: `http://localhost:5173`
- **Staging**: `http://staging.yourdomain.com`
- **Production**: `https://yourdomain.com`
### Example Call Detail URL
```
http://your-domain:5173/calls/91641440001764672424?bid=7417&iframe=true
```
---
## 🎯 Quick Start
### For React Apps
```jsx
import CallDetailEmbed from './components/CallDetailEmbed';
```
### For HTML/JavaScript
```html
```
### For Direct Embedding
```html
```
---
**Ready to integrate!** Choose the method that best fits your platform. 🚀