index.html

<!-- loading the tableau js file -->
<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<!-- setting up the containers for the tableau viz and the buttons -->
<!-- we assign IDs so we can grab on to them in JS -->
<!-- we also add some styles which mean the buttons show up on the right hand side of the dashboards -->
<div id="rootTableau" style="display: flex;">
  <div id="vizContainer"></div>
  <div
    id="buttonContainer"
    style="display: flex; flex-direction: column;"
  ></div>
</div>

<!-- This is where the JS starts -->
<script type="text/javascript">
  // initialise the viz variable, which will hold the tableau visualisation
  let viz;
  // grab the vizContainer container so we can add the visual in it with JavaScript
  let containerDiv = document.getElementById("vizContainer");
  // define the options for each viz (such as no toolbar, what device specific layout should be)
  // change the height and the width so the dashboard looks good on the page
  let options = {
    hideTabs: true,
    hideToolbar: true,
    width: "800",
    height: "800",
    device: "desktop",
    onFirstVizSizeKnown: function() {
      // grab all the togglebuttons
      // set their visability to visible
      // the reason being is that we want to buttons only show when we know when the viz has loaded and has height and width. Otherwise the buttons jump around on the page.
      const toggleButton = document.querySelectorAll(".toggleButton");
      toggleButton.forEach(button => (button.style.visibility = "visible"));
    }
  };

  //   create an array of URLS, one for each dashboard, these will then also get buttons
  const dashboards = [
    {
      url: "your Url",
      label: "Label of Button 1"
    },
    {
      url: "your Url",
      label: "Label of Button 2"
    }
  ];

  // define a function that will run the moment the document has finished loading - this will hold the very first visual in the array
  function initViz() {
    if (viz) {
      // if viz exists, get rid of it and rerender
      viz.dispose();
    }
    viz = new tableau.Viz(containerDiv, dashboards[0].url, options);
  }

  function createButtons() {
    const buttonContainer = document.getElementById("buttonContainer");
    // loop over the dashboards array and create buttons for each dashboard
    dashboards.map((dashboard, index) => {
      const btn = document.createElement("button");
      btn.style.visibility = "hidden";
      btn.className = "toggleButton";
      btn.innerText = dashboard.label;
      btn.addEventListener("click", () => {
        if (viz) {
          // if a viz is already loaded, remove it and load the one that's linked to the button
          viz.dispose();
          viz = new tableau.Viz(containerDiv, dashboard.url, options);
        }
      });

      buttonContainer.appendChild(btn);
    });
  }

  // once the document has loaded, execute the initViz function for the first viz and also create the buttons
  document.addEventListener("DOMContentLoaded", () => {
    createButtons();
    initViz();
  });
</script>