How to Embed a Displayr Document within a Web Page

This article describes how to embed a Displayr document (Dashboard) within a web page, like below:

Requirements

A published Displayr dashboard
Ability to edit the HTML for the web page
Sufficient Server time for private dashboards and API to access the dashboard

Method

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 published Displayr dashboard.
Replace myurl in the HTML code with the URL of the dashboard. Be sure to copy the link to the Dashboard exactly as it appears in your browser (e.g., with capital D in 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.

Other Considerations

If your dashboard is published using the Login and Password required method, viewers will be prompted to log into their Displayr accounts to view the dashboard. For more information about inviting viewers to create Displayr accounts, see: How to Invite New Users to Your Displayr Account
- Viewers will sometimes see this screen when viewing an embedded dashboard published with Login and Password required. The prompt allows the embedded dashboard to access its cookies so it can maintain their login.
- This popup behavior is browser-dependent and therefore can be a little different from browser to browser. Viewers will normally see this page the first time the embedded dashboard loads.
- Viewers will need to login into Displayr using another tab, then return to the embedded dashboard and click the Allow Embedded Access button, which should open a prompt for them to accept.
- Viewers will not receive a prompt to log in or allow cookies if the dashboard is published using Anyone with the link.
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.