Embedding Tableau visualizations on a website
One of the features of Tableau Server is that it allows you to embed your visualizations on websites. However, if you simply use the embed code generated by Tableau Server, users of mobile devices or smaller (or larger) screens may not be able to view and interact fully with your visualization.
Below are some steps we've found to work with Tableau visualizations. If you've had success with other settings, please let us know!
- Before publishing the workbook to Tableau Server, go to the Dashboard in Tableau Desktop and set the Size to Automatic.
- After publishing the workbook to Tableau Server, set the width style to 100% in the <div> and <object> tabs of the embed code. For example:
- Original code
<script type='text/javascript' src='https://tableau.mit.edu/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 1143px; height: 527px;'><object class='tableauViz' width='1143' height='527' style='display:none;'><param name='host_url' value='https%3A%2F%2Ftableau.mit.edu%2F' /> <param name='site_root' value='' /><param name='name' value='Regional_responsive/Obesity' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='showVizHome' value='n' /></object></div>
- Updated code
<script type='text/javascript' src='https://tableau.mit.edu/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 100%; height: 527px;'><object class='tableauViz' width='100%' height='527' style='display:none;'><param name='host_url' value='https%3A%2F%2Ftableau.mit.edu%2F' /> <param name='site_root' value='' /><param name='name' value='Regional_responsive/Obesity' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='showVizHome' value='n' /></object></div>
- Original code