# 🔧 Integration Troubleshooting Guide
## Common Issues and Solutions
### Issue 1: Iframe Shows "It may have been moved, edited, or deleted"
**Symptoms:**
- Modal opens but iframe content is blank
- Shows error message in iframe
- Console shows CORS or network errors
**Solutions:**
#### 1. Check React App is Running
```bash
# Make sure the React app is running
cd /var/www/html/sara/dashboard-frontend
npm run dev
```
The app should be accessible at: `http://10.0.0.194:5173`
#### 2. Verify the URL
Test the URL directly in browser:
```
http://10.0.0.194:5173/calls/91641440001764672424?bid=7417&iframe=true
```
If this doesn't work, the React app might not be running or accessible.
#### 3. Check CORS Settings
The backend needs to allow requests from your domain. Check `dashboard-backend/app.py`:
```python
CORS(app, resources={
r"/*": {
"origins": ["http://10.0.0.194:5173", "http://localhost:5173", "*"],
...
}
})
```
#### 4. Use Explicit Base URL
In your HTML, set the base URL explicitly:
```html
```
### Issue 2: Fullscreen Permission Violations
**Symptoms:**
- Console shows: `[Violation] Potential permissions policy violation: fullscreen`
**Solution:**
This is fixed in the updated embed.js. The fullscreen permission has been removed. If you still see this, clear your browser cache and reload.
### Issue 3: Script Not Loading
**Symptoms:**
- `window.CallDetailEmbed` is undefined
- Console shows 404 error for embed.js
**Solutions:**
1. **Check Script Path:**
```html
```
2. **Verify File Exists:**
The file should be at: `/var/www/html/sara/dashboard-frontend/public/embed.js`
3. **Check Network Tab:**
Open browser DevTools → Network tab → Reload page → Check if embed.js loads (status 200)
### Issue 4: Modal Opens But Content Doesn't Load
**Possible Causes:**
1. **Backend API Not Running:**
```bash
# Check if backend is running
curl http://10.0.0.194:5000/health
```
2. **Invalid Call ID or Business ID:**
- Verify the call exists in the database
- Check the bid and callid are correct
3. **Network Issues:**
- Check if you can access the React app from the same network
- Verify firewall settings
### Issue 5: Loading from Local File (file://)
**Problem:**
When opening HTML file directly (file://), the script might not detect the correct base URL.
**Solution:**
Always set the base URL explicitly:
```html
```
## Testing Steps
### Step 1: Test React App Directly
Open in browser:
```
http://10.0.0.194:5173/calls/91641440001764672424?bid=7417&iframe=true
```
Should show call details without sidebar.
### Step 2: Test Backend API
```bash
curl http://10.0.0.194:5000/calls/7417/91641440001764672424
```
Should return JSON with call data.
### Step 3: Test Embed Script
Open: `http://10.0.0.194:5173/test-integration.html`
Click the test button and check console for errors.
### Step 4: Test Your Integration
Use the provided HTML code and check:
1. Browser console for errors
2. Network tab for failed requests
3. Iframe loads correctly
## Complete Working Example
```html
Call Details Integration
Call Management
```
## Quick Checklist
- [ ] React app is running on `http://10.0.0.194:5173`
- [ ] Backend API is running on `http://10.0.0.194:5000`
- [ ] Can access React app directly in browser
- [ ] Base URL is set explicitly in your HTML
- [ ] Script src uses full URL: `http://10.0.0.194:5173/embed.js`
- [ ] No CORS errors in console
- [ ] Call ID and Business ID are correct
- [ ] Browser console shows no errors
## Still Having Issues?
1. **Check Browser Console:**
- Open DevTools (F12)
- Check Console tab for errors
- Check Network tab for failed requests
2. **Verify Services:**
```bash
# Check React app
curl http://10.0.0.194:5173
# Check backend
curl http://10.0.0.194:5000/health
# Check embed script
curl http://10.0.0.194:5173/embed.js
```
3. **Test with Direct URL:**
Open this in browser:
```
http://10.0.0.194:5173/calls/91641440001764672424?bid=7417&iframe=true
```
If this works, the issue is with the embed script integration.
If this doesn't work, the issue is with the React app or backend.