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

Further Reading & References