Intermediate
How to embed dashboards externally on PostHog
Quick Answer
PostHog allows you to embed dashboards externally by generating shareable links with access tokens and embedding them using iframes. You can control access permissions and customize the embedded view through dashboard settings.
Prerequisites
- PostHog account with dashboard access
- Admin or dashboard permissions in your PostHog organization
- Web development knowledge for iframe implementation
- Target website or application where you want to embed the dashboard
1
Navigate to your dashboard
Log into your PostHog account and go to Dashboards from the left sidebar. Select the dashboard you want to embed externally by clicking on its name.
Tip
Make sure your dashboard contains the insights and data you want to share before proceeding with embedding.
2
Access dashboard sharing settings
In the top-right corner of your dashboard, click the Share button (usually represented by a share icon). From the dropdown menu, select Embed dashboard or Generate embed link.
3
Configure embedding permissions
In the sharing modal, toggle on Allow external embedding. Choose your access level:
- Public - Anyone with the link can view
- Password protected - Requires a password you set
- Domain restricted - Only works on specified domains
Tip
Use domain restrictions for better security when embedding on specific websites.
4
Generate the embed code
Click Generate embed code to create the iframe code. PostHog will provide you with:
- Direct embed URL
- Complete iframe HTML code
- Access token (if applicable)
5
Customize embed appearance
Modify the iframe parameters to fit your needs:
- Set
widthandheightattributes - Add
frameborder="0"for seamless integration - Include
allowfullscreenif needed
<iframe src="https://app.posthog.com/embedded/dashboard-id?token=xxx" width="100%" height="600" frameborder="0"></iframe>Tip
Use responsive width (100%) and fixed height for better mobile compatibility.
6
Implement the embed code
Paste the iframe code into your website's HTML where you want the dashboard to appear. Ensure the parent container has appropriate styling:
<div style="width: 100%; min-height: 600px;">
<iframe src="your-posthog-embed-url" width="100%" height="600" frameborder="0"></iframe>
</div>7
Test the embedded dashboard
Open your website in a browser and verify that:
- The dashboard loads correctly
- All charts and data are visible
- Interactive elements work as expected
- The embed respects your access restrictions
Tip
Clear your browser cache if the dashboard doesn't load immediately after implementation.
8
Monitor and maintain access
Return to PostHog's Dashboard settings > Sharing to:
- View embedding analytics and usage
- Update access permissions when needed
- Regenerate tokens if compromised
- Disable embedding if no longer needed
Tip
Regularly review embedded dashboard permissions and rotate access tokens for enhanced security.
Troubleshooting
Dashboard not loading in iframe
Check if your domain is whitelisted in PostHog's embed settings and verify the access token is valid. Also ensure your website supports iframes and doesn't have restrictive Content Security Policy headers.
Access denied or authentication errors
Verify that external embedding is enabled for the dashboard and check if domain restrictions are properly configured. Regenerate the embed token if the current one has expired.
Dashboard appears cut off or improperly sized
Adjust the iframe
width and height attributes. Use responsive CSS units like percentages and ensure the parent container has adequate space. Consider using min-height instead of fixed height.Charts not updating with real-time data
Embedded dashboards may have caching delays. Check your dashboard's refresh settings in PostHog and ensure the embed URL includes proper parameters for data freshness. Some features may be limited in embedded views.
Ready to get started with PostHog?
Put this tutorial into practice. Visit PostHog and follow the steps above.
Visit PostHog →