Jul 24
Embed a Tableau Dashboards into a Website
Here’s how to embed Tableau dashboards with a Tableau embed code, Tableau Javascript API, and iframe + Tableau share link.
In this example, a simple HTML web page will be hosted locally using a Python 3 HTTP server. A production embedded analytics application with Tableau is much more complex than what will be covered in this blog post. If you are looking for an easy, out of the box solution
Get Started: Run the Python HTTP Server
Create an empty directory on your machine. This is the directory where we will be creating our HTML files and running the Python HTTP server.
change the current working directory to your home directory
cd
create an empty folder named tableau_embed
mkdir tableau_embed
change directory into the newly created folder
cd tableau_embed
Command line setup
Spinning up a Python 3 HTTP server is very simple. You can read more about this here.
python3 -m http.server
Spin up a Python HTTP Server via the command line
You should see this on the command line:
Open a web browser and go to http://localhost:8000/.
You should see this:
Now let’s create a simple HTML file in the directory.
Use this as a template:
<!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>
Embedded Analytics template HTML page code
Save the file as index.html.
Refresh your web browser and you should see this:
Now that the web server is serving up files, let’s start embedding Tableau into the webpage.
Method 1: iframe + Tableau Share Link
The first method of embedding Tableau into a webpage is with a simple iframe.
On your Tableau Server / Tableau Cloud, go to the content you want to embed and click the ‘Share’ button.
Click the green ‘Copy link’ button.
Edit index.html and add an <iframe> tag between the body tags. The src is the link copied from Tableau. Also add width and height attributes to the iframe that fit the size of the dashboard.
<!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>
Tableau Server / Tableau Cloud Embedded Analytics — HTML with iframe + Tableau share link
Save the file and refresh your browser. You should see this:
Method 2: Tableau Embed Code
The second method of embedding Tableau into a webpage is through the Tableau embed code.
Once again, in your Tableau Server/Tableau Cloud go to the content you want to embed and click the ‘Share’ button.
Click the “</> Embed Code” link.
Edit index.html and replace with <iframe> tag with the copied embed code.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Embedded Analytics with Tableau Cloud</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='/t/zuar' /> <param name='name' value='Regional/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>
Tableau Server / Tableau Cloud Embedded Analytics — HTML with Tableau Embed code
Save the file and refresh your browser. You should see this:
Method 3: Tableau JavaScript API
The final and most powerful method of embedding Tableau into a webpage is with the Tableau JavaScript API. In a nutshell, the Tableau JavaScript API gives you more control over the embedded Tableau dashboard, allowing both the web page to interact with the embedded Tableau dashboard and the embedded Tableau dashboard to interact with the web page.
Edit index.html update it with the code below:
<!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>
Tableau Server / Tableau Cloud Embedded Analytics — HTML with Tableau JavaScript API code
Save the file and refresh your browser. You should see this:
The below example uses Google Chrome, but the idea should be similar with other browsers.
As a simple example of the extra control you have over the Tableau dashboard with the JavaScript API, right-click on the page (outside of the Tableau dashboard area) and click ‘Inspect’. This will bring up the Chrome Dev Tools window.
If you type viz. on the 'Console' tab, you will see all the Tableau JavaScript API methods that can be used on the embedded Tableau dashboard. We set viz as the name of the Tableau dashboard object in our code above.
Typing viz.showShareDialog() and pressing enter on the console opens up the 'Share View' dialog box. This is the exact same dialog box you see on Tableau Server / Tableau Cloud when you press the 'Share' button on a dashboard. JavaScript methods like this can be tied to any number of other objects (e.g. buttons) or actions inside your embedded analytics application.
Conclusion
We covered three ways to embed Tableau dashboards in a webpage. But again, a production-embedded analytics application with Tableau is much more complex than what we have covered in this guide
