Can Tableau Dashboard Be Embedded in Website?

The short answer is yes, you absolutely can embed a Tableau dashboard into a website. Getting your interactive data visualizations out of the app and directly into the hands of your audience - whether on a public blog, a company intranet, or a client portal - is one of the most powerful features Tableau offers. This article will show you how to do it, from the simple copy-paste method to more advanced interactive techniques, and provide some best practices for making sure your dashboard looks and performs great.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Why Embed a Tableau Dashboard in a Website?

Embedding a live, interactive dashboard is a huge step up from throwing a static screenshot of a chart into your webpage or report. It's about bringing data to life where your audience already is.

• Wider Audience Reach: Instead of requiring stakeholders to log into Tableau, you can bring the data directly to them in a familiar environment like a company wiki, your product's web app, or your public-facing blog.
• Context is Everything: Placing a dashboard on a webpage allows you to surround it with explanatory text, analysis, and calls to action. The visualization shows what is happening, and the surrounding content can explain why it matters.
• Seamless User Experience: An embedded dashboard keeps users on your site longer, providing a single, consistent place for them to get information without having to jump between different tools and browser tabs.
• Always-On, Real-Time Data: When you embed a dashboard connected to a live data source, your webpage shows the most current information available. There's no longer a need to manually update and re-upload static images every week or month.

Imagine a marketing team embedding a real-time campaign performance dashboard into their Notion or intranet page. The entire team can see ad spend, conversions, and ROI without leaving the workspace they use every day. Or a nonprofit embedding a map of their project sites on their home page, allowing donors to click and explore their impact interactively.

How to Embed A Tableau Dashboard: The Simple Method

For most use-cases, embedding a Tableau dashboard is incredibly straightforward. The method relies on copying a snippet of HTML code (an iframe) that Tableau generates for you. The exact steps are nearly identical for a public-facing visualization (Tableau Public) and a private one used internally (Tableau Cloud or Tableau Server).

Graphed

Still Building Reports Manually?

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

Watch the Demo

For an already-published dashboard on Tableau Public:

1. Navigate to your dashboard's page on public.tableau.com.
2. At the bottom of the visualization, locate the Share icon (it looks like three connected dots).
3. In the pop-up window, you'll see a field labeled Embed Code. Copy the entire HTML snippet.
4. Paste this code into the HTML editor of your webpage. This code tells your web browser to create a window (an iframe) on your page and load the specific Tableau visualization inside of it. The code you copy will look something like this:

<div class='tableauPlaceholder' id='viz1678886400000' style='position: relative'>
<noscript><a href='#'><img alt='Dashboard ' src='https://public.tableau.com/static/images/My Viz Name/Dashboard1/1_rss.png' style='border: none' /></a></noscript>
<object class='tableauViz' style='display:none,'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com/' /> 
<param name='embed_code_version' value='3' /> 
<param name='site_root' value='' />
<param name='name' value='MyVizName%2FDashboard1' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image' value='https://public.tableau.com/static/images/MyVizName/Dashboard1/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' />
<param name='language' value='en-US' />
</object></div>                
<script type='text/javascript'>
var divElement = document.getElementById('viz1678886400000'),
    vizElement = divElement.getElementsByTagName('object')[0],
vizElement.style.width='100%', vizElement.style.height=(divElement.offsetWidth*0.75)+'px',
var scriptElement = document.createElement('script'),
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js',
vizElement.parentNode.insertBefore(scriptElement, vizElement),
</script>

For a private dashboard on Tableau Server or Tableau Cloud:

The process is the same as above. Navigate to the view you want to share, click the 'Share' button in the toolbar, and copy the 'Embed Code'.

Here's the most important difference: if your server and data are private, a user visiting your website must have permission to see that dashboard. When they load the page, they will be prompted to sign into your Tableau Server/Cloud instance before the dashboard will be displayed. This is perfect for internal company portals, where every employee has a Tableau login.

Diving Deeper: Using the Tableau JavaScript API for More Interaction

What if you want more control? What if you want your website to interact with the embedded dashboard? For this, Tableau provides a powerful JavaScript API. While it requires some development knowledge, it opens up a world of possibilities that the basic embed code doesn't allow.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Here’s what you can achieve with the JavaScript API:

• Two-Way Communication: Have a button on your website that, when clicked, applies a filter to the Tableau dashboard dynamically. Conversely, you can have a chart filter on the website itself based on a user’s selection within the dashboard.
• Exporting on Cue: Let users download the dashboard as a PDF or its underlying data as a CSV by clicking a custom button on your webpage instead of using Tableau's default toolbar.
• Custom Navigation: Build your website's navigation to move between different tabs within a Tableau dashboard. This creates a much more integrated look and feel.

