Embed a Dashboard using an Embed token

Once an embed authorization token has been generated on the server side, utilize it on the frontend to render a dashboard.

Install the Bold BI Embedded SDK

You can install the Bold BI Embedded SDK in the 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 i -save @boldbi/boldbi-embedded-sdk

Then, import the SDK into your application:

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

Note: The SDK uses ECMAScript 6 syntax and exports BoldBI as a named (non-default) export.

Using a CDN link

If your application does not rely on npm or a comparable JavaScript package manager, you may include our minified JavaScript file in any HTML document by utilizing the code provided below:

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

Embed the Bold BI Dashboard

In this step, we will utilize the Embed token generated on the server side to securely integrate a dashboard into your frontend application using the embed SDK.

Insert a div element with a distinct ID to act as the dashboard container. Then initialize the Bold BI instance and invoke it. This approach guarantees secure dashboard loading tailored to individual user access.

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

Note: For more features on the dashboard with additional members, methods, and events, refer to the Dashboard Component Reference.