Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed a Dashboard using an Embed token

Once an embed authorization token has been generated on the 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/v13.1.10/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>
Previous
Next