Embed a Dashboard using an Embed token

Once an embed authorization token has been generated on the backend server side, use it on the frontend to securely render a Bold BI dashboard.

Install the Bold BI Embedded SDK

You can install the Bold BI Embedded SDK in two ways:

Using NPM

To install the SDK, use the npm package manager by executing the command below in your command-line interface. Using npm is advised as it allows convenient access to the latest SDK updates when they are released.

npm install --save @boldbi/boldbi-embedded-sdk

Then, import the SDK into your application:

import {BoldBI} from '@boldbi/boldbi-embedded-sdk';

Note: The SDK uses ES6 syntax and provides BoldBI as a named export (not a default export).

Using a CDN link

If your application does not use npm or a package manager, include the minified SDK via CDN:

<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v15.2.6/boldbi-embed.js"></script>

Embed the Bold BI Dashboard

Add a container <div> with a unique ID where the dashboard will be rendered.

Use the embed SDK to create a Bold BI instance with your server details, dashboard ID, and the embed token retrieved from your backend.

<div id="dashboard_container_id"></div>
<script>
    var boldbiEmbedInstance = BoldBI.create({
        serverUrl: "<Bold BI Server URL>",
        dashboardId: "<Dashboard Id>",
        embedContainerId: "<Embed Container Id>", // Div ID where dashboard will render
        embedToken: "<Embed token generated from backend server>"
    });
    boldbiEmbedInstance.loadDashboard();
</script>

