How to Embed Tableau Dashboards in a Web Page

If you use Tableau to build performance dashboards for your marketing clients, you may be used to sending links to specific reports over email. But wouldn’t it be better to embed Tableau in a web page you control rather than send your clients to another site?

Embedding Tableau in a website is actually super easy, and there are a couple different ways to do it. In this guide I will walk you through the process of how to embed Tableau dashboards in a website using the Tableau embed code as well by creating an iframe code.

Then I’ll suggest the easiest way of all to share a Tableau, which is in a free Ahsuite client portal. Hey, as the founder of Ahsuite I’ve got to plug my own product!

How to Embed a Tableau Dashboard Using the Embed Code

If your website builder lets you edit the html or input snippets of code, you can easily embed Tableau in a website using the provided embed code. Just follow these steps.

Step 1: Select the report you want to embed and click the share button

The share button is located in the top right corner above the report (see the screenshot below).

Step 2: Copy the embed code

When you click the share button, a popup will appear with two options for you to copy from: Embed Code and Link. For this implementation you want to copy the Embed Code.

Step 3: Paste the embed code into your website’s HTML

Depending on the website builder you are using, you may do this by editing the html directly or by inserting a code block (e.g. with the WordPress block editor).

Be sure to place the embed code where you want it to appear on the page. For example, if you want it to appear beneath a block of text, paste it underneath that text separated by a paragraph break using <p>.

Here is an example using the Tryit editor from W3schools:

That’s it! As long as you can edit your website’s html, you can easily embed an interactive Tableau report using the embed code provided.

How to Embed Tableau in an iframe

When I hear the word “embed” I immediately think of iframes, yet the embed code provided by Tableau does not use the iframe element.

In fact, you may find the provided embed option is incompatible with certain website builders that do not support javascript.

Not to worry, there is another way. With Tableau, embedding is not as simple as wrapping the link in an iframe, but I will show you how to do it.

Step 1: Get the link url for your Tableau report

Go to the share button again, but this time select the Link url instead of the embed code.

Step 2: Edit the link url.

The link provided will not work if you put it in an iframe, so you need to edit it. As an example, let’s take this public Tableau report about Beyonce’s Grammys:

https://public.tableau.com/views/BeyoncesGrammys/BeyoncesGrammys?:language=en-US&:display_count=n&:origin=viz_share_link

You just need to change the end of the url, starting with the question mark (?).

Replace this part:

?:language=en-US&:display_count=n&:origin=viz_share_link

With this:

?:showVizHome=no&:embed=true

Here is that example again after editing it:

https://public.tableau.com/views/BeyoncesGrammys/BeyoncesGrammys?:showVizHome=no&:embed=true

Now the url is ready to be wrapped in an iframe element.

Step 3: Wrap the edited url in an iframe tag

The most basic iframe markup looks like this:

But you will probably want to also define the height and width of the embed. Here is the example Beyonce report from above, now wrapped in an iframe element:

Step 4: Insert the iframe code where you want it on the page

As with the provided Tableau embed code, you will insert this iframe code where you want it to appear on the page. Here it is again using the Tryit editor from W3Schools:

How to Embed Tableau using Ahsuite

The easiest way to embed Tableau and share it with your client is to add it as a View in Ahsuite. Then you don’t need to mess with code at all. All you have to do is click “+ View” and paste the link url.

When your client logs into their client portal, they will see the Tableau report beautifully displayed alongside a sidebar menu that you can customize how you like. You can also embed multiple things in the portal that your client can access from a drop-down menu.

Your client can have unlimited client users who can access the portal with a username and password. Or to make things even simpler, you can generate an autologin link to share view-only access to the client portal. That is how I can share this demo client portal with you!

My Tableau Embed Doesn’t Load, What Should I Do?

Having trouble getting your embedded Tableau report to load? It could be an issue with the Tableau report’s settings.

The person with administrative control of the report can disable embedding from specific domains or even disallow embedding entirely. If that is the case, that would explain why the report is failing to load for you.

Check with the Tableau report’s administrator and ask them to make sure embedding is not disabled and that your domain is on the “embedding allow list.”

Conclusion

You can make fantastic reports using Tableau, but when you send your clients a report as a link, you are sending them to another website where you have no control over their experience.

It is far better in terms of customer experience and your own branding if you can embed those reports right in a client dashboard that you have customized for the client.

Embedding Tableau in an website is easy to do if you follow the steps I outlined above. You can use the embed code provided by Tableau, or with a little modification you can embed Tableau in an iframe.

But the cleanest and easiest way to share your Tableau report or dashboard is to use Ahsuite. Our client portals are designed for a convenient, organized, and secure experience that your clients will love. Best of all, you can embed anything in up to three Ahsuite client portals for free forever. Just click here to build your first client portal in minutes!