Javascript API to hide navigation breadcrumb and header

Question

Using Tableau Server 9.2. I am playing with the Javascript API to embed vizs in web pages. It works nicely except I want to hide the top part of the viz page, everything including and above the navigation breadcrumb part. The part circle in red is what I want to remove from the embedded viz. What options can be used to hide this part of the embedded viz?

Here is my html and js code to embed the viz.

<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>

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

<script>
  var placeholderDiv = document.getElementById("tableauViz");
  var url = "https://tableau.byu.edu/#/site/DCE/views/Tableauworkbooksanddatasources/UnpublishedWorkbooks?:embed=y";
  var options = {
     hideTabs: true,
     width: "800px",
     height: "700px",
     hideToolbar: true,
     onFirstInteractive: function() {
       // The viz is now ready and can be safely used.
     }
  };
  var viz = new tableau.Viz(placeholderDiv, url, options);
</script>

In your visualisation there will be a share button. Use the link provided in that — minatverma

minatverma minatverma · Accepted Answer · 2016-01-23T13:06:45

For var url

Replace the current link with the link that is inside under share button .

Do not use the link under Embed , rather use the one below Email.

share button can be found when you open your viz. inside tableau .

Let me know if this works .

Javascript API to hide navigation breadcrumb and header

1 Answers