3 Replies Latest reply on Apr 14, 2019 10:35 PM by Shubham Sharma

    Hiding Toolbar Using Javascript API

    Shubham Sharma


      I am trying to embed a viz from tableau public to a web page using the Javascript API.

      I'd like to completely remove the bottom toolbar.



      My code is as:

      <!DOCTYPE html>




      .button {

        background-color: #4CAF50; /* Green */

        border: none;

        color: white;

        padding: 15px 32px;

        text-align: center;

        text-decoration: none;

        display: inline-block;

        font-size: 16px;

        margin: 4px 2px;

        cursor: pointer;


      .button2 {background-color: #008CBA;}

      .button3 {background-color: #f44336;}




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

          <script type="text/javascript">

              var viz;

              function initViz() {

                  var containerDiv = document.getElementById("vizContainer"),

                      url = "https://public.tableau.com/views/SalesAnalysis_321/ImproveProfitInSouth?:embed=no&:tabs=no&:toolbar=no&:showShareOptions=false&:showVizHome=no&:tooltip=no&:showVizHome=no&:showAppBanner=false&:subscriptions=no",

                      options = {

                          showTabs: false,

      hideToolbar: true,

      hideTabs: true



                  viz = new tableau.Viz(containerDiv, url, options);




              function exportToPDF() {




      function exportImage() {




      <body onload="initViz();">

          <div id="vizContainer"></div>

          <button class="button button2" onclick="exportToPDF();">Export As PDF</button>

      <button class="button button3" onclick="exportImage();">Export As IMAGE</button>




      I've attached the html file too.


      Please share your suggestions.