Embed a 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 an Embed Authorization Token and review Embedding Dashboard in view mode.
• 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 edit/design permissions to design dashboards.

Steps to Embed the Designer

• Install the Bold BI Embedded SDK (via NPM or CDN).
• Add a container <div> in your frontend where the AI Assistant will load.
• 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.

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