How to Show Tableau Dashboard in Website

Displaying a static image of your data on a website is fine, but letting your audience interact with live data is far more powerful. Embedding a Tableau dashboard directly on your website transforms a simple page into an interactive analytics hub. This article will guide you step-by-step through the process of publishing your Tableau work and getting it live on your website.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Why Should You Embed a Tableau Dashboard on Your Website?

Before jumping into the how-to, let's cover a few reasons why this is a fantastic idea. Embedding a dashboard isn't just a technical trick, it's a strategic way to communicate with data.

• Share Live Insights: Instead of sending stale screenshots or PDF reports, you can give stakeholders a link where the data is always up to date. This is perfect for recurring client reports, internal departmental dashboards, or public-facing data updates.
• Create Engaging Content: A blog post or article with an interactive chart is far more compelling than one without. You can let readers filter, hover, and explore the data themselves, making your content more memorable and impactful.
• Enhance Your Portfolio: For aspiring data analysts, an embedded dashboard on your personal site is tangible proof of your skills. It shows recruiters you can not only analyze data but also present it clearly in a common medium.
• Build Data-Driven Products: You can embed dashboards into SaaS applications, client portals, or internal tools, providing analytics exactly where your users need them without building a charting library from scratch.

The Two-Step Process: Publish then Embed

Getting your dashboard onto a website involves two main phases. Understanding this simple framework makes the whole process less intimidating.

1. Publishing: You first need to get your dashboard from your local computer (using Tableau Desktop) onto the web. This means publishing it to a Tableau hosting service, which makes it accessible via a URL.
2. Embedding: Once published, Tableau gives you a snippet of HTML code (an <iframe>). You simply copy this code and paste it into your website’s HTML editor where you want the dashboard to appear.

The "publishing" step is where the main difference lies. Your choice will depend on whether your data is public or private.

• Tableau Public: A free service that's amazing for, well, public data. Anything you publish here is visible to anyone on the internet. It's the perfect choice for portfolios, public data journalism, or non-sensitive projects.
• Tableau Cloud & Tableau Server: These are paid, secure platforms designed for businesses. You publish private, proprietary data here and can control exactly who has permission to view it. Use these for internal dashboards or embedding secure dashboards in client portals.

Method 1: Embedding from Tableau Public (The Free and Easy Way)

Tableau Public is the most common starting point for individuals and those working with public-facing data. The process is incredibly straightforward.

Step 1: Save Your Dashboard to Tableau Public

With your completed dashboard open in Tableau Desktop:

1. Navigate to the top menu and select Server > Tableau Public > Save to Tableau Public...
2. You'll be prompted to sign in to your Tableau Public account. If you don't have one, it's free to create.
3. Give your workbook a name. Remember, this name will be public.
4. Tableau will then publish your dashboard. Once it's finished, it will automatically open the dashboard in your default web browser.

Pro Tip: Remember that any data extracts are also published. Make sure you haven't included any sensitive columns or information before uploading!

Graphed

Still Building Reports Manually?

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

Watch the Demo

Step 2: Find and Copy the Embed Code

Once your dashboard is live on your Tableau Public profile:

1. Look at the bottom-right corner of your published dashboard for a "Share" icon (it looks like three connected dots).
2. Click the share icon. A dialog box will appear.
3. Inside this box, you’ll see an "Embed Code" field with a snippet of HTML that starts with <iframe>. Highlight and copy this entire code block.

<pre><code>&lt,div class='tableauPlaceholder' id='viz1671821033282' style='position: relative'&gt, &lt,noscript&gt,&lt,a href='#'&gt,&lt,img alt='My Awesome Dashboard ' src='https://public.tableau.com/static/images/My/MyAwesomeDashboard/Sheet1/1_rss.png' style='border: none' /&gt,&lt,/a&gt,&lt,/noscript&gt, &lt,object class='tableauViz' style='display:none,'&gt, &lt,param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /&gt, &lt,param name='embed_code_version' value='3' /&gt, &lt,param name='site_root' value='' /&gt, &lt,param name='name' value='MyAwesomeDashboard/Sheet1' /&gt, &lt,param name='tabs' value='no' /&gt, &lt,param name='toolbar' value='yes' /&gt, &lt,param name='static_image' value='https://public.tableau.com/static/images/My/MyAwesomeDashboard/Sheet1/1.png' /&gt, &lt,param name='animate_transition' value='yes' /&gt,&lt,param name='display_static_image' value='yes' /&gt, &lt,param name='display_spinner' value='yes' /&gt, &lt,param name='display_overlay' value='yes' /&gt, &lt,param name='display_count' value='yes' /&gt, &lt,param name='language' value='en-US' /&gt, &lt,/object&gt, &lt,/div&gt,</code></pre>

