How to Embed Tableau Dashboard in Website

You've built a powerful, insightful dashboard in Tableau, and now you want to share it with the world - or at least, with your website visitors. Embedding your Tableau dashboard directly into a web page is the perfect way to move your data from a standalone report into an interactive part of your content. This guide will walk you through exactly how to get your Tableau visualizations live on your website.

Why Embed a Tableau Dashboard in Your Website?

Before we get into the nuts and bolts, let's quickly cover why this is such a useful skill. Embedding a live, interactive dashboard does more than just display static images of charts. It allows you to:

• Share Public Data: If you're a non-profit, government agency, or researcher, you can provide the public with interactive tools to explore your data.
• Enhance Your Blog Posts: Turn a standard article into an engaging data story. Let your readers filter, click, and explore the data you're writing about directly on the page.
• Create Client Portals: Give your clients a live look at their performance metrics without needing to send them new files every week.
• Power an Internal Hub: Use an internal company site (like a Sharepoint or intranet page) to host key performance indicators (KPIs) that are always up-to-date for your team.
• Showcase Your Portfolio: Demonstrate your data visualization skills to potential employers by embedding your best work on your personal website.

Before You Begin: What You'll Need

To embed your dashboard, you'll need three things squared away first. Make sure you have these ready to go.

1. A Published Dashboard: Your Tableau workbook can't be living on your desktop. It needs to be published to Tableau Public, Tableau Cloud (formerly Tableau Online), or Tableau Server. Tableau Public is free and perfect for sharing public data, while Cloud and Server are paid products for private, organizational sharing.
2. The Right Permissions: You must have permission to share the dashboard. In Tableau Server or Cloud, administrators can disable embedding for certain views, so double-check that you have the green light to share it externally. For Tableau Public, anything you publish is, by definition, public and shareable.
3. Website Access: You need to be able to edit the HTML of the web page where you want to embed the dashboard. This could be a WordPress block editor, a Webflow embed element, a Squarespace code block, or direct access to your site's source code.

The Step-by-Step Guide to Embedding Your Dashboard

Once you have your prerequisites, getting the embed code is a straightforward process. The steps are nearly identical for Tableau Public and Tableau Server/Cloud, with just a few minor differences.

1. Navigate to Your Published Dashboard

Open your web browser and go to the URL of the dashboard you want to embed. This will be on the Tableau Public gallery or your company’s Tableau Server/Cloud domain.

2. Find and Click the 'Share' Button

Look for the "Share" icon on the dashboard's toolbar. It’s typically located at the top or bottom of the visualization and looks like three connected dots. Clicking this button will open a sharing dialog box.

3. Copy the Embed Code

In the share dialog, you'll see a section labeled "Embed Code." This is the snippet of HTML that you'll need to copy. Simply click the "Copy" button to grab the code and add it to your clipboard.

The code will look something like this for Tableau Public a viz published by a user named 'ExampleUser' for a workbook called 'SalesDashboard':

<div class='tableauPlaceholder' id='viz1700148113331' style='position: relative'>
   <noscript><a href='#'><img alt=' ' src='https://public.tableau.com/static/images/Sa/SalesDashboard/Overview/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='SalesDashboard/Overview' />
      <param name='tabs' value='no' />
      <param name='toolbar' value='yes' />
      <param name='static_image' value='https://public.tableau.com/static/images/Sa/SalesDashboard/Overview/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>

This code might look complicated, but you generally don't need to understand every piece of it. It's essentially a set of instructions that tells the browser how to load and display your Tableau dashboard.

4. Paste the Code Into Your Website's HTML

Now, head over to your website's content management system (CMS) or HTML editor. Find the page you want to add the dashboard to and find the option to add custom HTML.

• In WordPress (Block Editor): Add a new block and search for "Custom HTML." Paste your code directly into this block.
• In Squarespace or Wix: Look for an "Embed" or "Code block" element. Add it to your page and paste your copied code there.
• In other CMS platforms: The principle is the same. Find the module designed to handle raw HTML or script embeds. Avoid pasting it into a standard visual text editor, as that will often display the code itself instead of rendering the dashboard.

Once you've pasted the code, save or publish your page. Your Tableau dashboard should now be live on your website!

Customizing Your Embedded Dashboard's Appearance

The default embed code works fine, but you can tailor its behavior by adjusting the parameters within the HTML object tag. This gives you more control over the look and feel, helping it integrate seamlessly into your site's design.

Here are some of the most useful parameters to know:

Controlling Dimensions

By default, the dashboard has a fixed width and height. To make it responsive and fill its container, you can manually adjust the width and height properties inside the style attribute of your embed code, often found right in the main <div> element from Tableau’s JavaScript API-based embed options. It is recommended to use the JavaScript API for flexible layouts, but for a quick fix in the code you can modify height and width with !important tags:

<object class='tableauViz' width='100%' height='800' style='display:none,'>

Showing or Hiding the Toolbar

The toolbar at the bottom of the dashboard provides options like Undo, Redo, and Share. Sometimes you want a cleaner look without these controls. You can toggle this by changing the toolbar parameter.

• Show the toolbar: <param name='toolbar' value='yes' />
• Hide the toolbar: <param name='toolbar' value='no' />

Controlling Tabs

If your workbook has multiple dashboards or sheets published as tabs, you can control whether users can see and switch between them. Change a 'tabs' parameter for this effect:

• Show tabs: <param name='tabs' value='yes' />
• Hide tabs (shows only the primary view): <param name='tabs' value='no' />

Best Practices for a Great User Experience

Just because you can embed a dashboard doesn't mean it will instantly create a great experience for your visitors. Here are a few tips to ensure your embedded data is a valuable and user-friendly resource.

• Keep it Simple and Focused: Don't try to embed an overly complex dashboard with dozens of filters and charts. An embedded view should tell a clear story or answer a specific set of questions. For complex analyses, it may be better to link out to the full dashboard on the Tableau Public site.
• Prioritize Performance: A massive dashboard connected to a huge live dataset can be slow to load, especially on a web page with other content. Use data extracts and optimize your workbook for performance before you publish and embed it.
• Test Responsiveness: Check how your embedded dashboard looks on different devices, especially mobile phones. A dashboard that's perfectly usable on a large desktop monitor can become a jumbled, unusable mess on a small screen. You may need to create a separate, mobile-optimized version for embedding.
• Add Context: Don't just drop a dashboard onto a page and expect visitors to understand it. Add a title, a short introductory paragraph explaining what the data shows, and perhaps a sentence or two on how to use key filters. Guide your users so they can find the insights you want to share.

Final Thoughts

Embedding a Tableau dashboard is a powerful method for sharing interactive data stories and making key metrics accessible to a wider audience. By following the simple steps to copy the embed code and customizing a few key parameters, you can seamlessly integrate your rich visualizations into any webpage, transforming static content into a dynamic experience.

While embedding a manually-built dashboard from tools like Tableau is a great way to present your findings, we know the actual process of building that dashboard can be slow and requires a steep learning curve. At Graphed, we created a way to skip that complexity entirely. By connecting your data sources and using simple, natural language, you can generate real-time, interactive dashboards in a matter of seconds, giving you the time back to focus on insights instead of configuration.