Tableau Desktop and Web Authoring Help

You can embed metrics to display them alongside other web content, in the context where they are most relevant to your viewers. When you load an embedded metric, you get the freshest data available because you're connecting directly to your data on Tableau Server or Tableau Cloud.

To embed metrics into a webpage, copy the HTML embed code provided on Tableau Server or Tableau Cloud or use the JavaScript example shown below. You can embed multiple metrics on a single page, as long as the metrics come from the same Tableau site.

Embedded metrics work with the same web browsers that are supported by Tableau Cloud and Tableau Server. For a list of supported browsers, see the Technical Specifications. Though embedding is supported by Safari, viewers must turn off “Prevent cross-site tracking” to see embedded content.

The embed code and parameters for embedded metrics differ from those used for embedded views. For information about embedded views, see Embed Views into Webpages.

Note: Your Tableau administrator can limit the sites where embedding is allowed or disable embedding entirely. If your embedded metric doesn't load, check with your administrator to make sure that the site where you have embedded it is on the embedding allow list. For more information, see Tableau Site Settings for Embedding.

Copy the embed code

The fastest way to embed a metric is by copying the embed code provided by Tableau.

1. On Tableau Cloud or Tableau Server, navigate to the details page for the metric that you want to embed.
2. Click the Share Metric button.
3. Click Copy Embed Code.
   
4. Paste the embed code into the webpage where you want to embed the metric.

Write your own embed code

When you copy the embed code from Tableau Server or Tableau Cloud, you are copying the HTML embed code, without any optional parameters. If you want more control over the embedded metric, you can either customise the HTML or use the JavaScript example to write your own script.

HTML example

<tableau-metric
	src='https://mycompany/#/metrics/1'
	link-target='https://example.com'>
</tableau-metric>
<script type='module' src='https://mycompany/javascripts/api/tableau.metric.1.latest.min.js'></script>

JavaScript example

<div id='metricDiv'/>
<script type='module'>
	import { TableauMetric } from 'https://mycompany/javascripts/api/tableau.metric.1.latest.min.js';
				
	let metric = new TableauMetric();

	metric.src = 'https://mycompany/#/metrics/1';
	metric.linkTarget = 'https://example.com';document.getElementById('metricDiv').appendChild(metric);
</script>

Parameters for embed code

The parameters for the embed code can be used to customise both the HTML and JavaScript embedding options.

Authentication for embedded metrics

Embedded metrics follow the same licensing and permission restrictions used on Tableau Server and Tableau Cloud. To see an embedded metric, the viewer must sign in to an account on the Tableau site that the metric is embedded from. Unlike embedded views, embedded metrics don't allow for the use of a Guest account to display metrics to viewers who are not signed in.

Viewers who haven’t signed in to Tableau Server or Tableau Cloud in another tab will be prompted to sign in from the embedded metric itself. To successfully sign in from an embedded metric, the viewer’s browser must be must be configured to allow third-party cookies.

Embedded metrics support all authentication methods for Tableau Server and Tableau Cloud, with the exception of trusted authentication. For metrics embedded from Tableau Server, the server must use HTTPS to secure communication.

To enable a single sign-on experience for embedded metrics, your Tableau administrator must configure a trust relationship between Tableau Server and an external authorisation server (Tableau Server only) or a Tableau connected app and a webpage. For more information, see Register EAS to Enable SSO for Embedded Content(Link opens in a new window) in the Tableau Server help or Configure Tableau Connected Apps to Enable SSO for Embedded Content(Link opens in a new window) in the Tableau Cloud help.

How metric URLs are structured

To embed a metric, you specify the metric URL and the URL of the JavaScript used to render the metric. Metric URLs follow slightly different patterns on Tableau Cloud, Tableau Server environments with a single site and multi-site Tableau Server environments. If you’re not sure how to format the URL, copy the embed code, as it includes both the metric URL and the JavaScript URL.

Metrics must be hosted on Tableau Server or Tableau Cloud. You can’t embed a metric from a local file.

Metric URL structure

• Tableau Cloud site: https://<pod>.online.tableau.com/#/site/<sitename>/metrics/<metric>
• Tableau Server single site (or the Default site): https://<servername>/#/metrics/<metric>
• Tableau Server multi-site: https://<servername>/#/site/<sitename>/metrics/<metric>

JavaScript URL structure

The metric URL changes based on the site you are embedding from, but the URL for the JavaScript that renders the metric doesn’t change because it doesn’t include the site.

• Tableau Cloud site: https://<pod>.online.tableau.com/javascripts/api/tableau.metric.1.latest.min.js
• Tableau Server: https://<servername>/javascripts/api/tableau.metric.1.latest.min.js