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.

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