How do I embed a dashboard in a third-party website?

Users can embed a public dashboard as an iframe in external sites.

Note that our previous solution encountered limitations in terms of both usability and scalability:

• Users had to configure the dashboard height on the website they are embedding the dashboard.
• Since the user needed to determine the final height of the dashboard manually and set the iframe height, when the dashboard was edited, the user had to reconfigure the height on the iframe.
• This involved back and forth between the stakeholders updating the dashboard on the platform and stakeholders maintaining the third party website.

As such, we have implemented a new approach that allows users to not worry about the dashboard height and instead only add the dashboard link in the iframe. See below for details:

• The user will, along with the iframe, embed an iframe resizer script which will perform the height configuration automatically depending on the final height of the embedded dashboard. This new solution comes with the tradeoff of having to use and implement an external script to track size (iframeResizer.min.js).
• The iframe link is accessible in the "Share" modal from the "Link" tab, or follows the following format: [website url]/dashboard/[dashboard_slug]?iframe=1.
• The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.

See example usage below:

<div className="App">    <div className="iframe-div">      <iframe        id="iframeId"        title="2411b7b9-ddd6-4614-9bd0-c58206202db6"        className="iframe-embebed"        scrolling="yes"        src="http://localhost:5000/dashboard/hiv_eradication_plan"      ></iframe>    </div></div><script  type="text/javascript"  src="https://davidjbradshaw.com/iframe-resizer/js/iframeResizer.min.js"></script><script type="text/javascript">  iFrameResize({    enablePublicMethods     : true,    // Enable methods within iframe hosted page    autoResize              : true,  }, '#iframeId');                          </script>

Finally, please note additional limitations of embedded dashboards on third party websites:

• Tiles are lazy loaded so the whole dashboard will load faster. The tiles don't start to load until they come into view, so the few tiles in view will load quicker. The reason for this is that if the whole page loads at once, then it will take longer because you are calling every single query at once rather than being able to prioritize the ones at the top of the page.
• Currently we require the user to add external script on their website.
• We do not support communication to and from the iframe. For instance: (1) internation (filtering, grouping by, zooming, etc) should be through the options on our site and (2) dashboards cannot dynamically load different tiles and that would require different dashboards.
• We can only embed the dashboard page. This is the only page we have invested time in ensuring it embeds nicely.
• There is a minimum size requirement. If the page is not at least 200px by 200px, it will show the loading bar indefinitely.
• Our dashboards are designed to fit nicely within a roughly fullscreen page. We don’t support any type of rearranging of tiles as the page gets smaller, the zoom will just decrease. We try to avoid horizontal scrolling so users can view the whole width at once. We do allow viewers to change the zoom level.
• The dashboards are very reactive to the height and width of the page, meaning we change the zoom level to best view everything. So rendering the site to a ½ or quarter page (like in a sandbox) may cause the dashboard to resize a lot initially and give a poorer experience (small font, etc).

Updated on: 24/09/2025