How to Embed Dashboard in Website: Complete Guide
Want to display live data dashboards directly on your website? This guide covers every method from simple iframe embedding to custom integrations.
👆 Live Dashboard - This is an actual embedded VibeFactory dashboard. Try interacting with it!
🎉 Special Offer - Save 25%
Use code WELCOME25 for 25% off your first month
Why Embed Dashboards?
Embedded dashboards bring data to where users already are. Instead of sending people to a separate dashboard URL, the insights live directly in your:
- Client portals: Show customers their data within your app
- Internal intranets: Display KPIs on company home pages
- Product pages: Showcase metrics to prospects
- Blog posts: Illustrate articles with live data
- Admin panels: Integrate analytics into existing tools
Method 1: Iframe Embedding
The simplest approach. An iframe displays another web page within your page.
Basic Iframe Code:
<iframe src="https://p70ecac3a-u8486b74c.vibefactory.ai/" width="100%" height="600" frameborder="0"></iframe>
👆 This is the actual code used to embed the live dashboard you see at the top of this article!
Pros
- Simple to implement - one line of HTML
- Dashboard updates automatically
- Full interactivity preserved
- Works with any dashboard tool that provides a URL
Cons
- Visible branding from dashboard provider
- Some tools block iframe embedding
- Mobile responsiveness can be tricky
- Cross-origin limitations may apply
Responsive Iframe Embedding
For better mobile experience, use CSS to make iframes responsive:
<style>
.dashboard-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.dashboard-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
<div class="dashboard-container">
<iframe src="https://p70ecac3a-u8486b74c.vibefactory.ai/"></iframe>
</div>
Method 2: JavaScript SDK Embedding
Some dashboard platforms offer JavaScript SDKs for more control.
Typical SDK Pattern:
<!-- Include the SDK -->
<script src="https://cdn.dashboardprovider.com/sdk.js"></script>
<!-- Container for the dashboard -->
<div id="dashboard-container"></div>
<!-- Initialize -->
<script>
DashboardSDK.embed({
container: '#dashboard-container',
dashboardId: 'your-dashboard-id',
filters: {
region: 'North'
}
});
</script>
SDK embedding allows:
- Passing parameters and filters programmatically
- Responding to user interactions
- Custom authentication integration
- Dynamic dashboard switching
Method 3: Export and Self-Host
Some tools let you export dashboard code (HTML, CSS, JS) to host yourself.
Workflow:
- 1. Build your dashboard in the tool
- 2. Export as HTML/CSS/JS bundle
- 3. Host the files on your own server
- 4. Include in your website like any other page
Pros
- Complete control over hosting
- No third-party dependencies at runtime
- Full white-label capability
- Can modify the code if needed
Cons
- Data doesn't update automatically (need to re-export)
- Requires technical knowledge to deploy
- Maintenance responsibility shifts to you
Method 4: API + Custom Build
For maximum flexibility, use a data API and build your own visualization layer.
This approach:
- Fetches data from an API (your own or the dashboard provider's)
- Uses charting libraries (Chart.js, D3, Recharts) for visualization
- Gives you complete design control
- Requires significant development effort
Best for: Products where dashboards are a core feature and you need deep customization.
Embedding Considerations
Authentication
How will users authenticate to see the dashboard? Options include public access, password protection, single sign-on (SSO), or passing tokens from your app.
Performance
Embedded dashboards add to page load time. Consider lazy loading (only load when scrolled into view) for below-the-fold dashboards.
Branding
Does the dashboard tool allow white-labeling? Remove provider logos for a seamless experience in client-facing contexts.
Mobile Experience
Test on mobile devices. Some dashboards designed for desktop don't work well when embedded in responsive sites.
Step-by-Step: Embed a VibeFactory Dashboard
- 1. Create your dashboard: Upload data and generate dashboard at VibeFactory
- 2. Get the embed URL: Copy the dashboard URL from the share options
- 3. Add iframe to your site: Paste the iframe code into your HTML
- 4. Adjust sizing: Set width and height for your layout
- 5. Test: Verify it works on desktop and mobile
Use Cases by Industry
SaaS Companies
Embed usage analytics in customer portals. Show clients their ROI, usage patterns, and key metrics right in your app.
Agencies
Embed client reporting dashboards in client portals. Replace PDF reports with live, interactive data.
Publishers
Embed data visualizations in articles. Show readers live statistics that update over time.
Internal Teams
Embed KPI dashboards in Notion, Confluence, or intranet pages. Bring data to where people already work.
Common Issues and Solutions
"Dashboard won't load in iframe"
The dashboard provider may have X-Frame-Options headers that block embedding. Check their docs for embed-specific URLs or contact support.
"Dashboard looks cut off on mobile"
Use responsive iframe techniques. Set height dynamically based on content, or use aspect ratio containers.
"Users have to log in separately"
Look for single sign-on (SSO) options. Some tools support passing authentication tokens so users don't double-login.
Related Articles
Create an Embeddable Dashboard
Build a dashboard you can embed anywhere. Upload your data and get started in 60 seconds.
Create Dashboard Free