Embed a Dashboard Designer using an Embed Token

This section explains how to embed the Bold BI Dashboard Designer using an embed token. Embedding the designer enables your users to create and modify dashboards directly within your application.

Prerequisites

• First learn how to generate Embed Authorization Token and review Embedding Dashboard in view mode.
• Ensure the user has edit/design permissions for the dashboards and related data sources.

Key Considerations

• Set the mode property to `BoldBI.Mode.Design` in your frontend configuration.
• Call the `loadDesigner()` method to render the dashboard in designer mode.
• The embed token must always be generated on the server. The `embedSecret` is highly sensitive and should never be exposed in frontend code, client apps, or browsers.

Steps to Embed the Designer

1. Install the Bold BI Embedded SDK (via NPM or CDN)

2. Generate an embed token on the server side.

3. Add a container <div> in your frontend where the designer will load.

4. Create a Bold BI instance with the required properties and call loadDesigner().

   <div id="dashboard_container_id"></div>
   <script>
       var boldbiEmbedInstance = BoldBI.create({
           serverUrl: "<Bold BI Server URL>",
           dashboardId: "<Dashboard Id>",
           mode: BoldBI.Mode.Design, // Sets designer mode
           embedContainerId: "<Embed Container Id>", // Div ID where dashboard will render
           embedToken: "<Embed token retrieved from backend>"
       });
       boldbiEmbedInstance.loadDesigner();  
   </script>

   Note: The same embed token can be used for both the dashboard view and the designer.

   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 in designer mode.
   mode	enum	Set to BoldBI.Mode.Design to load the dashboard designer.
   embedContainerId	string	ID of the element where the designer will render.
   embedToken	string	Embed token generated from your backend server.

Note: For advanced designer options (methods, events, theming), refer to the Designer Component Reference.