Tableau Embed Parser
By Hugo Belin
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
![Tableau Public Share Button](/images/content/projects/software/tableauparser/sharebtn.jpg)
Tableau Public 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)
![Sample code to embed a viz](/images/content/projects/software/tableauparser/embedcode.jpg)
Sample code to embed a viz
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
Resulting embedded Viz:
Embedded Viz