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 in 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 is straight-forward and only involves a few steps.
Starting with Tableau 2021.4, the Embedding API v3 library is hosted on Tableau Server, Tableau Cloud, Tableau Public, and on the Tableau CDN (
https://embedding.tableauusercontent.com/). The library (
type attribute to
module in the
For example, to use the latest Embedding API v3 library on Tableau Public, you would use the following line of code on your web page:
For more information about the Embedding API v3 library file, see Access the Embedding API.
<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='https://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 TableauViz objects and components.
<tableau-viz id="tableauViz" src="https://my-server/views/my-workbook/my-view" device="phone" toolbar="bottom" hide-tabs> </tableau-viz>
Here’s the code:
Here’s what it looks like when you put the code in a web page:
To see what more you can do with the Embedding API v3: