> For the complete documentation index, see [llms.txt](https://docs.toucanai.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.toucanai.cloud/embed/embedding-overview/how-to/embed-a-dashboard.md).

# Embed a dashboard

{% hint style="info" %}
**Target Audience**: Developers
{% endhint %}

### Goal

Render a specific Toucan AI dashboard within an external web page using a `<tc-dashboard>` web component.

***

### Prerequisites

* A [dashboard created](/build/dashboards-and-layouts/how-to/create-a-dashboard-with-ai.md) and saved in the Library.
* A [valid authentication token](/embed/authentication/how-to/authentication-and-tokens.md).
* Access to your application's source code or a web-based code editor (e.g., CodePen).

***

### Steps

#### 1. Locate the dashboard

* Navigate to the **Library** tab of Toucan AI.
* In the page click on **Dashboards**.
* Select the specific dashboard you intend to embed.

#### 2. Retrieve the embed code

* Click the **three dots** icon in the top-right corner of the dashboard view.
* Select **Embed** from the dropdown menu.
* Copy the provided HTML snippet containing the web component (e.g., `<tc-dashboard ...></tc-dashboard>`).

#### 3. Implement in your application

* Open your code editor and paste the copied snippet into your HTML file.

#### 4. Authorize the component

* Initially, the component may display a "Failed to load dashboard" error; this indicates that no valid token is present.
* Locate the `auth-token` attribute within the pasted tag.
* Replace the placeholder text with your valid authentication token.

{% hint style="info" %}
**Note**: In a production environment, the `auth-token` must be dynamically injected via a variable received from your backend's API call to Toucan AI.
{% endhint %}

#### 5. Verify the integration

* Save your changes and refresh the application.
* Confirm that the dashboard renders correctly and that interactive elements are functional.

<figure><img src="/files/UVao7Xuw0csPbJnmDSah" alt=""><figcaption></figcaption></figure>

***

### Conclusion

The dashboard is now successfully embedded and authorized. From here, you can apply custom CSS to match your application's branding or implement Row-Level Security (RLS) to restrict data access based on user attributes.

**Suggested Next Steps**: [How-to: Configure Row-level Security (RLS)](/embed/permissions-and-row-level-security/how-to/apply-rls-to-your-database.md)