How to Embed Tableau Dashboard/Reports on the WebPage

The importance of creating reports or dashboards in Tableau is to share it across to the individuals who can get benefit from it. There are many ways to share, but the most interactive way is to embed Tableau Dashboard on a webpage.

There are many possible reasons to embed Tableau dashboard in webpages. Here we will discuss the two most possible ideas to do it as follows:

Reasons to Embed Tableau Dashboard in Webpage

1. Interactive Webpage experience

Whenever a user comes to your website, he is not sure to make a correct decision. The users will get drifted from your websites more quickly as they do not find anything appealing or exciting.

TABLEAU TRAINING AND CERTIFICATION
• Career Focused • Course Certificate • Lifetime Access & Free Updates • Lifetime Support

 

If you embed an interactive Tableau dashboard on your Webpage, the user will get more meaningful insights to come to a conclusion and find the Webpage appealing and attractive to dig more insights.

2. Give the clients everything at one spot

Suppose you are offering service to your clients in a particular product. You will need the total branding control too. But if you make your client visit the third-party solutions like Tableau, they will get irritated.

Instead, embed the Tableau in your product so that your client won’t feel discomfort.

Pre-Requisites to Embed Tableau Dashboard in Webpage

The following are the two pre-requisites to embed Tableau dashboard in a webpage:

1. Tableau Online/ Tableau Server

  • You should have Tableau Online or Tableau Server account. If you do not have one, you need to subscribe it first
  • The content of the Tableau that you will be embedding should be published to Tableau Online or Tableau Server

2. Python

Python 3 should be pre-installed to complete the process.

To check if Python 3 is installed or not – Open Command prompt à type python three or python

Methods to Embed Tableau Dashboard in Web Page

The following are the three methods to follow to embed Tableau Dashboard in a Webpage:

  1. Iframe
  2. Tableau Embed Code
  3. Tableau JavaScript API

Let us discuss the steps in detail.

Let us Get Started

The first step is you need to run your Python HTTP server. To run it follow the steps given below:

  • For running Python HTTP server and HTML files create an empty directory
  • In the command line change the directory to home directory
  • Now create an empty folder and name tableau_embedded
  • Now change the directory to the newly created folder
  • Spin up a python HTTP server to view the running and serving of python HTTP server files
  • Open a browser and go to http://localhost:8000/
  • Create an HTML file directory by using the following code:

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Embedded Analytics with Tableau</title>

</head>

<body>

This is where the dashboard will go.

</body>

</html>

  • Save it naming index.html
  • Refresh the browser
  • The template to embed Tableau is all set to go further

Method 1 – iframe

This is the simplest method. To embed Tableau, follow the above-given steps and after that, follow the below-given steps:

  • Open Tableau Online / Tableau Server
  • Open the content you want to embed
  • Click on the share button
  • A dialogue box will open named share view
  • Click on the Copy link button
  • Now edit the index.html file by placing iframe tag inside the body
  • Provide the source link copied along with the height & width of the dashboard you want to embed
  • Below is the reference code:

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Embedded Analytics with Tableau</title>

</head>

<body>

<iframe width=”1335px” height=”894px” src=”<tableau_url>”></iframe>

</body>

</html>

  • Now refresh your browser the view the embedded Tableau dashboard.

Method 2 – Tableau Embed Code

To apply this method, follow the below steps:

  • Open the content you want to embed from Tableau Online / Tableau Server
  • Click on the share button
  • A dialogue box will open named share view
  • Select </> Embed Code
  • Again edit index.html with the following code by replacing the iframe tag

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Embedded Analytics with Tableau Online</title>

</head>

<body>

<script type=’text/javascript’ src=’https://us-east-1.online.tableau.com/javascripts/api/viz_v1.js’></script>

<div class=’tableauPlaceholder’ style=’width: 1488px; height: 706px;’>

<object class=’tableauViz’ width=’1488′ height=’706′ style=’display:none;’>

<param name=’host_url’ value=’https%3A%2F%2Fus-east-1.online.tableau.com%2F’ />

<param name=’embed_code_version’ value=’3′ />

<param name=’site_root’ value=’&#47;t&#47;zuar’ />

<param name=’name’ value=’Regional&#47;GlobalTemperatures’ />

<param name=’tabs’ value=’yes’ />

<param name=’toolbar’ value=’yes’ />

<param name=’showAppBanner’ value=’false’ />

<param name=’filter’ value=’iframeSizedToWindow=true’ />

</object>

</div>

</body>

</html>

  • Refresh to view your Tableau dashboard in the browser

Method 3 – Tableau JavaScript API

This is the most power full method because it gives both Tableau dashboard and Webpage to interact with each other. Follow the given below steps:

  • Open index.html
  • Update it with the given below code:

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Embedded Analytics with Tableau</title>

</head>

<body>

<div id=”vizContainer”></div>

<script src=”https://us-east-1.online.tableau.com/javascripts/api/tableau-2.min.js”></script>

<script>

var viz

function initViz() {

var containerDiv = document.getElementById(“vizContainer”),

url = “https://us-east-1.online.tableau.com/t/zuar/views/Regional/GlobalTemperatures”;

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

}

initViz();

</script>

</body>

</html>

  • Refresh your browser to view the result

Conclusion

Thus, we discussed the three methods of embedding Tableau dashboard into Webpage. The three ways are:

  1. Iframe
  2. Tableau Embed Code
  3. Tableau JavaScript API
TABLEAU TRAINING AND CERTIFICATION
• 40+ Video Tutorials • 5 Case Studies • 3 eBooks • 5 Presentation Decks • 3 Webinar • 24*7 Dedicated Support

 

To learn different ways to embed Tableau Dashbaord/Report, Join Our Tableau Training & Certification that helps you to share your Tableau Dashboard to other in most effective ways.