Tableau Embed Parser

We’ve created a shortcode for embedding Tableau Vizzes into Hugo Framework based websites, it is quite simple to use and very convenient, however before being able to use it you need to know few fields which have to be retrieved from the share code provided by Tableau. Below are the steps to retrieve the code

Adding the ShortCode to your Hugo Site

To add support for embedding Tableau Public vizzes simply copy our shortcode into the following path /layouts/shortcodes/tableau.html. To embed a viz to your website on your markdown post you need to add the following code wherever you want to embed your viz. The next section will show how to get the code from Tableau Public and then we can use that code to parse out the parameters

{{ < tableau "viz1595830498772" "Hi" "HikeCollection" "Hikes"> }}

Code used to embed a Tableau Public viz

The code above will create the following result:

Rendered Viz from the code above

Obtaining the Share Code

To obtain the sharing code from Tableau Public simply go to the viz you want to embed. From the toolbar on the bottom right there is a share button

Clicking on the share button brings the share dialog which has two fields, the first one labelled Embed Code is the one we’ll be using, copy this field’s data since you will need it for the form below (more on this later)

The code copied will look like the sample below

Sample Code to Embed a Tableau Viz

Extracting Data for our ShortCode

With the embed code copied we can now use it to extract the info we need for our shortcode, simply paste the code into the input box below. This form will extract four fields from the shared code:

• Viz ID
• Viz Prefix Field
• Workbook Name
• Worksheet Name

These are used for our shortcode, alternatively you can simply copy the code in the last field and use it directly in our markdown

Enter Embed Code:

Resulting embedded Viz:

Embedded Viz