How to Embed Tableau Public Visualizations FeatureIf you’ve heard me speak about Tableau before, you likely know I’m a huge advocate of Tableau Public. I credit much of my experience and career opportunities to the free software. What I like most about Tableau Public is (1) it provides a sandbox for being creative and developing your skills outside of your work environment and (2) it provides countless examples that can be downloaded and learned from. In recent months, I’ve had several conversations with employers who consistently cite a quality Tableau Public portfolio as a top consideration when they are reviewing candidates.

By taking Tableau Public visualizations a step further and embedding them in a WordPress blog (or similar), it also provides a great tactic for sharing your know-how or marketing your skills. However, I’ve found the native embed code, which can be found in the bottom right-corner of any Tableau Public visualization, to be problematic. Sometimes there are borders. Sometimes there are unwanted scroll bars. Sometimes I get extra spacing that doesn’t fit the rest of the post well. In WordPress, the embed code can also be fragile when making edits to a post.

As I’ve been embedding my data visualizations this year, I’ve settled on my preferred approach. This post shares how to embed Tableau Public visualizations without borders, scroll bars, or spacing issues. There’s even an app – built in Tableau Public, of course – which will allow you to copy and paste the native embed and share link codes to generate a ready-to-use iframe code.

 

How to Embed Tableau Public Visualizations without Borders, Scroll Bars, or Spacing Issues

The trick to embedding Tableau Public visualizations with my preferred approach is to leverage some old school HTML. Here’s how the underlying embed code looks for my latest data visualization, A Tale of 50 Cities:

<center><iframe src="https://public.tableau.com/views/ATaleof50Cities/ATaleof50Cities?:embed=y&:display_count=yes&:toolbar=no" width="1004" height="1269" frameborder="0"></iframe></center>

I’m using my latest visualization as an example, but this is the code I use to embed every one of my Tableau Public dashboards. There are only three small changes required to get the code to work for a different workbook:

1. Replace the share link following ‘src=’ and between the first set of quotation marks
2. Update the width of the visualization
3. Update the height of the visualization

All three of these elements come from the Share options, ‘Embed Code’ and ‘Link’, that appear when you click the ‘Share’ button in the bottom right-corner of a Tableau Public visualization.

First, the share link. If you want to use my preferred code, simply copy your share link and replace the red text in the code below.

<center><iframe src="https://public.tableau.com/views/ATaleof50Cities/ATaleof50Cities?:embed=y&:display_count=yes&:toolbar=no" width="1004" height="1269" frameborder="0"></iframe></center>

Note that if you see a share link for the Original View or Current View, use the Original View.

Next, replace the width and height numbers with the width and height from your own Tableau Public dashboard. These numbers come from the Embed Code. Here’s the original Embed Code for A Tale of 50 Cities found after clicking the Share button in the bottom right-corner of the viz. I’ve highlighted the width and height in red. You would simply find these numbers for the visualization you want to embed and replace them in the iframe code from the previous step.

<div class='tableauPlaceholder' id='viz1498946781860' style='position: relative'><noscript><a href='https:&#47;&#47;www.ryansleeper.com&#47;'><img alt='A Tale of 50 Cities ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;AT&#47;ATaleof50Cities&#47;ATaleof50Cities&#47;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='path' value='views&#47;ATaleof50Cities&#47;ATaleof50Cities?:embed=y&amp;:display_count=y' /> <param name='toolbar' value='no' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;AT&#47;ATaleof50Cities&#47;ATaleof50Cities&#47;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' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1498946781860');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1004px';vizElement.style.height='1269px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

Also note how much cleaner and easier to manage the new code is compared to the native embed code!

To make this even easier, I’ve created a small app within Tableau Public that you can find below. To use this, copy and paste the embed code and share link into the appropriate boxes. Tableau will do the work of finding the appropriate values and generating an embed code for you. This code can be copied straight from this webpage, but it works best when you (1) download the workbook locally by clicking the ‘Download’ button in the bottom-right corner of the app (2) after generating the embed code locally, right-click on it and choose ‘View Data’ and (3) copy the embed code that appears there to use in WordPress (or similar).


Thanks for reading,
– Ryan