Embed Ask Data

You can use the Embedding API to embed Ask Data in your web apps and web pages. The Embedding API provides a <tableau-ask-data> web component that you can place in your HTML code. If you want to use JavaScript to initialize the API and embed the Ask Data lens, you can instantiate a TableauAskData object and set Ask Data properties. For information about creating Ask Data lenses, see Automatically Build Views with Ask Data.

The following information will help get you started embedding Ask Data lenses.

In this section

• Use the web component to initialize the API and embed Ask Data
• Use JavaScript to initialize the API and embed Ask Data
• Configure TableauAskData objects and components
• Authentication and permissions
• What’s next

Use the web component to initialize the API and embed Ask Data

The easiest way to initialize the API and embed Ask Data in your web pages is use the new <tableau-ask-data> web component in your HTML page. The component looks like the following, where the src attribute specifies the URL to the Ask Data lens on Tableau Cloud.

<tableau-ask-data id="tableauAskData"
  src='https://online.tableau.com/askData/lens/Superstore+Datasource'>
</tableau-ask-data>

To use the web component, you first need to create an Ask Data lens. After you create the lens, click the Share button and then click Copy link. This link is the src URL that you use in the Ask Data web component. When you create the component, it’s also good to provide an identifier (id) in case you need to reference the component later.

In your HTML code, add a link to the Embedding API v3 library. In general, it is a best practice to link to the Embedding API library on the Tableau instance that serves the Ask Data lens. For more information, see Access the Embedding API. The Ask Data web component is available on Tableau 2023.1 and later (starting with version 3.5 of the Embedding API library).

In addition to the src attribute, the <tableau-ask-data> web component has additional settings that you can configure. For example, the height and width of the Ask Data lens, and the option to show or hide buttons in the UI. For a list of the options, see Configure TableauAskData objects and components.

Example using the <tableau-ask-data> web component

<script type="module"
  src="https://online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js">
</script>

<tableau-ask-data id="tableauAskData"
  height="800"
  width="1000"
  src='https://online.tableau.com/askData/lens/Superstore+Datasource'
  show-save
  show-share>
</tableau-ask-data>

Use JavaScript to initialize the API and embed Ask Data

In some instances, you might prefer to configure and initialize the Ask Data lens using JavaScript, rather than using the <tableau-ask-data> web component. In this case, you use a TableauAskData JavaScript object.

The first step is to create an <div> to contain the Ask Data lens in your HTML code. In this respect, this is similar to what you do to embed a view. You also need to give the <div> an identifier (say, askDataJsContainer) so that you can specify that element when you append the embedded Ask Data lens. This is important because the lens is not rendered until you add it to the DOM.

HTML code

<div id="askDataJsContainer"></div>

In your JavaScript code, you need to import the TableauAskData object from the Embedding API v3 library. You can then create a new instance of the object and configure the object with the path to the lens and other properties by the object (see Configure TableauAskData objects and components). It’s important to note that creating the object new TableauAskData() does not render the Ask Data lens. To do that, you must add it to the DOM (that is, add it to document using appendChild(), for example).

Also, if you put your JavaScript code in a separate .js file, you’ll need to import the file in your HTML page with the type set as module.

<script type="module" src="./myEmbeddedCode.js"></script>

For example, the following code shows how you might embed an Ask Data. In this instance, the the Save button is shown.

JavaScript code for embedding a TableauAskData object

import {
  TableauAskData
} from 'https://online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js';

let elementId = 'askDataJsContainer';

function initAskData() {
  console.log('InitAskData');
  let url = 'https://online.tableau.com/askData/lens/Superstore+Datasource';
  let askData = new TableauAskData();

  askData.height = 700;
  askData.width = 800;
  askData.showSave = true;

  askData.src = url;

  document.getElementById(elementId).appendChild(askData);
  console.log('Initialized askData with v3', askData);
}

initAskData();

Configure TableauAskData objects and components

To configure the Ask Data lens, you can use a set of HTML attributes on the <tableau-ask-data> web component, or as JavaScript (JS) properties on the corresponding TableauAskData JavaScript objects. For HTML attributes that accept a value, such as width and height, the syntax is <property>="<value>". For Boolean properties, such as show-save or show-share, you can either include the flag to effectively set it to true, or omit it to effectively set it to false.

The following table lists the properties you can add to the <tableau-ask-data> web component, or as JavaScript (JS) properties on the corresponding TableauAskData JavaScript object.

You can also add custom parameters to the <tableau-ask-data> web components and TableauAskData objects. See About custom parameters.

Authentication and permissions

The Embedding API provides options for authentication. If you are embedding Ask Data from Tableau Cloud, you can configure Tableau to use a connected app for authentication. For information about using connected apps, see Authentication and Embedded Views. The scope (scp) to use for the Ask Data is tableau:ask_data:embed. You need to know the scope when you generate the JSON web token (JWT) that is associated with the <tableau-ask-data> component or TableauAskData object.

For more information about connected apps, see Use Tableau Connected Apps for Application Integration.

What’s next

• For information about creating Ask Data lenses, see Automatically Build Views with Ask Data.

• For information about connected apps, see Use Tableau Connected Apps for Application Integration.