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
Market Infographic is a great dashboards to use for social media, email campaigns, in digital or print newsletters, and on websites (license permitting). It's meant to be a fun, quick bite of information for clients and prospects, so it's purposely ...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. Do a live walk-through of stats with your ...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 ...Using Market Review
Market Review is a high-level review of the market, meant for public communication and sharing. It's more detailed than the Infographic, but doesn't have as much information as Insights. It has a 13-month analysis, as well as a year-over-year option. ...Market Insights v5 New Features
The newest version of Market Insights is our biggest update yet. While we did a lot of technical "house-cleaning" behind the curtain, here are all the new features that impact you and what you can do with the dashboard. New Design! The chart area is ...