How to Embed Tableau Visualizations in a Website

Edited 1 day ago by ExtremeHow Editorial Team

TableauWeb EmbeddingData VisualizationBusiness IntelligenceWeb DevelopmentIntegrationAnalyticsWindowsMacHTML

Embedding Tableau visualizations into a website is a great way to share interactive data and dashboards with a wider audience. It is a useful approach to integrate business intelligence into your web application, allowing website visitors to explore data directly from the webpage. In this guide, we will walk you through the various steps and requirements to successfully embed Tableau visualizations into your site.

Understanding Tableau embedding options

Before we dive into the technical procedures, it's important to understand what embedding means. When you embed a Tableau visualization, you're essentially integrating a piece of interactive data directly into a web page. This can be a report, dashboard, or any visual data representation you create using Tableau.

Here are the main methods through which you can embed Tableau visualizations:

1. Using Tableau Public.
2. Using Tableau Server or Tableau Cloud.
3. Using the Tableau JavaScript API.

Using Tableau Public

Tableau Public is a free platform where users can share Tableau visualizations publicly. To use this method, let's follow these steps:

1. Create a visualization in Tableau Desktop.
2. Publish it on Tableau Public.
3. Get the embed code from Tableau Public.

Step 1: Create the visualization in Tableau Desktop

Start by creating a comprehensive visualization in Tableau Desktop. Make sure your data is clean and that your visualization accurately reflects the story you want to tell. Once you're satisfied with the visualization, you're ready to publish it.

Step 2: Publish to Tableau Public

In Tableau Desktop, click the menu button labeled "File" and then select "Save to Tableau Public As...". You will need to log in to your Tableau Public account. If you don't have an account, you will need to sign up for free. Once you log in, your visualization will be uploaded to Tableau Public.

Step 3: Get the embed code

Once your visualization is on Tableau Public, open it in a web browser. There will be a share button (often titled "Share"), usually located near the bottom of the window. When you click this button, you will see several options for sharing your visualization. Select the "Embed Code" option. This will provide you with an HTML snippet that you can insert into your website.

<iframe src="https://public.tableau.com/views/YourViz here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Copy and paste this iframe code into the HTML of the webpage where you want the visualization to appear.

Using Tableau Server or Tableau Cloud

If you are using Tableau Server or Tableau Cloud, you have more options for controlling access to your visualizations than Tableau Public. These platforms provide embedding capabilities along with security and user authentication, but the basic steps for embedding remain somewhat similar.

Step 1: Publish your visualization to Tableau Server or Tableau Cloud

Create your visualization in Tableau Desktop and publish it to your Tableau Server or Tableau Cloud. Select the “Server” option from the main menu, then choose “Publish Workbook” and follow the instructions.

Step 2: Get the embed code

Once the workbook is uploaded, go to the online version and look for the “Share” button. This will display the options for embedding. Depending on your organization’s setup, you may need administrator access to get the embed code.

Tableau Server or Tableau Cloud typically provides the embed code as an iframe, or you can customize it using the JavaScript API. An example of iframe embed code provided by Tableau might look like this:

<iframe src="https:// /views/YourViz here" width="800" height="600" frameborder="0"></iframe>

Place this code in the HTML of your website where you want the visualization to display.

Using the Tableau JavaScript API

For more sophisticated embedding needs, the Tableau JavaScript API provides more flexibility and control. It allows you to programmatically interact with visualizations.

Step 1: Include the Tableau JavaScript API in your HTML

First, make sure your webpage includes the Tableau JavaScript API library. Add the following line to the <head> section of your HTML document:

<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

Step 2: Create a container for the visualization

Set up a placeholder or container in your HTML file to hold the Tableau visualization. This is usually a <div> element with a specified width and height.

<div id="tableauViz" style="width: 800px; height: 600px;"></div>

Step 3: Initialize and embed vis

Using JavaScript, you can initialize and embed Tableau visualizations into the page. Here is an example script:

<script type="text/javascript">
  var containerDiv = document.getElementById("tableauViz"),
      url = "https://public.tableau.com/views/YourDashboard here",
      options = {
          width: containerDiv.style.width,
          height: containerDiv.style.height,
          hidetabs: true,
          hideToolbar: true
      };

  viz = new tableau.Viz(containerDiv, url, options);
</script>

The above script points to a <div> on the page with the ID “tableauViz”. It loads the Tableau visualization from the given URL and applies custom options like hiding the default tabs and toolbar.

Implementation of security and authentication

When embedding Tableau visualizations, especially for internal use, it is important to secure the data. Tableau Server and Tableau Cloud provide user-based authentication and permission management to ensure that only authorized users can access the visualizations.

Some security options you can consider include embedding with SAML authentication, enabling trusted authentication which allows you to bypass the Tableau Server login, or using OAuth.

Handling responsive design

If the website is responsive, you may need to ensure that the embedded visualization is also responsive to fit different device screens. One way to achieve this is to dynamically adjust the iframe or container div via CSS and JavaScript.

Example responsive CSS

<style>
  #tableauViz {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      position: relative;
  }
</style>

The example CSS above will allow your visualization to maintain a 16:9 aspect ratio across devices by using the “padding-bottom” trick, which is a common technique in responsive web design.

Final thoughts

Embedding Tableau visualizations into a website adds valuable, interactive data insights directly to your webpage. Whether you're using Tableau Public for freely available data, leveraging Tableau Server or Cloud for enterprise scenarios, or using the JavaScript API for custom solutions, you have a variety of options for integrating powerful Tableau visualizations into your web environment.

Careful consideration of security, responsive design, and the needs of your users will help ensure that your embedded Tableau dashboards are both useful and secure. Experiment with different approaches and find the solution that works best for your unique needs. Happy data visualizing!

  Share This Article

If you find anything wrong with the article content, you can request an update