--- schema_version: "1" id: 5d7ac94bde611676b6c459ce61e8e6c1e11914424f118d136741de976bb0e40b title: Embed Ask Data collection: tableau version: next locale: en-us portal_url: https://docs.salesforce.com/tableau/next/en-us/api/embedding_api/docs/embedding_api_ask_data.md canonical_url: https://help.tableau.com/v0.0/api/embedding_api/en-us/docs/embedding_api_ask_data.html source_site: help.tableau.com content_type: documentation content_hash: cacc87d924aee93b49bca4753f0cfcf1337324acb6b38bfc765fde16d0180121 description: Documentation for the Tableau Embedding API --- # Embed Ask Data **Important changes coming for Ask Data and Metrics** Tableau's Ask Data and Metrics features will be retired in Tableau Cloud in February 2024 and in Tableau Server version 2024.2. With advances in natural language technologies, we're developing an improved interface that will make it easier to ask questions of your data and stay on top of changes. For more information, see [How Tableau GPT and Tableau Pulse are reimagining the data experience](https://www.tableau.com/blog/tableau-pulse-and-tableau-gpt).
For information about embedding Tableau Pulse metrics, see Embed Tableau Pulse metrics.
You can use the Embedding API to embed Ask Data in your web apps and web pages. The Embedding API provides a `` 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](https://help.tableau.com/current/pro/desktop/en-us/ask_data.htm). The following information will help get you started embedding Ask Data lenses. * * * ### 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 `` 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. ``` ``` 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](/v0.0/api/embedding_api/en-us/docs/embedding_api_get.html). 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 `` 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](#configure-tableauaskdata-objects-and-components). **Example using the `` web component** ``` ``` * * * ### 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 `` web component. In this case, you use a `TableauAskData` JavaScript object. The first step is to create an `
` 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 `
` 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** ```
``` 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](#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`. ``` ``` 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 `` 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 `=""`. 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 `` web component, or as JavaScript (JS) properties on the corresponding `TableauAskData` JavaScript object. | HTML Property | JS Property | Accepted Values | Description | Applies to | | --- | --- | --- | --- | --- | | `height` | `AskData.height` | (e.g. “800px”) | Can be any valid CSS size specifier. If not specified, defaults to the published height of the Ask Data lens. | ``, `TableauAskData` | | `width` | `AskData.width` | (e.g. “800px”) | Can be any valid CSS size specifier. If not specified, defaults to the published width of the Ask Data lens. | ``, `TableauAskData` | | `show-embed` | `AskData.showEmbed` | boolean | Indicates whether the Ask Data lens Embed Code button is hidden or shown. By default, the Embed Code is hidden (the attribute or property is omitted). Include the Embed Code button if you want users to be able to embed the Ask Data lens in other web pages. | ``, `TableauAskData` | | `show-pin` | `AskData.showPin` | boolean | Indicates whether the Ask Data lens Pin button is hidden or shown. By default, the Pin is hidden (the attribute or property is omitted). Include the Pin button if you want to enable users to pin a new query to the list of recommendations or replace a recommendation. | ``, `TableauAskData` | | `show-save` | `AskData.showSave` | boolean | Indicates whether the Ask Data lens Save button is hidden or shown. By default, the Save button is hidden (the attribute or property is omitted). Include the Save button if you want to allow users to save the Ask Data views as workbooks on Tableau. | ``, `TableauAskData` | | `show-share` | `AskData.showShare` | boolean | Indicates whether the Ask Data lens Share button is hidden or shown. By default, the Share button is hidden (the attribute or property is omitted). Include the Share button if you want to allow users to share the Ask Data vizes. | ``, `TableauAskData` | | `token` | `AskData.token` | JSON web token (JWT) | The JWT is used when the Ask Data lens is configured to use a connected app or for EAS on Tableau Server. Use the scope `tableau:ask_data:embed` when you generate the JWT. | ``, `TableauAskData` | **Note:** When adding properties to the `` component, use the HTML Property name. Use the JS Property names for the `TableauAskData` object. * * * You can also add custom parameters to the `` web components and `TableauAskData` objects. See [About custom parameters](/v0.0/api/embedding_api/en-us/docs/embedding_api_parameters.html#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](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html). 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 `` component or `TableauAskData` object. **Note:** When you embed Ask Data, and intend to share the Ask Data lens with a large number of people, it's a best practice for users to have Viewer permissions. If not, you might expose the Ask Data lens for editing by anyone who views the embedded Ask Data page. Be aware of the permissions of your intended users. Explorer and Creators have the capacity to edit lenses. It's also a good practice to limit access to Tableau content by restricting the connected app to a single project, and that the project should contain only content you are comfortable exposing through that connected app. For more information about connected apps, see [Use Tableau Connected Apps for Application Integration](https://help.tableau.com/current/online/en-us/connected_apps.htm). * * * ## What’s next - For information about creating Ask Data lenses, see [Automatically Build Views with Ask Data](https://help.tableau.com/current/pro/desktop/en-us/ask_data.htm). - For information about connected apps, see [Use Tableau Connected Apps for Application Integration](https://help.tableau.com/current/online/en-us/connected_apps.htm). #### On This Page