The purpose of this blog post is to help you test 3 ways to embed Tableau dashboards into a web page. The 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, Zuar has products for embedded analytics.

We won't be covering Tableau Server / Tableau Online security (e.g. the need for a reverse proxy when exposing Tableau Server to the internet) or authentication (e.g. single sign on and trusted authentication). However, these are incredibly important topics when moving your embedded analytics application from development/testing to production.

Here are three ways to embed Tableau dashboards in an embedded analytics application:

  1. iframe + Tableau share link
  2. Tableau embed code
  3. Tableau Javascript API

Prerequisites:

Tableau Server / Tableau Online:

  1. Tableau Server / Tableau Online account. If you do not have a Tableau Server / Tableau Online account, please let us know and we will spin up a trial for you or help you make a purchase.
  2. Tableau dashboard content published that you want to use for embedded analytics. For testing, you can use any dashboard published to Tableau Server / Tableau Online.

Python:

  1. Python 3 installed. Check to see if Python 3 is already installed by typing python or python3 on your command line. If it is not installed, you can download Python 3 here and follow install instructions here.

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:

Python HTTP Server running and serving up files

Open a web browser and go to http://localhost:8000/.

You should see this:

Python HTTP Server running and serving up files - browser view

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:

Embedded Analytics template HTML page

Now that the web server is serving up files, let's start embedding Tableau into the webpage.

iframe + Tableau share link:

The first method of embedding Tableau into a webpage is with a simple iframe.

On your Tableau Server / Tableau Online, go to the content you want to embed and click the "Share" button.

Tableau Server / Tableau Online Embedded Analytics - Tableau Share button

Click the green "Copy link" button.

Tableau Server / Tableau Online Embedded Analytics - Tableau Share view - Copy link

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 Online Embedded Analytics - HTML with iframe + Tableau share link

Save the file and refresh your browser. You should see this:

Tableau Server/ Tableau Online Dashboard Embedded Analytics Web Page

Tableau Embed Code:

The second method of embedding Tableau into a webpage is through the Tableau embed code.

Once again on your Tableau Server / Tableau Online, go to the content you want to embed and click the "Share" button.

Tableau Server / Tableau Online Embedded Analytics - Tableau Share Button

Click the "</> Embed Code" link.

Tableau Server / Tableau Online Embedded Analytics - Tableau Embed Code

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 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>
Tableau Server / Tableau Online Embedded Analytics - HTML with Tableau Embed code

Save the file and refresh your browser. You should see this:

Tableau Server / Tableau Online Embedded Analytics Web Page

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 Online Embedded Analytics - HTML with Tableau JavaScript API code

Save the file and refresh your browser. You should see this:

Tableau Server / Tableau Online Embedded Analytics Web Page

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 Online 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.

Tableau Server / Tableau Online Embedded Analytics Web Page - DevTools console and Tableau JavaScript API

Conclusion:

We covered three ways to embed Tableau dashboards in a webpage:

  • iframe + Tableau share link
  • Tableau embed code
  • Tableau Javascript API

We also walked through the setup of a simple web server using a Python HTTP server.

Again, a production embedded analytics application with Tableau is much more complex than what we have covered in this blog post. If you are looking for an easy, out of the box solution, Zuar has products for embedded analytics.

Related Content:

Embedded Analytics: SAML SSO with Tableau Online and OneLogin
Goals: * Implement single sign on (SSO) for Tableau Online with security assertion markup language (SAML) identity provider (IdP) OneLogin * Create a simple embedded analytics application that embeds a Tableau Online dashboard into a web page * Provide a seamless end user experience in an e…
Trusted Ticket Authentication with Tableau Server
This article describes how Tableau trusted authentication provides Single Sign-On (SSO) for embedded analytics in third-party applications. With Tableau’s recent focus on Embedded Analytics, we at Zuar [https://zuar.com/] are getting a lot of questions about how to enable a seamless user experience…
Implementing Trusted Tickets for Tableau Server with NodeJS
This article implements trusted tickets as described in Trusted Ticket Authentication with Tableau Server [https://blog.zuar.com/trusted-ticket-authentication-with-tableau-server/]. We’ll build a ticket broker with a simple API called by a front-end that uses the HTML5 &lt;template&gt; tag. The intende…