Overview
Consuelo’s dashboard iFrame widget allows you to embed external analytics tools directly in your CRM. This creates a unified view of your customer data and analytics.
| Tool | Integration Method | Best For |
|---|
| PostHog | iFrame embed | Product analytics, funnels |
| Amplitude | iFrame embed | User behavior, cohort analysis |
| Mixpanel | iFrame embed | Event tracking, retention |
| Google Analytics | iFrame embed | Traffic, acquisition |
| Custom Dashboards | iFrame embed | Anything you build |
PostHog Integration
Step 1: Create a Shared Dashboard
-
In PostHog, build your growth dashboard with:
- Signup funnel
- Feature adoption
- Cohort retention
- Revenue metrics
-
Click Share → Share dashboard
-
Enable Public link
-
Copy the share URL
Step 2: Add to Consuelo
- Go to Dashboards in Consuelo
- Open your growth dashboard
- Click + Add Widget
- Select iFrame
- Paste the PostHog share URL
- Configure dimensions (recommended: full width, 600px height)
- Save
Public links don’t require authentication. Ensure your dashboard doesn’t contain sensitive data, or use password protection if available.
Amplitude Integration
Step 1: Create a Dashboard
- In Amplitude, navigate to Dashboards
- Create a new dashboard
- Add charts for:
- Active users
- Conversion events
- Retention curves
- Event segmentation
Step 2: Get Embed URL
- Click Share on your dashboard
- Select Embed
- Copy the iframe embed URL
Step 3: Add to Consuelo
Follow the same steps as PostHog above.
Custom Analytics Dashboard
Build your own analytics dashboard and embed it:
Example: Next.js Dashboard
// pages/dashboard/growth.js
export default function GrowthDashboard() {
return (
<div className="dashboard">
<h1>Growth Metrics</h1>
<div className="metrics">
<MetricCard title="Signups Today" value={120} />
<MetricCard title="Activation Rate" value="45%" />
<MetricCard title="MRR" value="$12,500" />
</div>
</div>
);
}
Data Synchronization
Option 1: Direct iFrame (Read-Only)
External tool displays data independently. No data flows between systems.
Pros:
- Simple setup
- No data sync needed
- Tool-native visualizations
Cons:
- Data lives in two places
- No single source of truth
- Can’t combine CRM + analytics data
Option 2: API Integration (Two-Way Sync)
Use Consuelo’s GraphQL API to sync data:
// Sync signups from analytics to Consuelo
const syncSignups = async () => {
const signups = await fetchAnalyticsSignups();
for (const signup of signups) {
await consuelo.mutate({
mutation: CREATE_PERSON,
variables: {
data: {
email: signup.email,
signupDate: signup.timestamp,
acquisitionChannel: signup.utm_source
}
}
});
}
};
Security Considerations
- Use HTTPS for all embed URLs
- Avoid embedding dashboards with PII if using public links
- Configure CSP if self-hosting Consuelo
- Review permissions in external tools regularly
Refresh and Caching
iFrame Behavior
- Content loads fresh on dashboard open
- External tools may cache data
- No automatic refresh while viewing
Best Practices
- Manual refresh: Reload the dashboard page
- Scheduled exports: Use Scheduled Reports
- Real-time alerts: Configure in external tools, not via iFrame
Troubleshooting
iFrame Not Loading
| Issue | Solution |
|---|
| X-Frame-Options denied | Tool blocks embedding. Check tool settings. |
| Mixed content error | Ensure HTTPS URLs |
| Authentication required | Use public/shared links, not authenticated URLs |
| Blank widget | Check URL is correct and accessible |
Mobile Responsiveness
iFrame widgets may not resize perfectly on mobile. Test your dashboards on different screen sizes.
Alternative: Full-Screen Mode
For complex dashboards, use external tools directly:
- Build dashboards in your analytics tool
- Bookmark alongside Consuelo
- Use workflow triggers to sync key events to Consuelo
This avoids iFrame limitations while maintaining data flow.