Graphed

Still Building Reports Manually?

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

Watch the Demo

Step 3: Paste the Code onto Your Website

This final step depends on your website platform (like WordPress, Squarespace, or a custom-coded site), but the principle is the same.

• For WordPress: Edit the page where you want the dashboard. Add a new "Custom HTML" block and paste the embed code into it.
• For Squarespace/Wix: Look for a "Code Block" or "Embed HTML" element and paste the code there.
• For a Custom Site: Paste the code directly into the HTML file where you want it to appear.

Once you save and publish your webpage, the Tableau dashboard will appear right where you placed the code.

Method 2: Integrating with Tableau Cloud or Server (The Secure Way)

If you're dealing with company data, sales figures, or any other sensitive information, you'll use Tableau's paid products. The embedding process is nearly identical, but publishing and authentication are handled differently.

1. Publish to Your Server: In Tableau Desktop, instead of "Tableau Public", you'll go to Server > Sign In.... Enter your Tableau Cloud site URL (e.g., https://10ax.online.tableau.com) or your company’s Tableau Server address, followed by your credentials. Then, go to Server > Publish Workbook....
2. Set Permissions: When publishing, you can manage permissions to specify which users or groups can view or interact with the dashboard. This is the crucial security step.
3. Copy the Embed Code: Navigate to the dashboard on your Tableau Cloud/Server. The "Share" button and "Embed Code" option will be there, just like on Tableau Public. Copy it.
4. Embed and Authenticate: Paste the code into your website. Now, when a user visits that page, their experience will depend on your server's authentication setup. They may be prompted to log in with their Tableau credentials to see the dashboard. For a seamless experience, advanced setups can use "Trusted Authentication" to automatically log users in.

This method is ideal for dashboards embedded in a company intranet, a secure customer-facing analytics portal, or any other private web property.

Customizing Your Embedded Dashboard for a Better Experience

Pasting the default code works, but you can tailor the presentation by modifying the URL inside the embed code. This allows you to control the look and feel, and even filter the data that's initially displayed.

Find the source URL in the code you copied (it looks something like name='MyAwesomeDashboard ' followed by more parameters). You can append parameters to the end of this URL to change its behavior. Just add an ampersand (&) before each new parameter.

• Hide the Toolbar: Want a cleaner look? Add &:toolbar=no to hide the top toolbar with Undo, Redo, and Share buttons.
• Hide Tabs: If you published a workbook with multiple sheets, you can hide the navigation tabs by adding &:tabs=no.
• Pre-Filter the View: This is a really powerful one. You can force the dashboard to load with a specific filter already applied. If you have a "Region" filter in your dashboard, you can add &Region=North+America to the URL. The dashboard will load showing only data for North America.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Adjusting the Size for Responsive Design

By default, the embed code uses fixed pixels for width and height (e.g., width="1016" height="827"). This looks bad on mobile devices. For a simple responsive fix, change these values to percentages:

<object class='tableauViz' width="100%" height="827" ...>

Set a width of "100%" to make the dashboard fill the container it's in. You’ll have to experiment with the height, but this immediately makes it more friendly across different screen sizes. For true mobile mastery, use Tableau Desktop's "Device Layouts" feature to design a completely separate view specifically for phones before you publish.

Final Thoughts

Embedding a Tableau dashboard is a simple but high-impact way to bring live analytics directly to your audience, whether they're on your public blog or inside a secure client application. It all boils down to first publishing your workbook to the correct platform (public or private) and then using the one-click embed code to place it onto your website.

While mastering viz tools like Tableau is an incredibly valuable skill, the whole process of setting up data sources, managing performance, and customizing views can still take hours out of your week. With tools like Graphed, we’ve connected directly to data sources like Google Analytics, Shopify, and paid ads platforms so you can generate these same kinds of robust dashboards just by writing what you want to see. This approach automates the manual build process, letting you create and share live, always-updated analytics in seconds instead of hours of pulling and formatting data.