How to Embed a dashboard in a website

How to Embed a dashboard in a website

READ ME FIRST

Successful embedding is dependent on your web hosting platform.  Not all websites play nice with embed/iframe code.  If you have problems, first test the dashboard URL by opening it in a new browser tab.  If the dashboard displays correctly, the problem is somewhere in your website code.  

Embed Basics

Dashboards which are considered "Public" are designed to be shared, which is often done using embed (i.e. iframe) in a website. Since the data updates automatically, this is a great way to make the most current market information available to anyone who's interested!

All dashboards are distributed via URL.  Your AOR/MLS has the URLs for the public dashboards they've approved for sharing.  In order to embed the dashboard in your website, place the highlighted iframe code around the URL. It will end up looking like below, where DashboardName is replaced with a custom name.  Typos are the top reason why embed code fails, so pay close attention when you enter your code! 

<iframe src="https://dashboards.domusanalytics.com/v/DashboardName"></iframe>

The link is CASE Sensitive!!

A Note about Size

The dashboard inherits the size of the iframe it's given, and will “scale to fit” within the iframe.  Because of this, the width and height SHOULD NOT be specified inside the iframe, as it will prevent the dashboard from scaling appropriately on smaller screen sizes, and negatively impact user experience.

When an iframe doesn't play nice

Depending on your website host, the basic iframe code may not work as expected.  This can result in the dashboard not being responsive to smaller screens, or just shrinking down so small that's it's not useable.  If you find yourself in this situation, your iframe "container" is probably hard-coded somewhere to a smaller size than what's needed.  Finding this setting and making it larger should solve the issue.  This is the second most common reason why embed code fails!

If you have access to modify css

If you have the access and ability to modify the css of your website, building a DIV may solve your size problem.  You can use the below code if desired, replacing DashboardName with your custom URL.

/* iframe Container */
.iframe-container {
  overflow: hidden;
  // Calculated from the aspect ratio of the content; (in case of 16:9 it is 9/16= 0.5625)
  padding-top: 75%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
/* iframe HTML */
<div class="iframe-container">
  <iframe src="https://dashboards.domusanalytics.com/v/DashboardName" allowfullscreen></iframe>
</div> 

If all else fails...

You probably need to contact your web host for help.  Sometimes it's as simple as changing the template your page is using; sometimes they'll need to adjust some code on their end.  Everyone's website code is different, and we're the data experts, not the website experts.  If you've run the READ ME FIRST test above, and the dashboard successfully rendered, you'll probably have more luck asking the web guys to resolve your issue.

    • Related Articles

    • Using Market Infographic

      Learn how to use the Market Infographic dashboard.

    • Sharing stats with clients and prospects

      There are several ways you can share market statistics information with your clients and prospects. Note that some of these suggestions link to other Knowledge Base articles with additional information. Embed the Infographic in your website using ...

    • Monthly availability of Dashboards

      Domus dashboards are NOT like the old school PDFs that you might be used to. While other vendors send reports directly to your email that you can post or share, that's not how we work. Instead, our dashboards are online, interactive reports that ...

    • Dashboard troubleshooting

      Dashboard doesn't load correctly All Domus dashboards are web applications which are delivered through URLs. As such, they rely on an active internet connection to work. So if your internet goes out or massively slows down, the dashboards won't load. ...

    • Creating Branded Stats

      Whether it's for an email campaign, posting on social media, or handing out at an open house, it's nice to have stats with your own branding information on them. While you can sign up for a custom infographic for that purpose, there are lots of ways ...