Instead of copying the full embed code, you'd start with a basic HTML <div> element as a placeholder and then use JavaScript to load and control the visualization. A foundational piece of code might look like this:

<!-- Include the Tableau JavaScript API Library -->
<script type="text/javascript" src="https://your-server-name/javascripts/api/tableau-2.min.js"></script>

<!-- Create a placeholder for the Tableau viz -->
<div id="tableauViz"></div>

<script type="text/javascript">
function initViz() {
    var containerDiv = document.getElementById("tableauViz"),
        url = "http://your-server-name/views/YourWorkbook/YourView",
        options = {
            hideTabs: true,
            width: "800px",
            height: "600px",
            onFirstInteractive: function () {
                console.log("Your dashboard is loaded and interactive."),
            }
        },
    var viz = new tableau.Viz(containerDiv, url, options),
}
// Load the viz once the page is ready
document.addEventListener("DOMContentLoaded", function() {
  initViz(),
}),
</script>

This is just a starting point, but it shows how you gain fine-tuned control over the dashboard's size, visibility of elements, and can even trigger actions once it’s fully loaded.

Best Practices for Embedding Your Tableau Dashboards

Just because you can embed a dashboard doesn't mean your work is done. Follow these guidelines to ensure a great experience for your audience.

1. Optimize for Performance

A beautifully designed dashboard is useless if it takes a minute to load on your website. Web users expect speed. Before embedding, performance-tune your dashboard in Tableau Desktop. This includes using data extracts where possible, simplifying complex calculations, limiting the number of marks on a single view, and removing any unused worksheets or data sources.

Graphed

Still Building Reports Manually?

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

Watch the Demo

2. Design for Responsiveness

Your dashboard will be viewed on devices of all sizes. Use Tableau’s Device Designer to create dedicated layouts for desktops, tablets, and phones. When you embed the dashboard, it will automatically serve the correct layout based on the viewer’s screen size. Embedding a fixed-size, sprawling dashboard will result in a terrible mobile experience full of scrollbars.

3. Consider Your Audience and Their Data Access

Who are you building this embedded view for?

• For the public (Tableau Public): Remember that your data will be viewable and downloadable by anyone. Never post sensitive or private information on Tableau Public.
• For an internal team (Tableau Server/Cloud): Double-check your permissions. Are you using Row-Level Security to ensure managers only see their team's data? Have you licensed viewers correctly?

4. Customize the Look with URL Parameters

You can control various aspects of the dashboard by adding parameters to the URL in your embed code. This allows you to hide the toolbar, switch tabs, or prevent users from reverting any changes.

Simply add a ? to the end of the view URL, followed by the parameters chained with an &. For example, this URL would hide the toolbar and tabs:

http://your-server-name/views/MyWorkbook/MyView?:toolbar=no&:tabs=no

Common parameters include:

• :toolbar=no - hides the entire top toolbar. Also commonly set to top.
• :tabs=no - hides the navigation tabs at the top of the view.
• :embed=y - tells Tableau not to display the extra header and navigation baked into the server. This is often the default on embed codes.

Common Issues and How to Troubleshoot Them

• The dashboard appears blank: Check that your URL is correct and public (for Tableau Public) or that you're logged in (for Tableau Server/Cloud). Ad blockers can sometimes also interfere with embedded content.
• It's too slow: Go back and optimize your dashboard for performance. A dashboard that loads slowly in Tableau itself will load even more slowly when embedded in a website.
• It looks weird on phones: You need to create a dedicated mobile layout using the Device Designer in Tableau Desktop. Don't rely on the default desktop view to shrink down correctly.

Final Thoughts

Embedding your Tableau dashboards in a website transforms them from standalone analysis tools into integrated components of your business's communication strategy. Whether you're using the simple share code for a quick setup or the JavaScript API for a fully custom experience, bringing your data visualizations directly to your users is an effective way to drive data-driven conversations.

While embedding Tableau is a great way to distribute reports, creating them in the first place often has a steep learning curve. We built Graphed to remove that complexity from marketing and sales analytics. Instead of wrestling with complex dashboard builders, you simply describe what you want to see in plain English, and Graphed creates a professional, real-time dashboard for you in seconds. It connects to platforms like Google Analytics, Shopify, and Salesforce automatically, helping you get from raw data to actionable insights without the typical BI busywork.