Writing Embed Code for Views
The embed code for Tableau Server 2022.3 and later and Tableau Cloud has changed to use the Embedding API v3. For current information on how to embed a view with the Embedding API v3, see Basic Embedding in the Embedding API help. The information in this topic is for prior versions of embedding (using the Tableau JavaScript API v1 and v2).
If you’re writing your own embed code, you can take one of two approaches:
-
Use Tableau JavaScript: This is the preferred approach. Use the embed code that Tableau generates as the starting point for your own code, adding or editing object parameters that control the toolbar, tabs, and more. The default embed code, which relies on a Tableau JavaScript file, is also the only way to control the load order of multiple embedded views.
-
Specify the View URL: Embed a view using an iframe or image tag, where the source is the URL you get when you click Share on a view and then click Copy Link. You may want to do this if you can’t use JavaScript on your website. There may also be situations when all you can specify is a URL.
When you embed a view, you should define a width and height that the view will be displayed in. Otherwise, the client browser will arbitrarily pick a width and height.
Note: When you need to specify the server name for Tableau Cloud in embed code (for example, to point to the location of the JavaScript API), use the URL https://online.tableau.com.
Use Tableau JavaScript
The following code shows an example of embed code that is generated when you click Share on a published view. Special characters in the host_url parameter are URL encoded, and those in the site_root and name parameters are notated as HTML numeric character references.
Tableau Server example:
<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> <param name='site_root' value=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Tableau Cloud example:
<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> <param name='site_root' value='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> </object> </div>
The
source for the <script> tag is the URL for the
Tableau Server and Tableau Cloud JavaScript file, viz_v1.js. The JavaScript file handles
assembling the full URL of the view that’s displayed for your users.
The name and site_root object
parameters are the only required parameters; all other parameters
are optional.
Specify the View URL
Here’s an example of embedding the same view using an iframe, where the source is the URL you get when you click Share on a view and then click Copy Link.
Tableau Server example:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Tableau Cloud example:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
The embed URL parameter is required, and you can optionally
include parameters that control the toolbar and revert options,
among others. You can also add filters to the URL that control the
specific data that shows when a view is loaded.
Tip: When using this method, add the HTML attribute allowfullscreen="true" to the iframe element to enable the Full Screen button on the view.