> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.toucanai.cloud/embed/embedding-overview/how-to/embed-a-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.