Embed a dashboard

Embedding dashboards and charts from Toucan AI lets you deliver interactive analytics directly in your product, with secure, flexible integration.

Objective

In this tutorial, you will learn how to embed a dashboard or a chart from Toucan AI into a webpage to try the embedding. We will guide you through the process of obtaining the embed code and using it to display the dashboard.

Prerequisites

• A dashboard or chart created in Toucan AI that you want to embed.

• A valid API token (refer to previous tutorials on how to generate a token).

Steps

1. Access the Dashboard

• Go to the Home Page of Toucan AI.

• In the main menu, click on Dashboard.

• Select the dashboard you want to embed.

  • For example, click on the HR Dashboard.

2. Open the Embed Options

• Once inside the dashboard, look to the top-right corner of the screen.

• You will see three small dots; click on them to open the options menu.

• From the options, select Embed.

• A window will open displaying the embed code.

3. Copy the Embed Code

• Copy the web component code that appears in the embed window.

4. Use the Embed Code in Your Web Application

• Open your preferred code editor. For this example, we will use Codepen (you can use any HTML editor).

• In the HTML section of your editor, paste the copied embed code.

5. Handle the "Failed to Load" Message

• At this point, you may see a "Failed to load dashboard" error in the preview pane. This is normal because the dashboard requires a valid token to be displayed.

• In the embed code, locate the tag that contains the Dashboard. You will see a placeholder for the Auth-Token.

6. Add a Valid Token

• Copy a valid token (as explained in the previous tutorial on generating a token) to test

  • If you are in your own SaaS or Website, you can set up your token variable here

• Paste the valid token in place of the Auth-Token in the embed code.

  • Ensure that the token is still valid and hasn’t expired.

  • Of course, if you are in Production, in your SaaS ou Website, this Token will come from a variable from the API call (generate token).

7. Verify the Dashboard Display

• After pasting the token, the dashboard should now load in the preview pane on the right side of your editor.

8. Finalize and Deploy

• Congratulations! You have successfully embedded your dashboard into a web application.

• Now, you can proceed to deploy it to your production environment.

Conclusion

You’ve successfully embedded a dashboard from Toucan AI into your web interface. This dashboard is now ready to be used in your live environment.

Suggested Next Steps: for dashboard with Row Level Security (RLS) see this doc!