How to Embed Tableau Public in Website

Displaying your hard-earned data creations directly on your website is a powerful way to make your content more engaging and insightful. Instead of showing a static image of a graph, you can let your audience interact with the live data themselves. We’ll walk you through exactly how to embed a Tableau Public visualization onto any website, customize its appearance, and ensure it looks great for your visitors.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Why Embed Tableau Dashboards on Your Website?

Before jumping into the "how," let's quickly cover the "why." Embedding an interactive Tableau dashboard is a significant upgrade from simply pasting a screenshot into your blog post or web page. Here are a few key benefits:

• Increased Engagement: Interactive content keeps visitors on your page longer. Dashboards with filters, tooltips, and clickable elements invite users to explore the data, turning passive readers into active participants.
• Enhanced Storytelling: Data tells a story, and an interactive dashboard allows your audience to find their own narratives within the data. They can drill down into specific areas of interest, making for a much richer and more personal experience.
• Greater Credibility: Presenting live, interactive data builds trust. It shows you've done the work and are transparent with your findings, adding a layer of professionalism and authority to your content compared to a simple image that can't be verified.
• Real-Time Updates: If your Tableau workbook is connected to a live data source (like a Google Sheet that updates periodically), your embedded dashboard will reflect those updates automatically. This is perfect for tracking ongoing projects, campaign performance, or industry trends.

The Step-by-Step Guide to Embedding a Tableau Public Dashboard

The process of getting your viz from Tableau Public to your website is surprisingly straightforward. It primarily involves finding the correct code snippet and pasting it into your site's HTML editor. Let’s break it down.

Step 1: Locate Your Visualization on Tableau Public

First, you need the visualization to be published to your Tableau Public profile. Log in to your Tableau Public account and navigate to the "My Profile" section. Find the dashboard you want to embed and click on it to open its dedicated page.

Make sure the visualization is not hidden. Under "Settings," there's an option to "Hide viz from my profile." Ensure this is unchecked so it's publicly accessible.

Step 2: Find the 'Share' Button

Once you’re viewing your visualization, look at the bottom right-hand corner beneath the dashboard itself. You will see several options, including an icon of a swooping arrow labeled "Share."

Clicking this "Share" button will open a pop-up window with two options: a shareable link and the embed code.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Step 3: Copy the Embed Code

In the pop-up window, you'll see a text box labeled "Embed Code." This block of HTML is exactly what you need. It starts and ends with <div>, <script>, and contains a <object> that will render your dashboard. There's a convenient "Copy Embed Code" button right next to it. Click it to copy the entire snippet to your clipboard.

Step 4: Paste the Code into Your Website

Now, head over to your website's content management system (CMS). Your goal is to paste this code into the HTML of your page or post. The exact process varies slightly depending on your platform:

• For WordPress (Block Editor):
• For WordPress (Classic Editor):
• For Squarespace, Webflow, or others:

Step 5: Preview and Publish

Before you hit "Publish," always use the preview function. This lets you see how the embedded dashboard looks on the page. Does it have enough space? Is it cutting off anything important? Once you're happy with its appearance, you can publish your page. Visitors will now see a fully interactive Tableau dashboard right inside your content.

Graphed

Still Building Reports Manually?

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

Watch the Demo

How to Customize Your Embedded Tableau Dashboard

The default embed code works perfectly well, but you can tailor it to better fit your website's design and user experience. You can do this by tweaking the code snippet you just pasted.

Here's a sample of what the embed code looks like:

<div class='tableauPlaceholder' id='viz1671815103444' style='position: relative'>
  <noscript>
    <a href='#'>
      <img alt='Dashboard 1' src='https://public.tableau.com/static/images/My/MyWorkbook/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%2F' /> 
    <param name='embed_code_version' value='3' /> 
    <param name='site_root' value='' />
    <param name='name' value='MyWorkbook/Dashboard1' />
    <param name='tabs' value='no' />
    <param name='toolbar' value='yes' />
    <param name='static_image' value='https://public.tableau.com/static/images/My/MyWorkbook/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('viz1671815103444'),
      vizElement = divElement.getElementsByTagName('object')[0],
      scriptElement = document.createElement('script'),
  vizElement.style.width='1000px',
  vizElement.style.height='827px',
  scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js',
  vizElement.parentNode.insertBefore(scriptElement, vizElement),
</script>

Adjusting the Width and Height

The most common customization is changing the size. Near the end of the script, you'll find a line that defines the width and height:

vizElement.style.width='1000px',vizElement.style.height='827px',

You can change these pixel values to whatever you need. For a responsive design that fills the container it's a part of, change the width to 100%:

vizElement.style.width='100%',vizElement.style.height='827px',

Just make sure the height provides enough room for the dashboard to be fully visible without excessive scrolling.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Controlling the Toolbar

The toolbar at the bottom of the viz allows users to undo, revert, share, or download the visualization. You might want to hide it for a cleaner look. Find this line in the middle of your code:

<param name='toolbar' value='yes' />

Simply change the 'yes' to 'no' to hide the toolbar completely.

Displaying Specific Tabs

If your workbook has multiple dashboards or sheets published as tabs, by default, the embed will show tabs at the top for navigation. To hide them and only show the main dashboard, find this line:

<param name='tabs' value='no' />

If its value is 'yes', change it to 'no' to create a more focused experience on a single view.

Best Practices for Embedded Visualizations

Embedding dashboards is easy, but creating a good experience for the end-user requires a little extra thought.

• Keep Performance in Mind: Very complex dashboards with millions of data points can be slow to load, which can hurt your page's performance. For super complex vizzes, consider using a simplified version for embedding or building them in a way that minimizes load times. Tableau's own "Performance Recorder" in the desktop app can help you identify bottlenecks.
• Design for the Medium: Remember that your dashboard will live inside a smaller frame on a webpage. Use Tableau Desktop's "Device Layouts" feature to create specific views for desktop, tablet, and phone. When embedded, the correct layout will automatically be shown based on the viewer's screen size.
• Add Context: Don't just drop a dashboard on a page and expect your audience to understand it. Write a short introduction explaining what the visualization shows, how to use any filters, and what key takeaways they should look for. Guide your user through the data story.
• Test, Test, Test: Always check your embedded dashboard on different browsers and devices (especially mobile). An interactive dashboard that's unusable on a phone defeats the purpose.

Final Thoughts

Embedding interactive Tableau dashboards is an excellent method for transforming a static webpage into a dynamic and authoritative resource. By simply copying and pasting a generated code snippet, you can bring data to life, engage your audience, and tell more compelling stories.

While Tableau is a fantastic tool for deep analysis, we know that getting all your marketing and sales data connected to build reports can be time-consuming. At Graphed, we automate that entire connection and reporting process. We make it easy to link all your data sources — like Google Analytics, Shopify, Facebook Ads, and Salesforce — and then create live, shareable dashboards instantly by just describing what you want to see in plain English. No more wrangling embed codes, and no complex configuration needed to get the answers you need.