How to Integrate Tableau with Website

You’ve built an impressive, insightful dashboard in Tableau, and a static screenshot just won't do it justice. The real power comes from its interactivity, and you want to share that experience with your audience. This guide will show you exactly how to integrate your live Tableau dashboards directly onto your website, turning static pages into dynamic data experiences.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

We'll cover the two primary methods for embedding your visualizations. The first is a simple copy-and-paste approach that works for most situations, and the second is a more advanced technique using the Tableau JavaScript API for when you need complete control. Let's get your data live on the web.

Why Bother Embedding Tableau Dashboards on Your Website?

Embedding a dynamic dashboard is vastly superior to just dropping a static image of a chart onto a webpage. It transforms your website from a place where you just present information to a place where your audience can engage with it.

• Deepen Engagement with Interactivity: This is the biggest advantage. Embedded dashboards are not static images, they are live applications. Users can interact with your data directly on your site by applying filters, clicking on different chart elements to highlight data, and hovering over marks to see detailed tooltips. This active participation keeps them on your page longer and helps them connect with the information more deeply.
• Ensure Data is Always Current: A screenshot is outdated the moment you take it. An embedded dashboard, however, can be connected to a live data source. Whether you use Tableau Cloud, Server, or Public, your dashboards can refresh automatically. This means the data your audience sees on your website is always the most current, reliable version, whether it's showing last week's sales figures or real-time website traffic.
• Tell Compelling Data Stories: Dashboards are perfect for guiding an audience through a data-driven narrative. You can build a visualization that walks users from a high-level overview down to specific, granular details, allowing them to explore the story at their own pace.
• Promote Transparency: Sharing data openly builds trust. You can use embedded dashboards to show company performance to stakeholders, report on campaign results to clients, or provide public access to community data for non-profits. It’s an effective way to be transparent and accountable.

Prerequisites: Getting Your Dashboard Ready for the Web

Before you can embed a dashboard, it needs to be accessible on the internet. You can't just link to a file saved on your personal computer. Here’s what you need to have in place.

A Published Tableau Dashboard

First and foremost, your Tableau dashboard must be published to a Tableau hosting service. You have three main options, each serving a different purpose:

• Tableau Public: This is Tableau's free platform. It's a fantastic tool for students, personal projects, data journalism, and sharing any data that is meant for public consumption. The critical thing to remember is that any data published to Tableau Public is visible to everyone on the internet. Never use it for sensitive or proprietary company information.
• Tableau Cloud: Formerly known as Tableau Online, this is Tableau's fully-hosted, cloud-based platform for businesses. It's a secure, private environment where you can publish dashboards and share them securely with licensed users inside and outside your organization. This is the most common choice for businesses that want to embed secure dashboards for internal portals or client-facing reports.
• Tableau Server: This is the self-hosted version of Tableau Cloud. Your company manages its own server infrastructure, giving you full control over security, performance, and governance. The embedding process is very similar to Tableau Cloud.

For this tutorial, the steps are largely the same regardless of which platform you use, but security considerations will differ significantly.

Website Access

You’ll need the ability to edit the HTML of your website. Most modern Content Management Systems (CMS) like WordPress, Squarespace, Webflow, or Shopify provide an easy way to do this. You might use a "Custom HTML" block, a "Code" element, or switch to a text/HTML editor view to paste in the embed code we'll generate.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Method 1: The Quick and Easy Way - Using the Embed Code

This is the fastest and most straightforward method to get a Tableau dashboard on your site. It uses a simple HTML <iframe> tag that Tableau generates for you. In just a few clicks, your dashboard can be live.

Step-by-Step Instructions

1. Navigate to Your Published Dashboard: Log in to your Tableau Public, Tableau Cloud, or Tableau Server account and open the specific dashboard or "viz" you want to embed.
2. Find and Click the 'Share' Button: Look for a 'Share' icon, typically located in the toolbar at the top or bottom of your dashboard. Clicking this will open up a dialog box with sharing options.
3. Copy the 'Embed Code': In the share dialog, you'll see a section labeled “Embed Code” or a similar name. This contains a snippet of HTML that starts with <iframe>. Click the 'Copy Embed Code' button to copy it to your clipboard.
4. Paste the Code into Your Website’s HTML: Go to the page and section on your website where you want the dashboard to appear. Open the HTML editor or insert a custom HTML block and paste the code you just copied. Save or publish your changes, and your interactive Tableau dashboard should now be visible on your website!

Customizing the Simple Embed

The default embed code works, but you can easily customize it by modifying the URL inside the src attribute of the iframe. These are known as URL parameters and are added to the end of the link, starting with a ? for the first parameter and & for any subsequent ones.

For example, the initial URL might look like this:

https://public.tableau.com/views/MyDashboard/MySheet

You can add parameters to change its behavior:

