How to Embed Tableau Report in Web Page

Bringing a Tableau dashboard to life on your website is one of the best ways to share live, interactive data with your audience. Instead of using static screenshots, embedding lets viewers filter, click, and engage with the data directly on your page. This guide will walk you through exactly how to embed Tableau reports in a web page, from the simplest copy-and-paste method to more advanced customization options.

Why Embed Tableau Reports in Your Web Page?

You've already done the hard work of building a great report, so why not put it where your team or your audience can easily find it? Embedding Tableau visualizations offers several practical benefits:

• Interactive Data for Everyone: Viewers can explore the data themselves. They can apply filters, hover for tooltips, and drill down into details an image could never provide. This puts them in the driver's seat and often helps them answer their own follow-up questions.
• Centralized Information: Instead of making your team members or clients log into Tableau separately, you can bring the data to where they already work - your company intranet, a specific project webpage, a Confluence page, or even a public blog post.
• Live, Real-Time Data: When the data in your Tableau dashboard updates, the embedded version on your website updates automatically. There's no need to constantly re-export and re-upload images every time the numbers change. You set it once, and it stays current.
• Controlled and Secure Sharing: When embedding from Tableau Server or Tableau Cloud, you maintain full control over who sees the data. Users will only be able to view reports they have permission to access, making it a secure way to share information internally.

Choosing Your Embedding Method: An Overview

Before you copy any code, it’s important to know where your Tableau report is hosted, as the process varies slightly depending on the platform.

• Tableau Public: This is a free platform for publicly sharing data visualizations. It’s perfect for blog posts, portfolios, or any situation where the underlying data is not sensitive. Embedding from Tableau Public is simple and open to anyone on the web.
• Tableau Server & Tableau Cloud: These are Tableau's private, secure platforms for businesses. Embedding from these sources is ideal for internal wikis, team portals, and applications where data access needs to be restricted to logged-in users.

We’ll cover the step-by-step instructions for each of these scenarios below.

How to Embed from Tableau Public: Step-by-Step

Tableau Public is the most straightforward option for sharing your vizzes on a public-facing website. Once your report is published, getting it onto your page takes only a few clicks.

Step 1: Publish Your Visualization to Tableau Public

First, you need to save your completed workbook to Tableau Public from Tableau Desktop. Open the workbook you wish to share, then navigate to File > Save to Tableau Public As.... Give it a title and Tableau will upload and publish it to your profile.

Step 2: Find the Share Button

Once your report is live on your Tableau Public profile, open it. At the bottom right of the visualization, you'll see a row of options. Click the Share icon, which looks like three connected dots.

Step 3: Copy the Embed Code

A pop-up window will appear with a few sharing options. You'll see "Embed Code" and "Link." You want the Embed Code. This block of text is an HTML <iframe> snippet. Click the copy button next to it.

Your code will look something like this:

<div class='tableauPlaceholder' id='viz1678886400000' style='position: relative'>
<noscript><a href='#'><img alt='My Awesome Dashboard ' src='https://public.tableau.com/static/images/my/mydashboard/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='mydashboard/Dashboard1' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image' value='https://public.tableau.com/static/images/my/mydashboard/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',
scriptElement = document.createElement('script'),
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js',
vizElement.parentNode.insertBefore(scriptElement, vizElement),
</script>

Step 4: Paste the Code Into Your Web Page's HTML

Finally, navigate to the web page where you want the report to appear. Switch to the HTML or code view of your editor and paste the embed code where you want the dashboard to show up. Save your page, and you're done! The interactive Tableau report will now be live on your site.

How to Embed from Tableau Server or Tableau Cloud

The process for embedding from Tableau Server or Tableau Cloud (the privately hosted versions) is very similar, but with one key difference: authentication. Viewers must have permission to see the report.

Step 1: Navigate to the View You Want to Embed

Log in to your Tableau Server or Tableau Cloud environment. Open the specific dashboard or view that you plan to embed.

Step 2: Copy the Embed Code

Just like with Tableau Public, click the Share button located in the toolbar at the top of the dashboard. In the pop-up, you'll see an Embed Code field. Copy this snippet.

The code is much simpler than the Tableau Public version and usually looks like this:

<script type='text/javascript' src='https://your-server-name.com/javascripts/api/viz_v1.js'></script>
<div class='tableauPlaceholder' style='width: 1366px, height: 795px,'>
<anggraz class='tableauViz' width='1366' height='795' style='display:none,'>
<param name='host_url' value='https://your-server-name.com/' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='/t/yoursitename' />
<param name='name' value='Superstore/SalesDashboard' />
<param name='tabs' value='yes' />
<param name='toolbar' value='yes' />
</anggraz>
</div>

Step 3: Paste the Code Into Your Web Page

Paste this HTML code into your internal portal, intranet page, or application where you want to display the report.

Step 4: A Note on Authentication

When someone visits this page, their browser will prompt them to log in to Tableau Server/Cloud before it will render the dashboard. If they are already signed in, the viz will load automatically. This ensures that only authorized users with the correct permissions can view the embedded data.

For a more seamless experience where users don't have to log in separately, you'll need to work with your developers or Tableau admin to set up a more advanced method like Trusted Authentication or a SAML single sign-on (SSO) solution.

Customizing Your Embedded Dashboard

The default embed code works great, but you can easily customize it by adding or changing parameters directly in the code.

Making the Dashboard Responsive (Adjusting the Size)

The default embed code often sets a fixed pixel width and height. To make the dashboard responsive and fill its container, you can change these values.

Within the <object> tag, find the width and height attributes. Change them from pixels to a percentage:

Change this: <object class='tableauViz' width='1000' height='827'...>

To this: <object class='tableauViz' width='100%' height='827'...>

Hiding Tabs and the Toolbar

Don't want viewers to see the extra functionalities or tabbed views? You can hide them by tweaking a few parameters in your copied code. Look for these two lines:

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

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

Change the value from 'yes' to 'no' to hide them. You can show or hide the toolbar at the top (which includes download and share options) or the worksheet tabs at the bottom.

Dynamically Filtering the View

For a really slick integration, you can also pass filter values to your embedded view directly through the URL. This allows you to show a specific version of your dashboard based on the webpage. To do this, you would add a parameter to the dashboard URL in the name property. For example, to filter for the "West" region:

<param name='name' value='Superstore/SalesDashboard?Region=West' />

Troubleshooting Common Embedding Issues

Occasionally, things don't go as planned. Here are some quick fixes for common problems:

• The dashboard doesn't appear at all:
• I see a "Ticket redemption failed" error: This is a specific error for dashboards using Trusted Authentication. It means the security ticket has expired or is invalid. Your Tableau Admin will need to check the server configuration.
• The dashboard gets cut off or looks weird: This is usually a sizing issue. Check the CSS on your webpage - the parent container (the <div> surrounding your Tableau object) might have a fixed or small height, which is cutting off the viz. Adjusting its height attribute in your CSS should fix it.

Final Thoughts

Embedding a Tableau report is a simple but powerful way to bring interactive data insights directly into the platforms you use. By copying a small piece of code, you can replace static images with live dashboards that are engaging, secure, and always up to date.

Creating those compelling reports in the first place, however, is often the biggest hurdle. Before you can even think about embedding, you have to connect your data sources and build the dashboards. For this, we built Graphed to be the easiest way to generate analytics dashboards. Just connect sources like Google Analytics or Salesforce and use plain English to ask for the report you want. We turn your request into a live, interactive dashboard instantly, so you can spend your time sharing insights, not wrestling with complex BI tools.