Embeds from Tableau Public don't work

Developer help
1

Hello,

I’m not able to embed a Tableau public link into a post.

The code is as follows:

<div class='tableauPlaceholder' id='viz1596476668200' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;RB&#47;RBIData&#47;CC-CardsOutstanding&#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='RBIData&#47;CC-CardsOutstanding' /><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;RB&#47;RBIData&#47;CC-CardsOutstanding&#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' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1596476668200');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

To get an idea of the issue, here is what it looks like on the backend:

image
image871×520 14.5 KB

And this is the frontend - link

Since it looks like a standard <script> tag, and the tableau public website give it out as the embed code - I thought it should work out of the box.

Any suggestions appreciated.

thanks!

2

If i understand correctly, u r using other option under embed. Could you try HTML option under primary?

3

Hi there,

I tried using both options. Here is a bit more detail.

image
image794×417 14.2 KB

Refer to the above screenshot, in the first one I try the embed link

https://public.tableau.com/views/RBIData/CC-CardsOutstanding?:language=en&:display_count=y&:origin=viz_share_link

And in the second one I try the embed code

<div class='tableauPlaceholder' id='viz1596515724063' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;RB&#47;RBIData&#47;CC-CardsOutstanding&#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='RBIData&#47;CC-CardsOutstanding' /><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;RB&#47;RBIData&#47;CC-CardsOutstanding&#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' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1596515724063');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

I both cases, it does not work. i.e, I don’t see anything on the frontend.

I suspect it has something to do with @John 's reply here. But, that solution doesn’t work with the latest Casper theme. Also, not sure how I would adapt it to my theme.