Embed Dashboards

Applies to: Tableau Cloud, Tableau Server

The embed code for Tableau Server 2022.3 and later and Tableau Cloud has changed to use the Embedding API v3. For current information about device specific layouts and dashboard sizing, see Configure Embedding Objects and Components in the Embedding API help. The information in this topic is for prior versions of embedding (using the Tableau JavaScript API v1 and v2).

Embed dashboards using prior versions of embedding

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 Cloud 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(Link opens in a new window)). 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 lessPhone
Between 501 and 800 pixelsTablet
Greater than 800 pixelsDesktop

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

Back to top
Thanks for your feedback!Your feedback has been successfully submitted. Thank you!