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.
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-tokenattribute 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)
Last updated
Was this helpful?