Embedded analytics in Tableau - Step-by-Step Guide

Introduction

Embedded analytics lets you put Tableau dashboards inside other websites or apps. This helps users see data insights without leaving their usual tools.

When you want to show sales reports inside your company intranet page.

When customers need to view their order data inside your service portal.

When you want to add interactive charts to a business app without making users switch tools.

When you want to share live dashboards with partners on a secure webpage.

When you want to customize the look and feel of dashboards inside your own website.

Steps

Step 1: Open

- Tableau Server or Tableau Online

You see the list of published dashboards and views.

Step 2: Select

- the dashboard you want to embed

The dashboard opens in a new tab.

Step 3: Click

- Share button at the top right

A dialog box appears with sharing options.

Step 4: Copy

- the Embed Code section

You have the iframe HTML code to embed the dashboard.

Step 5: Paste

- the copied iframe code into your website or app's HTML

The dashboard appears inside your webpage when viewed in a browser.

Step 6: Adjust

- the iframe width and height attributes in your HTML

The embedded dashboard fits well in your page layout.

Before vs After

Before

Website page shows static content without any data visualization.

After

Website page shows an interactive Tableau dashboard embedded inside, allowing users to explore data.

Settings Reference

Embed Code

📍 Share dialog on Tableau Server or Tableau Online

Provides the HTML code to embed the dashboard in other web pages.

Default: Standard iframe code with default size

Trusted Authentication

📍 Tableau Server Admin settings

Allows users to access embedded dashboards without logging in again.

Default: Disabled

Dashboard Size

📍 Dashboard pane in Tableau Desktop before publishing

Controls how the dashboard adjusts to the embedded container size.

Default: Automatic

Common Mistakes

Embedding dashboards without setting up user authentication.

Users may see login prompts or get access errors when viewing embedded dashboards.

Configure trusted authentication or use Tableau's JavaScript API to handle user sign-in smoothly.

Using fixed iframe sizes that do not fit the webpage layout.

The embedded dashboard may appear cut off or have scrollbars, harming user experience.

Set iframe width and height to match your page design or use responsive sizing.

Summary

Embedded analytics lets you place Tableau dashboards inside other websites or apps.

You get the embed code from Tableau Server or Online and paste it into your webpage HTML.

Remember to handle user authentication and adjust dashboard size for best user experience.

Practice

1. What is the main purpose of embedded analytics in Tableau?

easy

A. To display live Tableau dashboards inside other applications or websites

B. To create static images of dashboards for reports

C. To export data from Tableau to Excel

D. To design dashboards only for Tableau Desktop

Solution

1. Step 1: Understand embedded analytics concept

   Embedded analytics means putting live Tableau visuals inside other apps or websites.

2. Step 2: Identify the correct purpose

   Only To display live Tableau dashboards inside other applications or websites describes embedding live dashboards, others describe unrelated tasks.

3. Final Answer:

   To display live Tableau dashboards inside other applications or websites -> Option A

4. Quick Check:

   Embedded analytics = live dashboards inside apps [OK]

Hint: Embedded analytics means live dashboards inside other apps [OK]

Common Mistakes:

• Confusing embedded analytics with exporting data
• Thinking it creates static images only
• Assuming it only works inside Tableau Desktop

2. Which HTML tag is commonly used to embed a Tableau dashboard into a webpage?

easy

A. <embed>

B. <iframe>

C. <script>

D. <div>

Solution

1. Step 1: Recall embedding methods

   Tableau dashboards are often embedded using the <iframe> tag to load live content.

2. Step 2: Compare options

   <embed> is less common, <script> is for JavaScript code, and <div> is a container but not for embedding external content.

3. Final Answer:

   <iframe> -> Option B

4. Quick Check:

   Embedding uses iframe tag [OK]

Hint: Use <iframe> tag to embed live dashboards [OK]

Common Mistakes:

• Using <embed> which is less flexible
• Confusing <script> with embedding tag
• Thinking <div> embeds content directly

3. Given this Tableau JavaScript API snippet:

var vizDiv = document.getElementById('tableauViz');
var vizURL = 'https://public.tableau.com/views/SampleDashboard';
var options = { width: '800px', height: '600px' };
var viz = new tableau.Viz(vizDiv, vizURL, options);

What will this code do?

medium

A. Create a new Tableau workbook on the server

B. Export the dashboard as an image file

C. Embed a Tableau dashboard with 800x600 pixel size inside the element with id 'tableauViz'

D. Display an error because 'tableau.Viz' is not a valid function

Solution

1. Step 1: Understand the JavaScript API usage

   The code creates a new Tableau visualization inside the HTML element with id 'tableauViz' using the given URL and size options.

2. Step 2: Analyze the options and function

   The 'tableau.Viz' constructor embeds the dashboard with specified width and height, no export or server workbook creation occurs.

3. Final Answer:

   Embed a Tableau dashboard with 800x600 pixel size inside the element with id 'tableauViz' -> Option C

4. Quick Check:

   tableau.Viz embeds dashboard in element [OK]

Hint: tableau.Viz creates embedded dashboard in specified element [OK]

Common Mistakes:

• Thinking it exports or creates new workbooks
• Assuming 'tableau.Viz' is invalid
• Ignoring the size options

4. You embedded a Tableau dashboard using an iframe, but it does not resize properly on mobile devices. What is the most likely cause?

medium

A. The iframe lacks responsive design settings like width in % or viewport meta tag

B. The Tableau dashboard URL is incorrect

C. The iframe tag is missing the src attribute

D. The Tableau JavaScript API is not loaded

Solution

1. Step 1: Identify responsive design issue

   Improper resizing on mobile usually happens when iframe uses fixed pixel width instead of relative units or lacks viewport meta tag.

2. Step 2: Eliminate other causes

   Incorrect URL or missing src would prevent loading, not just resizing; missing API affects JS embedding, not iframe resizing.

3. Final Answer:

   The iframe lacks responsive design settings like width in % or viewport meta tag -> Option A

4. Quick Check:

   Responsive iframe needs relative width and viewport tag [OK]

Hint: Use % width and viewport meta for responsive iframes [OK]

Common Mistakes:

• Blaming URL or src attribute for resizing issues
• Confusing iframe with JavaScript API embedding
• Ignoring responsive design principles

5. You want to embed a Tableau dashboard in your company portal and ensure it is accessible to screen readers and keyboard users. Which approach best supports accessibility?

hard

A. Export the dashboard as a PDF and upload it to the portal

B. Embed the dashboard using a simple iframe without any additional attributes

C. Use an image snapshot of the dashboard with alt text

D. Use Tableau JavaScript API to embed the dashboard and add ARIA labels and keyboard navigation support

Solution

1. Step 1: Understand accessibility needs

   Screen readers and keyboard users require semantic markup and ARIA labels, which simple iframes or images lack.

2. Step 2: Choose embedding method supporting accessibility

   The Tableau JavaScript API allows adding ARIA attributes and keyboard controls, improving accessibility over static or iframe embeds.

3. Final Answer:

   Use Tableau JavaScript API to embed the dashboard and add ARIA labels and keyboard navigation support -> Option D

4. Quick Check:

   JS API + ARIA = better accessibility [OK]

Hint: Use JS API with ARIA labels for accessible embeds [OK]

Common Mistakes:

• Assuming iframe alone is accessible
• Using static images or PDFs instead of live dashboards
• Ignoring keyboard navigation needs