@tableau/embedding-api

How to use the Tableau Embedding API

The Tableau Embedding API enables you to integrate Tableau visualizations into your own web applications. Add custom controls, and take advantage of modern, secure methods of authentication to interact with the visualization from your web application.

1. The Embedding API library is available in multiple versions, and each version of the library corresponds to a specific version of Tableau Server. For compatibility, you should use the version of the library that matches the version of Tableau you are using. Using the table found at Versions of the Tableau Embedding API, determine the version of the NPM package to install. For example, if your embedded vizzes are hosted on Tableau version 2023.2, you should install version 3.6.x of @tableau/embedding-api.

   Warning: If your embedded vizzes are in environments where you do not control the deployed version of Tableau, like Tableau Public or Tableau Cloud, it is recommended to import the Embedding API library from the server itself—not installing it from NPM—since the server will always provide the latest compatible version. See Where to get the Embedding API v3 library for more information.

2. Install the version of Tableau Embedding API library that is compatible with the version of Tableau . For example, the following command installs the v3.9.0 of @tableau/embedding-api library in the node_modules folder of the current directory.

   npm install @tableau/embedding-api@3.9.0
   

3. In your JavaScript or TypeScript code, import the TableauViz object from the Embedding API v3 library. You can then create a new instance of the object and configure the object with the path to the view and other properties and methods supported by the object (See Configure Embedding Objects and Components). To simplify your code and improve load times, import just the classes you need, for example TableauViz to create the JavaScript object and TableauEventType to set an event listener. To import TableauViz and TableauEventType, you would use the following:

   import { TableauViz, TableauEventType } from '@tableau/embedding-api';
   

4. Here is an example to initialize TableauViz :

   HTML Code

   <div id="tableauViz"></div>
   

   JavaScript/TypeScript Code

   const viz = new TableauViz();
   
   viz.src = 'https://my-server/views/my-workbook/my-view';
   viz.toolbar = 'hidden';
   
   document.getElementById('tableauViz').appendChild(viz);
   

   It’s important to note that creating the object (new TableauViz()) does not render the view. To do that, you must add it to the DOM that is, add it to document using appendChild(), as in the example above.

For more information

Refer to Official Tableau Embedding API Documentation