# Add a Tableau Next Component to Your Web App

## Embed the Tableau Next Component

Copy the generated Tableau Next component code you copied from Tableau Next into your web app. This required code includes

- A container for the component: use the container for component sizing and responsiveness
- The SDK configuration: this defines the auth credential and the Salesforce org URL
- The import of the SDK: integrates the SDK into the web app
- The `initializeAnalyticsSdk` call: initializes the SDK with the configuration.
- The Tableau Next component constructor: creates the Tableau Next component, using the ID or API name. Each component provides programmatic interactivity, like event handling and data filtering. - `AnalyticsDashboard`: embeds a Tableau Next dashboard - `AnalyticsMetric`: embeds a Tableau Next metric - `AnalyticsVisualization`: embeds a Tableau Next visualization
- The component `render` call: renders the component in the container

### Generated Code Example for an AnalyticDashboard component

```html
<div id="analytics-container"></div>
<script type="module">
  const config = {
    authCredential: "AUTH_CREDENTIAL",
    orgUrl: "https://my-domain.lightning.pc-rnd.force.com",
  };
  import {
    initializeAnalyticsSdk,
    AnalyticsDashboard,
  } from "@salesforce/analytics-embedding-sdk";
  await initializeAnalyticsSdk(config);
  const dashboard = new AnalyticsDashboard({
    parentIdOrElement: "analytics-container",
    idOrApiName: "Dashboard1",
  });
  dashboard.render();
</script>
```

## Hook the Tableau Next Component To Your Web App

After you copy the generated code, you need to replace the generalized values with values specific to your web app.

The `AUTH_CREDENTIAL` value is the generated Frontdoor URL.

The `SDK_SOURCE` value is the location of the installed SDK for your web app.

If you don't use the generated code snippet from Tableau Next, you must add the `orgUrl` value, pointing to your Salesforce org. The `orgUrl` must
be the Lightning URL, `https://yourorg.lightning.force.com`, not the `my.salesforce.com` domain URL.

If you don't use the generated code snippet from Tableau Next, you'll need to add the `orgUrl`, pointing to your Salesforce org.

## Finding the Component ID

For embedding, you need the component ID. If you use the generated component code snippet, the component ID is provided for you.

You can also find the ID using the component URL from Salesforce. In Tableau Next, view the asset you want to embed. When viewing the asset, the URL for the asset provides the asset API name.

**Example: Dashboard URL**
`https://<salesforce.org>.force.com/tableau/dashboard/<asset-api-name>/view`.

**Example: Visualization URL**
`https://<salesforce.org>.force.com/tableau/visualization/<asset-api-name>/view`.

**Example: Metric URL**
`https://<salesforce.org>.force.com/tableau/exploreMetric/<asset-api-name>?{metricParameters}`.

The `asset-api-name` is used for embedding as the `idOrApiName` value in the component constructor. You can use the component API name or the ID.

For an example of loading a custom view for dashboard, see [Embed a Custom Dashboard View](/docs/analytics/sdk/guide/sdk-use-cases.md#embed_a_custom_dashboard_view).

## Authentication Redirect Flows

In multiple org scenarios, each org can complete initialization with a different outcome. In a single org scenarios,
the same redirect handling applies for the single org. If an org requires additional
authentication, like a multi-factor authentication (MFA) challenge or password reset, the `initializeAnalyticSdk` method can return a non-success state
for that org with redirect metadata in `orgStates`:

- `state`: `AUTH_REDIRECT`
- `redirectUrl`: org provided relative redirect path
- `redirectOrigin`: org provided origin

For each org in `AUTH_REDIRECT`, open `${redirectOrigin}${redirectUrl}` in a popup window or tab, and complete
the required authentication step. Then call `retryOrAddOrgs()` for the affected org(s) to resume initialization.

Retry parameter patterns:

- Standard retry: use a fresh Frontdoor URL/session credential
  `{ orgUrl, authCredential: "<frontdoor url>" }`
- MFA or password-reset resumed session: use the org URL as credential
  `{ orgUrl, authCredential: orgUrl }`

When the MFA or password-reset completes and a new session is established, you can retry with
`authCredential: orgUrl` without regenerating the Frontdoor URL. If the retry fails, regenerate
Frontdoor URL and retry.

**See Also**

- [`initializeAnalyticsSdk`](/docs/analytics/sdk/references/sdk-js-v2/initializeAnalyticsSdk.md)
- [`AnalyticsDashboard`](/docs/analytics/sdk/references/sdk-js-v2/AnalyticsDashboard.md)
- [`AnalyticsFilter`](/docs/analytics/sdk/references/sdk-js-v2/AnalyticsFilter.md)
- [`AnalyticsMetric`](/docs/analytics/sdk/references/sdk-js-v2/AnalyticsMetric.md)
- [`AnalyticsVisualization`](/docs/analytics/sdk/references/sdk-js-v2/AnalyticsVisualization.md)