Documentation
Demos
Support
Blog
Try it Free
Search results

Embed a New Dashboard Designer Using an Embed Token

This enables you to create dashboards directly within your application, offering an integrated and collaborative experience.

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.

Note: You can reuse the Embed Token generated for dashboard embedding case. Due to a current limitation, Embed Tokens are generated using a dashboardId but are not dashboard-specific; they are user-specific. This limitation will be addressed in a future release.

Key Considerations

  • Set the mode property to BoldBI.Mode.Design in your frontend configuration.
  • Call the loadDesigner() method to render the new Dashboard Designer.
  • Ensure the user has the required create permissions to design dashboards.

Steps to Embed the New Dashboard Designer

  • Install the Bold BI Embedded SDK (via NPM or CDN).
  • Add a container <div> in your frontend where the new Dashboard Designer will load.
  <body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "<Bold BI Server URL>",
                mode:Bold.Mode.Design,
                embedContainerId: "<Embed Container Id>", 
                embedToken: "<Embed token generated from backend server>"
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>

Supported Authentication

Note: For more information on designer members, methods, and events, refer to this link

Previous
Next