DEV Community

Cover image for Embed Analytics in a Blazor Application Using JavaScript
Bold BI by Syncfusion
Bold BI by Syncfusion

Posted on

Embed Analytics in a Blazor Application Using JavaScript

#embedanalyticsinblazor #embeddedanalyticsplatform #blazordashboardembedding
TL;DR:  Bold BI® lets you embed interactive dashboards in Blazor Server apps using the Bold BI JavaScript SDK and token-based embed authentication, so users can explore analytics without leaving your application.

Introduction

Users expect analytics to be available inside the tools they use every day, but building dashboard functionality from scratch is time-consuming and complex. Bold BI supports dashboard embedding in Blazor applications, enabling developers to quickly integrate interactive analytics via JavaScript embedding. In this guide, you will learn how to embed a Bold BI dashboard in a Blazor application using JavaScript Embedding.

Let’s get started.

Why Embed Dashboards in Blazor Applications?

Embedded analytics brings insights directly into the application experience and closes workflow gaps. When dashboards exist in separate tools, users switch between systems, which slows workflows and reduces efficiency. Key advantages include:

  • Unified user experience: Keeping dashboards within the application provides a seamless interface where users can access data without leaving their workflow.
  • Faster decision-making: Real-time access to analytics enables users to take immediate action based on up-to-date insights.
  • Centralized security control: Authentication and access can be managed within the application, ensuring consistent and secure data governance.
  • Higher user engagement: Embedding analytics into daily workflows encourages users to interact more frequently with dashboards and insights.
  • Scalability and flexibility: Embedded analytics makes it easier to extend insights across users, teams, and applications without rebuilding systems.

Next, let's walk through the process of integrating a Bold BI dashboard into a Blazor Server application.

How to Embed a Dashboard in a Blazor Application

The following steps demonstrate how to configure embedding, set up the required components, and render dashboards in a Blazor Server application using JavaScript embedding.

Prerequisites

Before you begin, ensure the following requirements are met:

Step 1: Set Up a Blazor Server App

Start by creating a new Blazor Server project.

Create a folder in your desired location and open it in Visual Studio Code. Open the terminal and run:

dotnet new blazorserver

This will serve as the application where your dashboard will be embedded.

Step 2: Enable Embedding in Bold BI

Next, prepare your dashboard for embedding:

  • Log in to your Bold BI instance
  • Select the dashboard you want to embed

[caption id="" align="alignnone" width="1913"]Select Dashboard

  • Go to Settings → Embed

[caption id="" align="alignnone" width="1903"]Setting

[caption id="" align="alignnone" width="1619"]Embed

  • Enable Embed Authentication

[caption id="" align="alignnone" width="1899"]Embed Authentication

  • Click Embed Configuration.
  • Download embedConfig.json file.

[caption id="" align="alignnone" width="1127"]Download
This file contains all the essential details needed to connect your app to Bold BI.

Step 3: Add the Configuration to Your Project

Place the downloaded embedConfig.json file in your Blazor project.

Your application will read this file to retrieve values such as:

  • Server URL
  • Dashboard ID
  • User email
  • Embed secret

EmbedConfig.json File

These are required to securely render the dashboard.

Step 4: Configure the Application

At this stage, your application needs to load the embedding configuration and make it available to the frontend.

To achieve this, you will:

  • Read the embedConfig.json file
  • Deserialize the configuration values
  • Pass them to the frontend using ViewBag

This prepares all required values for frontend use.

Step 5: Add the Dashboard Container

Open your Blazor page for example, Dashboard.razor and add a container along with the required Bold BI scripts and configuration variables to host and initialize the embedded dashboard:





<head>
<title>BoldBI Blazor Embed</title>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
<script type="text/javascript" src="~/js/Index.js"></script>
<link rel="stylesheet" href="~/css/site.css" />
<script type="text/javascript">
var rootUrl = "@ViewBag.ServerUrl";
var dashboardId = "@ViewBag.DashboardId";
var siteIdentifier = "@ViewBag.SiteIdentifier";
var environment = "@ViewBag.Environment";
var embedType = "@ViewBag.EmbedType";
var authorizationServerUrl = '@Url.Action("AuthorizationServer", "EmbedData")';
</script>
</head>

