Embed Tableau Views into Webpages Using Tableau Embedding API

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

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,  a <tableau-viz> component is created in The Tableau Embedding API and can be used to add visualizations to your web pages.

Starting with Tableau 2021.4, you can get the Embedding API v3 library from multiple locations, including Tableau Server, Tableau Cloud, Tableau Public, and the Tableau CDN (https://embedding.tableauusercontent.com/). As a general rule, you should always get the Embedding API v3 library from the same Tableau instance that hosts your visualizations. This ensures that you always use a version of the library that is compatible with the version of Tableau you are using.

For convenience, you can link to latest version of the library (tableau.embedding.3.latest) rather than the specific version for the release (3.0.0, 3.1.0, etc.). The file (tableau.embedding.3.latest.min.js, or tableau.embedding.3.latest.js) will always point to the most recent release of the library on that instance of Tableau. The file (tableau.embedding.3.latest.min.js, or tableau.embedding.3.latest.js) is only available on Tableau Server, Tableau Cloud, and Tableau Public. If you use the Tableau CDN (https://embedding.tableauusercontent.com/), you need to link to the specific version of the file that you want to include.

The Embedding API v3 library is a JavaScript ES6 module. To include the library in the HTML code for your web application, you need to set the type attribute to module in the <script> tags.

For Tableau Server 2021.4 and later, add the following code to a web page to link to the latest Embedding API v3 library:

<script type="module" src="https://my-server/javascripts/api/tableau.embedding.3.latest.min.js"></script>

Replace my-server with the name of your Tableau Server. For example, if your server is www.example.com, to use the Embedding API v3 library you would include this line in your HTML page:

<script type="module" src="https://www.example.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

For Tableau Cloud, use the following:

<script type="module" src="https://Tableau-Pod.online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

Replace Tableau-Pod with the name of your pod. For example, if your Tableau Pod is 10ax, the URL would look like this:

<script type="module" src="https://10ax.online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

For Tableau Public, use the following:

<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>