CODEWITHSUNDEEP
javascriptapicross-domainembedtableau-api
nhuff717
nhuff717

Reputation: 369

How do I use the Tableau Javascript API to embed dashboards in a webpage for dashboards hosted in Tableau Online?

I am trying to recreate the example provided by Tableau here with a dashboard that is hosted in Tableau Online. A separate article from Tableau talks about modifying the URL of the JS API based on where the dashboard is hosted, which I've tried to follow.

Even though the resulting embed should require a login to be displayed, I expect that login to be displayed in that embedded output/iframe on my webpage. Please refer to the included code. Instead, I'm getting a CORS error:

Refused to display 'https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2&:size=800,700&:embed=y&:showVizHome=n&:bootstrapWhenNotified=y&:tabs=n&:apiID=host0#navType=1&navSrc=Parse' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Is the approach I'm taking correct? If embedding Tableau Online dashboards is possible with their JS API, how do I avoid the CORS error?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>JPL Dashboard</title>
    <script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
        <script type="text/javascript">
          function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
              //url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
              url = "https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2",
              options = {
                hideTabs: true,
                onFirstInteractive: function() {
                  console.log("Run this code when the viz has finished loading.");
                }
              };

            var viz = new tableau.Viz(containerDiv, url, options);
          }
        </script>
</head>
<body>
    <div id="vizContainer" style="width:800px; height:700px;"></div>
    <script type="text/javascript">
        (function () {
            window.onload = function () {
                initViz();
            };
        })();
    </script>
</body>
</html>

Upvotes: 1

Views: 1496

Answers (1)

Geraldine Zanolli
Geraldine Zanolli

Reputation: 71

Ensure that the URL used for embedding the view is from the Share option in Tableau Online:

  1. In Tableau Online, navigate to the view encountering the problem.
  2. Click the Share button.
  3. Copy the URL link within the Link section.
  4. Configure the embed code to use this URL rather than the Tableau Online URL in the browser address bar.

If it is correct, try to add: <meta http-equiv="X-Frame-Options" content="allow"> in the HTML header

I hope it is helpful, Gigi

Upvotes: 3

Related Questions