Displayr documents can be embedded within other web pages. This allows you to easily add automated reporting and interactivity to your own websites.

Examples

Our Bubble Gum Reach Calculator example has been embedded below. The user has access to all the functionality that comes with when they export as a web page the normal way using Displayr.

The feature-packaged Burger Brand Tracking case study is shown below. This example adds navigation, via the pane on the left.

 

How to set it up

The process is very simple:

  1. Export your displayr document as a web page.
  2. Copy the URL address of the exported web page.
  3. Add the following code to the HTML of your web page, replacing my url with the URL from step 2 and setting width and height as per your desires:

<iframe src="my url" width="780" height="450" frameborder="0"></iframe>

 

Customizing the appearance of the embedded document

When you embed a Displayr document into a website, it often makes sense to do things a bit differently to building a normal dashboard. In particular:

  1. Make everything bigger than you normally would (font size, chart sizes, etc.).
  2. Turn off some of the functionality (e.g., remove the search box or the Export options). This is done by modifying the CSS.

 

Responsive designs for cell phones and other mobile devices

Often web pages are read on devices with smaller screens, like cell phones and tablets. The code above embeds Displayr at a fixed size. If you wish to make the embedding responsive, things get more complex. There are two steps:

  1. Make the size of the iframe responsive. See this post for more information about how to do this.
  2. Consider creating multiple versions of the dashboard, each designed for different screen sizes, and dynamically update the URL conditional on the size of the screen.

Thr simple approach, which we have implemented in this post, is that whenever a user accesses this page on a mobile device we show a picture rather than the embedded dashboard, and the user can click on the picture to go through to an interactive dashboard.