<body onload="renderDashboard(dashboardId)">
<div id="viewer-section" style="width: 100%;">
<div id="dashboard"></div>
</div>
</body>

Blazor Properties

Step 6: Add JavaScript Embedding Logic

Use the Bold BI JavaScript SDK to render the dashboard.

In your JavaScript file (e.g., wwwroot/js/BoldBI.js), configure:

  • Server URL
  • Site identifier
  • Dashboard ID
  • Embed token

window.boldbiEmbed = {
  renderDashboard: function () {
    const dashboard = BoldBI.create({
      serverUrl: window.rootUrl + "/" + window.siteIdentifier,
      dashboardId: window.dashboardId,
      embedContainerId: "dashboard",
      width: "100%",
      height: "100%",
      authorizationServer: { url: window.authorizationServerUrl }
    });

    dashboard.loadDashboard();
  }
};

Ensure these values match those in your configuration file.

Step 7: Run the Application

Now run your project:

dotnet restore
dotnet watch run

Step 8: Verify the Dashboard

If everything is configured correctly, you should see:

  • The dashboard will load inside your app.
  • Charts and widgets will be visible.
  • No authentication errors will appear.

At this point, your embedded analytics setup is complete.

[caption id="" align="alignnone" width="1674"]School performance dashboard
To learn more about implementation details and explore sample projects, refer to the official Bold BI guide for ''How to Embed a Bold BI Dashboard in a Blazor Server Application''.

Now that you’ve completed the embedding steps, let’s see how this implementation applies in a real-world scenario.

How Dashboard Embedding Works in a Blazor Server Application

The Blazor Server sample follows a sequence of configuration loading, secure token generation, token handling, and dashboard rendering.

How It Works

  • Blazor application requests a secure embed token.
  • Authorization API generates the request and signature.
  • Bold BI server validates the embed secret and request.
  • Bold BI server returns the embed token.
  • Authorization API returns the token to the Blazor application.
  • Blazor application uses the token with the Bold BI JavaScript SDK to render the dashboard.

[caption id="" align="alignnone" width="1536"]How Balzor Works]

To learn more, refer to the official Bold BI documentation on how the Blazor Server sample works.

Why Choose Bold BI for Dashboard Embedding?

Bold BI® is well suited for embedding analytics in Blazor applications, enabling secure and flexible integration into existing workflows. With token-based authentication, interactive dashboards, and scalable embedding options, it helps developers deliver seamless analytics experiences. With Bold BI, organizations can:

Whether you are building SaaS platforms, internal applications, or customer-facing portals, Bold BI provides a reliable way to integrate analytics into your application.

Ready to get started? Try embedding a dashboard in your Blazor Server application and see how Bold BI can bring interactive data insights directly into your workflows. For deeper guidance, start a free trial, explore the documentation, or request a demo to see how it fits your use case.

Frequently Asked Questions

  1. 1.

    Can I embed multiple dashboards in a Blazor Server application?

    Yes. You can embed multiple Bold BI dashboards in the same Blazor Server application by configuring separate dashboard instances.
  2. 2.

    How can I secure embedded dashboards for different users?

    Use authentication and role-based access control to ensure users only access the dashboards and data they are authorized to view.
  3. 3.

    Is authentication required for embedding?

    Yes. Authentication is recommended to protect embedded dashboards from unauthorized access.
  4. 4.

    Can I customize dashboard appearance?

    Yes. You can customize themes, colors, layouts, and other UI elements to match your application’s branding.
  5. 5.

    Does embedding dashboards affect application performance?

    Performance depends on dashboard complexity, data volume, and network conditions. With proper configuration, embedded dashboards can run efficiently in Blazor applications.
  6. 6.

    What are the prerequisites for embedding a Bold BI dashboard in Blazor?

    You need a Bold BI environment, a published dashboard, embedding enabled, required configuration values, and a Blazor application set up for integration.
  7. 7.

    How do I embed analytics in a Blazor Server application?

    Enable dashboard embedding, configure authentication, add the required settings, and render the dashboard using JavaScript interop.

Top comments (0)