Embed a dashboard

Target Audience: Developers

Goal

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

---

Prerequisites

• A dashboard created and saved in the Library.

• A valid authentication token.

• 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.

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.

5. Verify the integration

• Save your changes and refresh the application.

• Confirm that the dashboard renders correctly and that interactive elements are functional.

---

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)