Embedded Analytics: How to Embed Tableau Dashboards Into a Web Page
This article will show you three ways to embed Tableau dashboards into a web page.
- iframe + Tableau share link
- Tableau Embedding API
In this local example, a simple HTML page will be created using a text editor. A production-embedded analytics application with Tableau is much more complex than what will be covered in this blog post.
If you are looking for an easy, out-of-the-box solution, Zuar has advanced yet easy-to-use products for embedded analytics. To jumpstart the process, consider setting up a free data strategy assessment with one of Zuar's Tableau experts!
We won't be covering Tableau Server or Tableau Cloud security (i.e., the need for a reverse proxy when exposing Tableau Server to the internet) or authentication (i.e., single sign-on and user provisioning).
However, these are incredibly important topics when moving your embedded analytics application from development/testing to production. You'll need to consider things like Trusted Ticket Authentication, Connected Apps, and/or integrating with an Identity Provider.
Prerequisites for Tableau Embedding
- A Tableau Server / Tableau Cloud account. If you do not have an account, please let us know, and we can spin up a trial for you to use, or help you make a purchase.
- Having the Tableau dashboard content published that you want to embed. For testing, you can use any dashboard published to Tableau Server / Tableau Cloud.
- A text editor to create HTML files. Examples here will be in Notepad++ but your preferred editor is perfectly fine.
Get Started: Create a Basic HTML file
Get Started: Create a Basic HTML file
Let’s make an HTML file that will eventually house our Tableau content.
Use this as a template:
<!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>Hello World</h1> <p>Let's Embed!</p> </body> </html>
Save the file as tableau.html.
Now that we have a local webpage, let's start embedding Tableau.
Method 1: iframe + Tableau Share Link
The first method of embedding Tableau into a webpage is with a simple iframe
*NOTE: This is NOT Recommended for embedding at scale or in a secure application. Tableau Public vizzes is the main use case for the simple iframe embed.
Since we are just creating local files, though, no harm done today in using your Server or Cloud content in this example. On your Tableau Server / Tableau Cloud, go to the content you want to embed and click the 'Share' button.
Click the green 'Copy link' button.
Edit tableau.html and add an <iframe> tag between the body tags. The src is the link copied from Tableau. Also, add width and height attributes to the iframe that fit the size of the dashboard:
<!DOCTYPE html> <html> <title>Basic iframe</title> <body> <h1>My Tableau Viz</h1> <iframe src="https://public.tableau.com/app/profile/anniesanalytics/viz/KPIDashboardBonusExample/KPIDashboard" width="1200" height="800"></iframe> </body> </html>
Save the file and refresh your browser. You should see Tableau not exactly wanting to connect and show your viz. This is due to Clickjack Protection being enabled by default on Tableau products to eliminate attacks via Clickjacking or UI Redressing.
This allows both the web page to interact with the embedded Tableau dashboard and the embedded Tableau dashboard to interact with the web page. This method can be used on Tableau Server, Tableau Cloud, or Tableau Public.
Edit tableau.html and update it with the code below:
Save the file and refresh your browser. You should see your Tableau Viz on the page:
You also may be confronted with a login page saved for browser cookies or an existing Tableau SSO setup on your Server or Cloud. This is one of the complexities of moving beyond local files and into these becoming web pages served in an application.
Authentication and SSO make for the seamless integrations we know and love when working with the apps we like best. See our other articles for how to implement SSO with Okta or OneLogin.
</script> <object class='tableauViz' width='1200' height='1000' style='display:none;' name='viz'> <param name='host_url' value='http://public.tableau.com/' /> <param name='site_root' value='' /> <param name='name' value='KPIDashboardBonusExample/KPIDashboard' /> <param name='filter' value='Region=Central' /> </object>
Try adding this highlighted last line to our current tableau.html, but with a field and value from your dashboard. Here’s the filtered result for Region:
To illustrate the possible communication between Tableau and the page itself we can dig into the page. The following uses Google Chrome navigation, but the idea should be similar with other browsers.
Typing viz.showShareDialog() and pressing enter on the console opens up the 'Share View' dialog box. This is the exact same dialog box you see on Tableau Server / Tableau Cloud when you press the 'Share' button on a dashboard.
Method 3: Tableau Embedding API V3
This API allows for multiple methods of embedding within a page, including a new Web Component feature, which leads to the simplest of embed code on your HTML pages.
You also can now also embed Web Authoring easier than ever and have an expanded number of options for interacting with the Tableau viz and page itself.
The Embedding API is what Tableau is using when copying the Embed Code from your viz:
Embedding API Method 1 – Web Components
Web Components are customized HTML syntax that allow for the use of external tools. You can now create on a <TableauViz> object directly in the HTML, much like you would a <div> or a <link>.
This leads to very approachable code, as shown in this example:
‘viz’ is then appended to a now instantiated ‘tableauViz’ element and added to the page’s Document Object Model. It is then referenced very cleanly and simply in a <div> within the HTML. Letting the script do all the work with the same result as previous:
At scale in an application, this means that your front-end page can be as clean as possible and easily reference the scripts stored on your backend in typical application fashion.
If you are starting to embed Tableau for the first time today and looking to go down any of these paths to learn more for your own education or for your business, I would wholly recommend the Embedding API!
For more information on all the new features and a full reference, go here: Release Notes for the Tableau Embedding API.
Find out more about embedded analytics here:
Implementing Embedded Analytics
We covered three ways to embed Tableau dashboards in a webpage. But again, a production-embedded analytics application with Tableau is much more complex than what we have covered in this guide.
Check out Zuar's out-of-the-box solutions for your next embedded analytics project; whether it’s solely Tableau dashboards or building an entire analytics center of excellence with customized, modern functionality, Zuar Portals are a gamechanger in terms of time-to-value and time-to-market for your embedded product. Our team of Tableau experts will help you every step of the way!