Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed Authentication for the Pinboard Embedding

This section explains how to embed the Bold BI Designer Dashboard using Authorization Server Authentication.

How to embed Bold BI Pinboard using Javascript

To embed the Pinboard securely in your application, you can use the JavaScript SDK along with an authorization server. This method ensures that only authenticated users can access and interact with the embedded datasource.

  1. Include the Bold BI Embed SDK in the <head> tag of your HTML page.

  2. Create a <div> element in the <body> tag with a unique ID to serve as the dashboard container.

    <head>
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v12.1.5/boldbi-embed.js"></script>
</head>
<body>
    <div id="dashboard_container"></div>
</body>

  3. In the body tag, define functions to create a BoldBI instance, then call the initialization function using the onload attribute. This ensures secure dashboard loading with user-specific access.

    Use the following example to embed a pinboard using its name

      <body onload="embedSample();">
    <div id="dashboard_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                pinboardName:"Pinboard",
                embedContainerId: "dashboard_container",// This should be the container id where you want to embed the dashboard
                authorizationServer:{
                    url:"your-authorization-server-url"
                }
            });
            boldbiEmbedInstance.loadPinboard();
        }
    </script>
</body>

Supported Authentication

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

Previous
Next