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
-
Log in to your WordPress admin account. Navigate to the
Theme File Editor
from theTools
option and open thefunction.php
file. Include the provided code snippet in thefunction.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');
-
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. -
Navigate to the Plugins option in the WordPress left panel. Click on
Add New
and search forWPCode
. Install and activate the plugin. -
Once the WPCode plugin is activated, you can add a custom snippet. Navigate to the
code snippets
option in the left panel and click onAdd custom snippet
. -
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.
RootUrl | Dashboard Server URL (Eg: http://localhost:5000/bi, http://demo.Bold BI®.com/bi). |
SiteIdentifier | For the Bold BI® Enterprise edition, it should be like `site/site1`. For Bold BI® Cloud, it should be an empty string. |
authorizationUrl | Url of the 'GetDetails' action in the PHP file. |
dashboardId | Dashboard Id of dashboard you want to embed. |
<html>
<head>
<script type="text/javascript" src="https://cdn.Bold BI®.com/embedded-sdk/v6.12.12/Bold BI®-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 = Bold BI®.create({
serverUrl: rootUrl+"/"+siteIdetifier,
dashboardId: dashboardId,
embedContainerId: "dashboard",// This should be the container id where you want to embed the widget1
embedType: Bold BI®.EmbedType.Component,
environment: Bold BI®.Environment.Enterprise,
height: "100%",
width: "100%",
authorizationServer: {
url: authorizationServerUrl
},
expirationTime: "100000",
});
dashboardemb.loadDashboard();
}
</script>
</body>
</html>
- Navigate to the
Pages
option in the left panel and click onAdd New
. Name the page and paste theshortcode
copied from the HTML page. Publish the page to view the embedded dashboard.
References
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.