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.

``cmd
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:

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

4. Here is an example to initialize TableauViz :

#### HTML Code

`html



`

#### JavaScript/TypeScript Code

`javascript
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