How to embed the dashboards in WordPress site using JavaScript Embedding?

Bold BI allows you to embed dashboards into your WordPress site. This article will walk you through the steps to Embed the dashboard using JavaScript embedding.

Steps to Embed a Dashboard in WordPress

1. Log in to your WordPress admin account. Navigate to the Theme File Editor from the Tools option and open the function.php file. Include the provided code snippet in the function.php file. Replace the $secretCode and $userEmail with your own Bold BI details.

   • UserEmail - UserEmail of the Admin in your Bold BI, which will be used to get the dashboards.
   • secretCode - Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the administration page.

<?php
$secretCode = "tKRSN9iOP2lTqu52FZP4BqD8csRJWSQH"; // Use your SecretCode here 
$userEmail = "admin@admin.com"; // Email address of the user
$serverTimeStamp=time();
function custom_api_route() {
    register_rest_route('custom/v1', '/example', array(
        'methods' => 'POST',
        'callback' => 'custom_callback_function',
    ));
}

function custom_callback_function($request) {
    // Get the request data
    $params = $request->get_json_params();

    // Check if the required parameters exist
    if (isset($params['embedQuerString']) && isset($params['dashboardServerApiUrl'])) {
        // Retrieve the parameters
        $param1 = $params['embedQuerString'];
        $param2 = $params['dashboardServerApiUrl'];

        // Perform your processing here
        $result = GetEmbedDetails($param1, $param2);

        // Return the result as a JSON response
        return rest_ensure_response($result);
    } else {
        // If the required parameters are not provided, return an error response
        return new WP_Error('missing_parameters', 'Required parameters (param1 and param2) are missing from the request body.', array('status' => 400));
    }
}

// This function used to get dashboard details from Bold BI Server 
function GetEmbedDetails($embedQuerString, $dashboardServerApiUrl){
  global $userEmail;
  global $serverTimeStamp;
  $embedQuerString = $embedQuerString . "&embed_user_email=" . $userEmail;
  $embedQuerString = $embedQuerString . "&embed_server_timestamp=" . $serverTimeStamp;
  $embedSignature = "&embed_signature=" . getSignatureUrl($embedQuerString);
//echo $embedSignature;
  $embedDetailsUrl = "/embed/authorize?" . $embedQuerString . $embedSignature;
	//echo   $dashboardServerApiUrl . $embedDetailsUrl;
  $curl = curl_init();
  curl_setopt_array($curl, array(
     CURLOPT_URL => $dashboardServerApiUrl . $embedDetailsUrl,
    //CURLOPT_URL => "http://localhost:51778/bi/api/site/site1" . $embedDetailsUrl,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 50000,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => array(
      "Content-Type: application/json"
    ),
  ));
  $response = curl_exec($curl);
  $err = curl_error($curl);
  curl_close($curl);

  return $response;
}

//// Prepare embed_Signature by encrypting with secretCode ////
function getSignatureUrl($embedQuerString) {
  global $secretCode; 
  $keyBytes = utf8_encode($secretCode);            
  $messageBytes = utf8_encode($embedQuerString);
  $hashMessage = hash_hmac('sha256',$messageBytes, $keyBytes, true);
  $signature = base64_encode($hashMessage);
  return $signature;
}
add_action('rest_api_init', 'custom_api_route');

2. The function.php file contains a custom API that communicates with the Bold BI server to receive dashboard details. The Authorization server URL in the HTML file points to this PHP file API endpoint.

3. Navigate to the Plugins option in the WordPress left panel. Click on Add New and search for WPCode. Install and activate the plugin.

   
   

4. Once the WPCode plugin is activated, you can add a custom snippet. Navigate to the code snippets option in the left panel and click on Add custom snippet.

   

5. Add the provided HTML code snippet in the custom snippet section. Replace the server details with your own Bold BI server details. Save the snippet and activate it. Scroll down, switch to the Shortcode and copy the code.

<html>
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.12.12/boldbi-embed.js"></script>
</head>
<body onload="embedSample();">
<div id="dashboard_container" style="width:1500px;height:700px">
   <div id="dashboard" style="float:left;"></div>
</div>
    <script>
		var rootUrl="http://localhost:53623/bi";
		var siteIdetifier ="site/site1";
		var dashboardId = "2e13f3e4-2ab4-4e98-a9f2-52b2dcaf50dd";
		var authorizationServerUrl = 'https://localhost/website2/wp-json/custom/v1/example';
		
        function embedSample() {
            var dashboardemb = BoldBI.create({
                serverUrl: rootUrl+"/"+siteIdetifier,
                dashboardId: dashboardId,
                embedContainerId: "dashboard",// This should be the container id where you want to embed the widget1
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                height: "100%",
                width: "100%",
                authorizationServer: {
                    url: authorizationServerUrl
                },
                expirationTime: "100000",
            });
            dashboardemb.loadDashboard();
        }
    </script>
</body>
</html>

6. Navigate to the Pages option in the left panel and click on Add New. Name the page and paste the shortcode copied from the HTML page. Publish the page to view the embedded dashboard.

References

• JavaScript Embedding
• Samples in different platforms

Please note: This article assumes you have a working knowledge of WordPress and Bold BI. If you need further assistance, please contact Bold BI support.