In the second half of 2021, Tableau has developed the Embedding API v3, a new version of the JavaScript/embedding API. As they describe it themselves: "With Tableau’s Embedding API v3, we have redesigned the experience for embedding to make your life easier, to modernize the experience, and to enable new functionality."
This page showcases the use of the new Embedding API and was designed while the feature was in prerelease/alpha. The JS library to use is currently hosted at https://embedding.tableauusercontent.com/dist-embedding/tableau.embedding.3.0.latest.beta.js.
Additionally, this new method for Embedding enables the use of Connected Apps for authentication. Connected apps enable seamless authentication like SSO does, without the need for an IdP. It is a more secure method than Trusted Tickets, based on a trust relationship between Tableau and a custom application, which is established and verified through an authentication token using the JSON Web Token (JWT) standard.
The viz embedded below makes use of both v3 of the Embedding API, as well as a the concepts described for Connected Apps.
Note: we're using a generic user here, for the JWT token generation. See the page on Connected Apps for more details on the correct use.
<script type="module" src="https://dub01.online.tableau.com/javascripts/api/tableau.embedding.3.latest.js"></script>
<tableau-viz id="tableauViz"
src="https://dub01.online.tableau.com/t/biztorybenelux/views/SuperstoreSample/Overview"
token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImlzcyI6Ijc0ZmI2MWJlLTM4OTItNGQ4YS1hZjBjLTQzMTE4YWZlMzY2MyIsImtpZCI6ImRmZjc3Y2JjLWE5ZjktNDgxOC04NmVhLWQzOGQ5ODBiMzJhMSJ9.eyJzdWIiOiJyb25hbGQuc2Nob29uaGVlcmVAY29tcGFueS5jb20iLCJhdWQiOiJ0YWJsZWF1Iiwic2NwIjpbInRhYmxlYXU6dmlld3M6ZW1iZWQiXSwiZXhwIjoxNzM0Nzg5NjE0LCJqdGkiOiJiMGEzZWIwMC1hN2RjLTQxNjgtYjI1NS1iMDAwOWEzMTgzZWIifQ.pgg2uhXvPSWUS4BbRPmYlloCGK6bDNppcWhivHeheLA"
device="default" toolbar="bottom" hide-tabs height="600px" width="1050px"
style="width: 100%; max-width: 1050px; height: 100%; max-height: 600px;">
<viz-filter field="Segment" value="Consumer" />
</tableau-viz>