This article describes how to embed a Displayr document (Dashboard) within a web page, like below:
- A published Displayr dashboard
- Ability to edit the HTML for the web page
- Sufficient View Time to access the dashboard
- Copy the following code. This creates an iframe container of a certain size for your embedded dashboard.
<iframe src="myurl" width="780" height="450" frameborder="0"></iframe>
- Paste into the appropriate spot in the HTML of your web page.
- Copy the URL of your Displayr dashboard.
- Replace myurl in the HTML code with the URL of the dashboard.
- Remove any #page reference at the end of the URL, if you want the Dashboard to go to the first page. The code for my example above is:
<iframe src="https://app.displayr.com/Dashboard?id=02874c16-960c-486a-b493-3ae3e81dd8aa" width="780" height="450" frameborder="0"></iframe>
- Save your HTML.
- Load your web page to test.
- Because the embedded Displayr Dashboard is a different size than the dashboard directly, you may need to make items in the dashboard bigger than you normally would.
- You may want to turn off some of the functionality (e.g., remove the search box or the Export options as outlined here: How to Remove the Header Strip in View Mode).
- The above code shows the dashboard as a fixed size, which may look odd on different screen sizes. Though not covered here, it is possible with more technical knowledge to make the size of the iframe responsive (per this post) or create multiple versions of the dashboard for desktop vs mobile devices and use HTML to show the correct one.
- Each time someone accesses your webpage with the embedded dashboard, it is the same as someone accessing the dashboard directly and will use View Time hours accordingly.