https://public.tableau.com/views/MyDashboard/MySheet?:embed=y&:showVizHome=no&:display_count=y

Here are a few of the most useful parameters:

• :embed=y - This tells Tableau to display the dashboard in a format optimized for embedding, typically hiding extra navigation elements. The default embed code already includes this.
• :showVizHome=no or :display_share=n - Hides the "Share" and "Download" options if you want a cleaner look.
• :toolbar=top|bottom|no - Lets you control the visibility and position of the toolbar that allows for undo, revert, and other actions.
• :tabs=no - If your Tableau workbook has multiple dashboard tabs at the top, this parameter lets you hide them so the user only sees the primary dashboard.

Method 2: Full Control and Interactivity with the Tableau JavaScript API

If the simple iframe feels too restrictive, the Tableau JavaScript API is your solution. It offers deep, programmatic control over your embedded dashboards, allowing for a truly seamless integration between your website and your visualization.

When should you use the JavaScript API?

Choose this advanced method when you need to:

• Dynamically filter a dashboard based on a user's action on your website (e.g., clicking a button on your page updates the viz).
• Load different dashboards into the same container without reloading the webpage.
• Listen for events inside the dashboard (like a user clicking a data point) and trigger an action on your website in response.
• Export the dashboard to a PDF, image, or Crosstab using your own a custom button.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Implementing the JavaScript API

This process has three main steps: including the API library, creating a container for the viz, and writing the JavaScript code to initialize it.

1. Add the JavaScript API Script to Your Page

First, you need to add a <script> tag in your page's HTML, usually right before the closing </body> tag. The source URL of this script depends on where your dashboard is hosted.

For Tableau Public:

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

For Tableau Cloud:

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

(Be sure to replace YOUR-POD with your specific Tableau Cloud URL, like 10ay, 10ax, etc.)

2. Create a Placeholder on Your Page

Next, you need an HTML element on your page that will contain the dashboard. A simple <div> with a unique ID is all that's required.

<div id="tableauViz"></div>

3. Write the Initialization Script

Finally, you'll write a short JavaScript function to create the dashboard inside your placeholder div. Put this script inside <script> tags after the API library script you added in step 1.

<script type="text/javascript">
  function initViz() {
    var containerDiv = document.getElementById("tableauViz"),
    var url = "https://public.tableau.com/views/YourDashboardName/YourSheetName", // Replace with your dashboard's URL

    var options = {
      hideTabs: true,
      hideToolbar: true,
      width: "1200px",  // Or "100%" for responsive width
      height: "840px",
      onFirstInteractive: function() {
        console.log("Your super cool Tableau dashboard has loaded!"),
      }
    },

    var viz = new tableau.Viz(containerDiv, url, options),
  }

  // Call the function once the content is ready
  document.addEventListener("DOMContentLoaded", initViz),
</script>

This script finds your placeholder <div>, specifies the URL of the Tableau view to embed, and defines several options like hiding tabs and setting the dimensions. Once implemented, this approach gives you a foundation for building all sorts of advanced, custom interactions.

Best Practices and Pro-Tips for Tableau Integration

To ensure a great user experience, keep these final points in mind:

Performance and Loading Times

A complicated dashboard with millions of data points and dozens of filters might perform well in Tableau Desktop but can be slow to load when embedded on a website. Before publishing, try to simplify your dashboard for web viewing. Use data extracts (.hyper files) and minimize the number of sheets and filters visible on initial load.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Security and Data Privacy

This cannot be stressed enough: never publish sensitive data to Tableau Public. For confidential information, always use Tableau Cloud or Tableau Server. When you embed a dashboard from a secure environment, your website viewers will be prompted to log in with their Tableau credentials to see the data, unless you've set up a more advanced authentication method like Trusted Authentication or connected apps to provide a seamless Single Sign-On (SSO) experience.

Mobile Responsiveness

Many (if not most) of your users will view your website on a mobile device. A dashboard designed for a wide desktop monitor will likely be unreadable on a small phone screen. Use Tableau's brilliant "Device Layouts" feature to design custom layouts of your dashboard specifically for desktop, tablet, and mobile views. Tableau will automatically serve the correct layout based on the user's screen size, ensuring a functional and visually appealing experience for everyone.

Final Thoughts

Bringing your Tableau dashboards to life on your website is one of the best ways to share your data insights with a broad audience. Whether you choose the quick copy-and-paste embed code for simplicity or the powerful JavaScript API for full customization, both methods transform your static web pages into engaging, interactive data hubs.

While embedding Tableau is a fantastic way to display finished analysis, we know that creating those dashboards in the first place can be a time-consuming process that requires a lot of expertise. That’s why we built Graphed — our platform allows you to connect all your marketing and sales data sources and create real-time dashboards just by asking questions in plain English — no complicated builders required. You get a direct line from raw data to actionable insight in seconds, giving you back the time to focus on the story your data is telling.