Web Component embedding

Toucan AI provides a standards-based web component for embedding dashboards and charts directly into your application. This method is framework-agnostic and requires only a small script and a custom HTML element.

How It Works

• Loader Script: Include the web component loader script in your HTML:

  <script type="module" src="https://toucanai.cloud/embed/embed.js"></script>

• Custom Element: Use the <tc-dashboard> or <tc-chart> custom element in your markup:

  • dashboard-id or chart-id: The resource to embed

  • auth-token: The secure embed token (JWT)

  • server-url: API endpoint for your instance

  • data-theme: (optional) “light” or “dark”

  <tc-dashboard
      dashboard-id="your-dashboard-id"
      auth-token="your-embed-token"
      server-url="https://toucanai.cloud/api"
      data-theme="light"
      style="width: 100%; height: 600px;"
    ></tc-dashboard>

• No Framework Lock-in: Works in any web stack (React, Vue, Angular, plain HTML, etc.)—no SDK required.

Key Features

• Simple Integration: Just add a script and a tag—no build steps or dependencies.

• Secure: Uses short-lived, server-generated embed tokens for access control.

• Customizable: Supports theming and sizing via attributes and CSS.

• Supports Both Dashboards and Charts: Use <tc-dashboard> for dashboards, <tc-chart> for individual charts.

When to Use

• You want the fastest, most portable way to embed analytics.

• You don’t want to couple your app to a specific SDK or API.

• You need to support multiple frameworks or static sites.

Limitations

• Advanced interactivity or deep integration may require the API or SDK-based methods.

• All authentication is handled via the embed token; no user session sharing.