Tableau Embedding API v3


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


Introducing the Embedding API v3

The Embedding API v3 provides you an easy way to embed and integrate Tableau views in your web apps and web pages. The Tableau Embedding API v3 provides for the next-level of enhancements over the Tableau JavaScript API v2. The Tableau’s Embedding API v3 features a redesigned process for embedding to make your life easier, to modernize the experience, and to enable new functionality.

Some parts of using the Embedding API v3 are the same as the JavaScript API v2, and others have just slightly different syntax. But the biggest difference is the initialization of the API, which uses web components.

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 image, link, or div. Using the web component technology, we have created a <tableau-viz> component that you can use to add visualizations to your web pages.

Getting started with simple embedding

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 (tableau.embedding.3.0.0.min.js) is a JavaScript ES6 module. To use the library in your web application, you need to set the 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>

2. Add the Tableau viz web component

For the Embedding API v3, the initialization step is now easier than it was for the Tableau JavaScript API. You can initialize the API as part of your HTML code when you use to the <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>

Note that in a future release of the Embedding API v3, you will be able to use the Embedding API and JavaScript code to create and configure the Tableau Viz object, if you need programmatic control over the embedded view.

3. Customize the Tableau viz web component

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> 

Example of basic embedding

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:

What’s next?

To see what more you can do with the Embedding API v3: