Tableau Public is a popular data visualization tool that allows users to create interactive dashboards and share them with the world. Embedding these dynamic visualizations directly onto your website can enhance user engagement and provide a seamless experience. In this blog post, we’ll walk you through the simple steps to embed a Tableau Public dashboard on your webpage. We will be using WordPress blog as an example here.
1. Create and Publish Your Dashboard to Tableau Public
When creating your dashboard in Tableau, ensure that your dashboard size is able to accommodate for the limited space on your WordPress site page. This may vary for different WordPress blogs as some may be designed with navigation panes on the side of websites or other website elements. If we embed a dashboard that is too large for the website, the dashboard will be cut off and some elements on the dashboard will no longer be visible. To rectify this, we can change our dashboard size under the dashboard size options in Tableau. After selecting fixed size, we can choose from a selection of dashboard sizes which included some presets recommended for embedding into websites. We suggest starting with the Web Page embedded (800 x 800) size for now if you’re not sure were to start. We can also return to Tableau to reupload an updated dashboard if the size is not quite right for your blog.
After finishing our dashboard, lets publish our dashboard to Tableau Public. If you are using Tableau Public to build your dashboard, you will automatically be prompted to publish your dashboard when you save. If you are on Tableau Desktop, you will have to publish your dashboard to Tableau Public by selecting server in the menu bar located at the top of the interface then selecting Tableau Public from the dropdown menu.
2. Go to Tableau Public, press the share button and copy the embed code
Once our dashboard is published, we can navigate to our Tableau Public and open up our dashboard. In the top right, you will find a share button where we will find the option to copy embed code.
3. Embed Tableau Public Dashboard into WordPress Blog Page
Now navigate to the webpage where you want to embed your dashboard, in this case, the WordPress Blog Page, and switch to Text Tab on the top right corner, and paste the embed code. Then if you click back to Visual Tab, or click preview from the top right corner shown below, you will be able to see your dashboard embedded in your blog.
4. Fix the Padding and Publish
The last step is to fix the padding. As you can see in the screenshot below, there is a large white space between our header and our embedded dashboard.
To explore why this is happening, we can inspect element by right click on our WordPress site and looking into the HTML code. As can be seen in this line, we can see that the padding has been set to 50% by default.
We can copy this line into our blog under the text tab as we used before in front of our dashboard embed code. We can change the padding to 0% and this will resolve our padding issue. We can check whether this has resolved our padding issue by selecting preview. When you are ready to publish your blog, click publish!
We hope this blog has been educational. Happy embedding!
This blog is cowritten by Stephanie You and Juliet Ruan. Hope you enjoy your reading!
Please note that we are using Tableau Desktop 2023.2 if you find that there are some differences in your Tableau Desktop interface.