Documentation
Demos
Support
Blog
Try it Free
Search results

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).

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/v14.2.4/boldbi-embed.js"></script>

Embed the Bold BI Dashboard

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

  2. 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.

<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 => response.json())
            .then(data => {
                try {
                    return data.access_token;
                } catch (err) {
                    console.warn("Response is not valid JSON. Using raw string.");
                    throw err;
                }
            });
        }
    </script>
</body>

How to achieve RLS below Bold BI v13

Note: We enhanced a newer approach to RLS in the token generation from the Bold BI version 14.1 using the 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

Node

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;
});

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.

Node

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;
});

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')"}]'
Previous
Next