How to embed a shared Dashboard within a web page

  • Phil Leggetter

Nov 15, 2021

Contents

Estimated reading time: 3 minutes ☕

Dashboards let you bring together a number of charts and Insights into a single view. Dashboards are available to anyone with access to the Project that they are part of. However, you may want to share a Dashboard with other people who do not have a PostHog login. In these situations you can share a link to the Dashboard or you could decide to embed the Dashboard within a publicly accessible web page.

In this short tutorial we'll cover how to be embed a dashboard within a web page.

Embed with an iframe

A shared Dashboard contains:

  • The PostHog logo
  • The Dashboard title
  • The Dashboard description
  • The Project name
  • When the Insights within the Dashboard were last updated
  • The Insight charts

You can also choose a theme (light, dark, or system) for your embedded dashboard when configuring the share settings.

Dashboard with explanation labels

To embed a shared Dashboard using an <iframe /> set the src attribute to the URL of the public Dashboard.

For example, the following code:

HTML
<iframe
    width="100%"
    height="700"
    frameborder="0"
    src="https://app.posthog.com/embedded/fEjuk1e61iQjYiRjODPDjpbsyhIfpg"
/>

Produces the following embedded dashboard:

Expanding the iframe to match the height of the Dashboard

Due to restrictions with cross-origin iframes, we emit a special message from the embedded Dashboard which you can listen to in order to adjust the iframe to match its height. This is ideal if you want to show the full dashboard without the need to scroll.

Simple HTML embed example

HTML
<html>
    <iframe
        id="my-posthog-iframe"
        name="MyPostHogIframe"
        width="100%"
        height="400"
        src="https://app.posthog.com/embedded/PQ_VjRR-9F49pRJfmLaoflADhoKTsw"
    ></iframe>


    <script type="text/javascript">
        window.addEventListener('message', (e) => {
            if (e.data.event === 'posthog:dimensions' && e.data.name === 'MyPostHogIframe') {
                document.getElementById('my-posthog-iframe').height = e.data.height
            }
        })
    </script>
</html>

React application example

TypeScript
function App() {
    const [height, setHeight] = useState(400)


    useEffect(() => {
        const onChange = (e: any) => {
            if (e.data.event === 'posthog:dimensions' && e.data.name === 'MyPostHogIframe') {
                setHeight(e.data.height)
            }
        }
        window.addEventListener('message', onChange)
        return () => window.removeEventListener('message', onChange)
    }, [])


    return (
        <div>
            <iframe
                name="MyPostHogIframe"
                width="100%"
                height={height}
                src="https://app.posthog.com/embedded/PQ_VjRR-9F49pRJfmLaoflADhoKTsw"
            ></iframe>
        </div>
    )
}

Subscribe to our newsletter

build mode

Read by 75,000+ founders and builders

We'll share your email with Substack

PostHog is the leading platform for building self-driving products. With a full suite of developer tools – AI observability, product analytics, session replay, feature flags, experiments, error tracking, logs, and more – PostHog captures all the context agents need to diagnose problems, uncover opportunities, and ship fixes. A data warehouse and CDP tie it all together, unifying that context into one source agents can read across. You can steer it all from Slack, the web app, the desktop (PostHog Desktop), or your own editor via the MCP.

Community questions