Was this page helpful?
Yes No

Embed Dashboards

You can embed a Tableau dashboard in your own web site or wiki page and you can have it display in different layouts based on the size of the IFrame.

  • To automatically make the right layout appear for your users, regardless of which device they are using, create device-specific layouts for your dashboard in Tableau Desktop. When you do, Tableau Server and Tableau Online automatically display the correct layout based on IFrame size, provided you use 100% for the IFrame's width and height instead of exact pixel values (see below).
  • To always make a certain layout appear, regardless of IFrame size, use the device parameter in your embed code.

In the following example, the embed code displays a dashboard that's 800 pixels wide by 600 pixels high. Exact width and height values are part of the default embed code you get when you click the Share button at the top of a view or dashboard:

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' style='width: 800px; height: 600px;' >
  <object class='tableauViz' width='800' height='600' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

In this example, where the dashboard uses device-specific layouts, the style attributes for the div class have been removed and the object class values for width and height have been replaced with 100%. In most cases, the correct layout displays; that is, if width and height aren't also being controlled elsewhere in your CSS.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

If the correct layout doesn't display, it may be because the HTML page you're using for embedding has a <!DOCTYPE html> tag, and that tag is preventing items in the body of the page from resizing to 100% (see details on Stack Overflow). A workaround is to add the following lines to the body of your HTML page:

<style>
  html, body { height: 100% }
</style>

The following example assumes that the embedded dashboard has device-specific layouts. The device parameter is set to phone. This means that, no matter which device displays the dashboard, the layout created for phones will be the one that's displayed.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />
  <param name='device' value='phone' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

IFrame dimensions and device layouts

The dashboard layout a device displays is based on the smallest dimension (height or width) of the iframe in which the Tableau view appears. Sometimes Desktop, Tablet, or Phone layouts may appear on other types of devices. For example, a Tablet layout may appear on a desktop computer if the display or browser window is small.

If the smallest iframe dimension is ... This device layout appears ...
500 pixels or less Phone
Between 501 and 800 pixels Tablet
Greater than 800 pixels Desktop

For details on how to create a dashboard that uses device-specific layouts, see Create Dashboard Layouts for Different Device Types.