Embedding Dashboards in Bold BI

Embed interactive Bold BI dashboards into your applications, portals, or SaaS platforms. This guide explains the embedding methods available and how to implement them using best practices.

Why Embed Dashboards?

Embedding dashboards into your application allows you to:

• Deliver real-time insights directly within your app interface.
• Maintain a seamless, branded experience.
• Empower users to make contextual, data-driven decisions.
• Eliminate the need to switch between multiple platforms.

Embedding Methods in Bold BI

Bold BI offers two primary methods for embedding dashboards.

1. JavaScript SDK

The JavaScript SDK provides:

• Full programmatic control over embedding.
• Ideal for interactive and dynamic dashboards.
• Supports event handling, theming, and dynamic filtering.
• Best suited for developers and SaaS platforms.

Example

BoldBI.create({
  serverUrl: "<Bold BI Server URL>",
  dashboardId: "<Dashboard ID>",
  embedContainerId: "<Embed Container ID>", // Div ID where the dashboard renders
  embedToken: "<Embed token generated from the backend server>"
});

2. iFrame embedding

iFrame embedding is:

• Quick and easy to set up with minimal code.
• Best for static dashboards or internal portals.
• Can embed the entire Bold BI portal (Full Server embedding), including dashboards, the designer, and data sources.

<iframe src="http://localhost:51777/bi/site/site1/dashboards/9e940aa3-8061-4576-9286-c81e4fdcc4c2/Embed/testembed?isembed=true"
        id="dashboard-frame"
        width="100%"
        height="100%"
        allowfullscreen
        frameborder="0">
</iframe>

Feature Comparison Between JavaScript SDK vs iFrame Embedding

Key Benefits

• Authenticate users from your existing system.
• Generate time-limited tokens with scoped permissions.
• Control access at the user or tenant level.
• Enable multi-tenant SaaS embedding using token claims.