Property	Type	Description
serverUrl	string	Your Bold BI Server URL (e.g., https://localhost:[portno]/bi/site/site1)
dashboardId	string	Unique ID of the dashboard to embed.
embedContainerId	string	ID of the div where the dashboard will be rendered.
embedToken	string	Embed token generated from your backend server.

Note: For advanced configuration (methods, events, theming), see the Dashboard Component Reference.

How to Get and Use an Embed Token

Here is a simple example of how to get the access token from the server-side /tokenGeneration API call and use it in our BoldBI.create method.

index.html

HTML
Angular
React
Vue

  
<body onload="embedDashboard();">
    <div id="dashboard_container_id"></div>
    <script>
        function embedDashboard() {
            getEmbedToken().then(accessToken => {
                var boldbiEmbedInstance = BoldBI.create({
                    serverUrl: "<Bold BI Server URL>",
                    dashboardId: "<Dashboard Id>",
                    embedContainerId: "dashboard_container_id",
                    embedToken: accessToken
                });
                boldbiEmbedInstance.loadDashboard();
            }).catch(error => {
                console.error("Failed to get embed token:", error);
            });
        }
        function getEmbedToken() {
            return fetch('/tokenGeneration', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => {
                if (!response.ok) throw new Error("Token fetch failed");
                return response.text();
            });
        }
    </script>
</body>

  
import { OnInit } from '@angular/core';

export class Dashboard implements OnInit {
    ngOnInit() { 
        this.renderDashboard();
    }

    getEmbedToken() {
        return fetch('/tokenGeneration', {
          method: 'POST',
          headers: { 
              'Content-Type': 'application/json' 
          },
          body: JSON.stringify({})
        })
        .then(response => {
          if (!response.ok) throw new Error("Token fetch failed");
          return response.text();
        });
    }

    renderDashboard() {
        this.getEmbedToken()
          .then(accessToken => {
            const dashboard = BoldBI.create({
              serverUrl: "<Bold BI Server URL>",
              dashboardId: "<Dashboard Id>",
              embedContainerId: "dashboard_container_id",
              embedToken: accessToken
            });

            dashboard.loadDashboard();
          })
          .catch(err => {
            console.error("Error rendering dashboard:", err);
          });
    };
}

  
import React from 'react';

class Dashboard extends React.Component {
    getEmbedToken() {
        return fetch('/tokenGeneration', {
          method: 'POST',
          headers: { 
              'Content-Type': 'application/json' 
          },
          body: JSON.stringify({})
        })
        .then(response => {
          if (!response.ok) throw new Error("Token fetch failed");
          return response.text();
        });
    }

    renderDashboard() {
        this.getEmbedToken()
          .then(accessToken => {
            const dashboard = BoldBI.create({
              serverUrl: "<Bold BI Server URL>",
              dashboardId: "<Dashboard Id>",
              embedContainerId: "dashboard_container_id",
              embedToken: accessToken
            });

            dashboard.loadDashboard();
          })
          .catch(err => {
            console.error("Error rendering dashboard:", err);
          });
    };

    render() {
        return (
            <div id="dashboard_container_id"></div>
        );
    }

    componentDidMount() {
       this.renderDashboard();
    }
}

  
export default ({
  name: 'App',
  async mounted() {
     function getEmbedToken() {
      return fetch(tokenGenerationUrl, {  // Backend application URL
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
      })
      .then(response => {
        if (!response.ok) throw new Error("Token fetch failed");
        return response.text();
      });
  }

  function renderDashboard(data) {
    getEmbedToken()
      .then(accessToken => {
        const dashboard = BoldBI.create({
          serverUrl: data.ServerUrl + "/" + data.SiteIdentifier,
          dashboardId: data.DashboardId,
          embedContainerId: "dashboard",
          embedToken: accessToken
        });

        dashboard.loadDashboard();
      })
      .catch(err => {
        console.error("Error rendering dashboard:", err);
      });
    }
  }
});

How to achieve RLS below Bold BI v13

Note: We enhanced a newer approach of RLS in the token generation using object model structure. Please refer to this link.

Note: Only the filter details need to be added in the existing query string concatenation. These are the common required details needed to generate a token: serverUrl, siteIdentifier, userEmail, dashboardId, and embedSecret, which you can refer to in the Generate Embed Token (below v13) page.

Data Filter

tokengeneration.js

Node.js
.NET
PHP

  
app.post('/tokenGeneration', function (req, res) {
  // Define row-level filter
  const filter = "[{shipCountry=India}]";
  
  // Build query string
  let queryString = "embed_nonce=" + crypto.randomUUID();
  queryString += "&embed_dashboard_id=" + dashboardId;
  queryString += "&embed_user_email=" + userEmail;

  // Add filter
  queryString += "&embed_datasource_filter=" + filter;
});

  
[HttpPost]
[Route("TokenGeneration")]
public string TokenGeneration()
{
  // Define row-level filter
  var filter = "[{shipCountry=India}]";
  
  // Build query string
  var queryString = "embed_nonce=" + Guid.NewGuid().ToString();
  queryString += "&embed_dashboard_id=" + dashboardId;
  queryString += "&embed_user_email=" + userEmail;

  // Add filter
  queryString += "&embed_datasource_filter=" + filter;
}

  
<?php
echo getToken();

function getToken() {
  // Define row-level filter
  $filter = "[{shipCountry=India}]";
  
  // Build query string
  $embedQuerString = "embed_nonce=" . generate_uuid_v4();
  $embedQuerString = $embedQuerString . "&embed_dashboard_id=" . $dashboardId;
  $embedQuerString = $embedQuerString . "&embed_user_email=" . $userEmail;

  // Add filter
  $embedQuerString = $embedQuerString . "&embed_datasource_filter=" . $filter;
}

Filter Syntax Examples

Scenario	Query
Single Filter	`&embed_datasource_filter=[{&Param=Value}]`
Multiple Filters	`&embed_datasource_filter=[{&Param1=Value1&Param2=Value2}]`
List Format (IN)	`&embed_datasource_filter=[{&Param=IN(Value1,Value2)}]`

Note: Filters must be enclosed in [] square brackets and {} curly braces. You can also achieve RLS for custom columns using dashboard parameters.

Custom Attribute

Custom Attributes are name–value pairs that can be defined at the user, group, or site level. It can be enforced by passing an embed_custom_attribute attribute in the embed token. They allow dashboards to dynamically adjust queries, expressions, or data source connections to enforce RLS.

tokengeneration.js

Node.js
.NET
PHP

  
app.post('/tokenGeneration', function (req, res) {
    // Define custom attribute
    const customAttribute = '[{"database_name":"DB2"}]';

    let queryString = "embed_nonce=" + crypto.randomUUID();
    queryString += "&embed_dashboard_id=" + dashboardId;
    queryString += "&embed_user_email=" + userEmail;

    // Add custom attribute
    queryString += "&embed_custom_attribute=" + customAttribute;
});

  
[HttpPost]
[Route("TokenGeneration")]
public string TokenGeneration()
{
  // Define custom attribute
  var customAttribute = '[{"database_name":"DB2"}]';
  
  // Build query string
  var queryString = "embed_nonce=" + Guid.NewGuid().ToString();
  queryString += "&embed_dashboard_id=" + dashboardId;
  queryString += "&embed_user_email=" + userEmail;

  // Add custom attribute
  queryString += "&embed_custom_attribute=" + customAttribute;
}

  
<?php
echo getToken();

function getToken() {
  // Define custom attribute
  $customAttribute = '[{"database_name":"DB2"}]';
  
  // Build query string
  $embedQuerString = "embed_nonce=" . generate_uuid_v4();
  $embedQuerString = $embedQuerString . "&embed_dashboard_id=" . $dashboardId;
  $embedQuerString = $embedQuerString . "&embed_user_email=" . $userEmail;

  // Add custom attribute
  $embedQuerString = $embedQuerString . "&embed_custom_attribute=" . $customAttribute;
}

Examples:Custom Attribute Syntax

Scenario	Syntax	Example
Single Attribute	`[{"Attribute_Name":"Value"}]`	`&embed_custom_attribute='[{"database_name":"DB1"}]'`
Multiple Attributes	`[{"Attr1":"Value1","Attr2":"Value2"}]`	`&embed_custom_attribute='[{"department":"IT","name":"David"}]'`
List Format (IN)	`[{"Attribute_Name":"IN('Value1','Value2')"}]`	`&embed_custom_attribute='[{"department":"IN('CSE','EEE')"}]'`