Embedding Tableau Public dashboard in WordPress

It’s been a while since I embedded a dashboard. I had some issues with WordPress and I couldn’t been bothered. But seems like time resolved it for me! So here’s a short and sweet how-to post on embedding.

There are two options. First one is a piece of code, the other one is a link. Use the code, it’s easier than you think.

Honestly, Tableau has a great page on this and the internet is full of advice on how to embed dashboards. I just need to show colleagues at work how it works. 🙂

Embed Using the Code

Anyway, here’s what the code looks like (apologies for – most probably wrong – the indentation):

<div class='tableauPlaceholder' id='viz1629110787522' style='position: relative'>

<noscript>
	<a href='http:&#47;&#47;sarka.hubacek.uk&#47;semi-circle-curved-line-chart-in-tableau&#47;'>
	<img alt='resume ' 
		src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Sa&#47;SarkaHubacekResume&#47;resume&#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='embed_code_version' value='3' /> 
<param name='site_root' value='' />
<param name='name' value='SarkaHubacekResume&#47;resume' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Sa&#47;SarkaHubacekResume&#47;resume&#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' />
<param name='language' value='en-US' />
</object></div>                

<script 
	type='text/javascript'>                    
	var divElement = document.getElementById('viz1629110787522');                    
	var vizElement = divElement.getElementsByTagName('object')[0];                    
	if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1200px';vizElement.style.height='927px';} 
		else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1200px';vizElement.style.height='927px';} 
		else { vizElement.style.width='100%';vizElement.style.height='1727px';}                     
	var scriptElement = document.createElement('script');                    
	scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    
	vizElement.parentNode.insertBefore(scriptElement, vizElement);                
</script>

As you saw in the screenshot, you just go to the dashboard/workbook you want to embed, click on the share button and copy the code from the pop-up window.

Then you go to WordPress, change the view to Code Editor and paste the code wherever you want it to show (don’t bother with the indentation, just copy & paste).

Here you see result of the embedding:

Leave a Comment

Your email address will not be published. Required fields are marked *