Use the Tableau Embedding API v3 to integrate Tableau visualizations into your own web applications. Harness the power of the Embedding API to add custom controls, and take advantage of modern, secure methods of authentication that allow users to interact with the visualization from your web application.
In this section
Web components are a standard available in all modern browsers, that allow you to add custom, and 3rd party, functionality to your web page using HTML syntax as easily as adding an
div. Using the web component technology, we have created a
<tableau-viz> component that you can use to add visualizations to your web pages.
For an overview and demonstration of the Embedding API v3 in action, see the TC 21 talk, A New Era Tableau Embedding.
The Embedding API v3 is under active development, join the Tableau Developer Program and keep up-to-date with the coming features.
Embedding a Tableau visualization on a web page straight-forward and only involves a few steps.
The Embedding API v3 library is hosted on the Tableau CDN,
https://embedding.tableauusercontent.com/. The library (
type attribute to
module in the
<script> tags. Note that you cannot link to a local copy of the library, as it will cause Cross-Origin Resource Sharing (CORS) errors. You must link to the library on the CDN.
For example, to use the latest version of the library, include the following
<script> element in the HTML code for your web application:
<script type="module" src="https://embedding.tableauusercontent.com/tableau.embedding.3.0.0.min.js"></script>
<tableau-viz> web component. For example, the following code is all you need to embed a Tableau view into your HTML pages.
<tableau-viz id="tableauViz" src='http://my-server/views/my-workbook/my-view'> </tableau-viz>
To specify options on how to initialize the viz, you can add those as attributes of the
<tableau-viz> element. For example, you can use attributes to show or hide the toolbar, or tabs, set the height and width of the viz, and set the device layout. For more information about the attributes you can use, see Configure the
<tableau-viz> web component.
<tableau-viz id="tableauViz" src="http://my-server/views/my-workbook/my-view" device="phone" toolbar="bottom" hide-tabs> </tableau-viz>
Here’s the code:
<script type="module" src="https://embedding.tableauusercontent.com/tableau.embedding.3.0.0.min.js"></script> <tableau-viz id="tableauViz" src='https://public.tableau.com/views/Superstore_24/Overview' device="phone" toolbar="bottom" hide-tabs> </tableau-viz>
Here’s what it looks like when you run the code:
To see what more you can do with the Embedding API v3: