Embed a Data source using an Embed Token

Embedding data source enables your users to create and modify data source directly within your application.

Prerequisites

Before you begin, ensure the following:

  • You have learned how to generate an Embed Authorization Token.
  • The Embed Token must always be generated on the backend server side. The embedSecret is highly sensitive and should never be exposed in frontend code, browsers, or client applications.

Key Considerations

  • The user has the required create/edit permissions to manage data sources.
  • Set the mode property to:
    • BoldBI.Mode.DataSource – to edit an existing data source.
    • BoldBI.Mode.Connection – to create a new data source connection.
  • Call the loadDatasource() method to render the data source.

Steps to Embed the Data source

  • Install the Bold BI Embedded SDK (via NPM or CDN)
  • Add a container <div> in your frontend where the data source will load.

Embed an Existing Data Source

To edit an existing data source, set the mode to DataSource and call the loadDatasource() method. Ensure the embedded user has permission to edit data sources.

<body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "<Bold BI Server URL>",
                datasourceId: "<DataSource Id>",
                embedContainerId: "<Embed Container Id>", 
                mode: BoldBI.Mode.DataSource, 
                embedToken: "<Embed token generated from backend server>"
            });
            boldbiEmbedInstance.loadDatasource();
        }
    </script>
</body>

Create a New Data Source in Embedding

To create a new data source, set the mode to Connection and call the loadDatasource() method. Ensure the embedded user has permission to create new data sources.

<body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
               serverUrl: "<Bold BI Server URL>",
                embedContainerId: "<Embed Container Id>", 
                mode: BoldBI.Mode.Connection, 
                embedToken: "<Embed token generated from backend server>"
            });
            boldbiEmbedInstance.loadDatasource(); 
        }
    </script>
</body>

Supported Authentication

Note: For more information on data source members, methods, and events, refer to this link.