How to Fix Your iFrame

bjones's picture
Posted by Ben Joneson March 20, 2014

If you're one of the few authors who use iFrames to embed a viz on your site, you'll notice that your vizzes don't look quite right since the launch of viz home pages and you're wondering - Hey, what happened?! How do I get them back to how they looked before?

Don't fret! There's an easy change you can make to get them to look right once again.

Doesn't apply to most authors

If you embed using the standard embed code, which will be the case for the vast majority of Tableau Public authors, then read no further. No action is required on your part and the viz you embedded on your site should look exactly the same as it did before the launch of viz home pages.

By "standard embed code", we mean the snippet that you can copy and paste from the "Save To Web Results" page as shown below:

Standard Embed Code

Instructions for authors who use iFrames

If your website has issues with the standard embed code and you need to work around it with custom code such as an iFrame, you'll notice a navigation chrome above your vizzes where one didn't appear before, and the bottom of the viz is chopped off.

It looks that way because the URL in your custom code or iFrame now refers to the viz home page, not the raw viz like it used to.

To fix it so that the raw viz shows up once again, just add "&:showVizHome=no" to the end of the viz URL you call in your iFrame (or "?:showVizHome=no" if it's the first URL parameter after the dashboard name).

Here's an example of the viz before and after applying the fix:

Before and after applying the fix

For interactive versions of these two iFrames, this link takes you to the "broken" iFrame (with the viz home page inside the iFrame), and this link takes you to the "fixed" version (with the raw viz inside the iFrame).

For more information