How to embed a shared Dashboard within a web page

Nov 15, 2021

Posted by

Phil Leggetter

On this page

Embed with an iframe
Expanding the iframe to match the height of the Dashboard

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

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>
    )
}