Embedding Dashboards in Bold BI

Seamlessly 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 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 in another word FullServer Embedding(including dashboards, designer, and data sources).

Example

 <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

Feature	JavaScript SDK	iFrame Embedding
Customization	High – full API control (layout, filters, events)	Limited – appearance and theme only
Interactivity	Full – Supports events and dynamic filters	Limited
Ease of Use	Moderate – requires coding	Very Easy – embed URL only
Token based Security	Supported	Supported (via URL or embed secret)
Event Handling	Supported	Not supported
Ideal For	SaaS, developers teams	Internal tools, portals, blogs

Deployment Options

Bold BI supports both cloud and enterprise deployment models, with full embedding support:

Deployment Model	Description
Cloud(Hosted)	Managed by Syncfusion. Best for teams needing a quick, fully managed setup.
Enterprise(Self-hosted)	Deploy on your infrastructure. Best for maximum control, security, and custom integrations.

Authentication & Security

Bold BI uses token-based authentication to secure embedded dashboards:

Key Benefits

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

Common Use Cases

Scenario	Recommended Method
Internal analytics for teams	iFrame or JavaScript SDK (based on interactivity needs)
SaaS app with per-user or per-tenant views	JavaScript SDK
Public dashboards or blogs	iFrame Embedding
Interactive dashboards with filters/events	JavaScript SDK
Full admin portal embedding	iFrame Embedding