Harnessing The Power of Embedded Dashboards in WordPress Sites

WordPress is a popular open-source platform used to create websites or blogs. For businesses that use WordPress, embedding analytical dashboards into their WordPress sites is essential to visualizing data and monitoring key metrics in an easily accessible location. It enables real-time data tracking, improved decision-making, process streamlining, and increased user engagement, making it a key tool for businesses aiming for growth and efficiency. Importantly, embedded dashboards can be used to showcase information for internal use or for customers. Let’s explore the usefulness of embedding dashboards into WordPress and how to do it.

Benefits of embedding dashboards into WordPress pages

Embedding dashboards into your WordPress pages helps you improve the user experience of your website for employees and customers, making data more accessible and driving better decision-making.

Improved data visualization

Embedding dashboards into WordPress sites allows you to create interactive dashboards and reports that visualize data in a simple and meaningful way. This helps in making informed decisions based on visual data analysis.

Enhanced data analysis

Embedding dashboards into WordPress sites to visualize the data monitoring tools that are built into WordPress allows businesses to understand their website performance better. It gives them insight into user behavior to make data-driven decisions and improve website content strategies.

Simplified data sharing

Embedding a dashboard in a WordPress site allows users to easily manage and distribute content across multiple platforms, enhancing reach and engagement. It streamlines distribution workflows, improves collaboration, and allows for quick updates.

Increased data security

WordPress’s built-in security measures make embedding a dashboard into a WordPress page a secure option over other content delivery systems.

Automated updates

Embedding a dashboard in a WordPress page ensures your website runs the latest version of WordPress, improving the page’s security, functionality, and performance. This saves time, reduces manual effort, and minimizes the risk of human errors in site maintenance and upkeep.

How to embed a Bold BI dashboard into a WordPress site

To embed a Bold BI dashboard in a WordPress site, you need to have access and permission in Bold BI to execute the following steps:

Steps to embed a dashboard in an iframe

1. Log in to WordPress and navigate to Plugins. Search for WPCode. Install and activate the plugin.

Navigate to the Plugin Page and Find the WPCode Plugin

2. After activating the WPCode plugin, click Code Snippets in the menu on the left panel. Click Use snippet as shown in the following image.

Add Code Snippet

3. You will be directed to the following page, where you can provide the dashboard’s iframe code.

Insert Iframe Code Snippet

4. Copy the embedding iframe code from your local host and paste it as shown in the following image. Click the Save Snippet button in the upper left corner, and then scroll down and click the Shortcode option in the Insert Method Copy the Shortcode provided.

Copy and Paste the Iframe Code

Copy Shortcode

5. On the left panel, go to Add Pages, click Add New, and provide the page title. After that, paste the Shortcode you copied. Then, click Publish to publish the page.

Paste Shortcode in New Page

6. The page will present a login window. Click Login and enter valid user credentials. On logging in, the dashboard will render automatically. If you don’t want to log in every time you want to view the dashboard, use single sign-on. Also, you can learn about public and private embedding to secure who has access to the dashboard.

Login Window

Dashboard View in the New Page

By following these steps, you will smoothly embed your dashboard into your WordPress site, giving yourself and others easy access to visually appealing data visualizations that help you make the right decision in your business.

You can also use JavaScript to embed dashboards in WordPress easily.

Steps to embed a dashboard in JavaScript

1. Log in to WordPress and go to Tools > Theme File Editor. Open the function.phpfile. In this file, we will authenticate the server login for Bold BI using an API.

2. The function.php file includes a custom API designed to communicate with the Bold BI server to retrieve dashboard details. This PHP API endpoint is directed by the authorization server URL in the following code.

<?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');

3. Proceed to the Plugins section on your WordPress page. Select Add New and search for WPCode. Install and activate this plugin.

Plugin page

4. Following activation, you can add a custom snippet using the Code Snippets option in the left panel.

Code Snippets Page

5. In the Create Custom Snippet section, insert the HTML code snippet that follows. Remember to replace the server details with your Bold BI information. Save and activate the snippet once you’re done.

<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. Scroll down, select the Shortcode insert method, and copy the code provided.

Copy Shortcode

7. Finally, go to Pages in the left panel. Click Add New, name the page, and paste the Shortcode. Publish this page to view your dashboard.

Paste Shortcode in New Page

Dashboard View in the New Page

Tips for effectively embedding a dashboard in a WordPress site

When embedding your dashboard in a WordPress site is the right decision for your purpose, consider the following:

• Choose the right dashboard embedding solution: Evaluate various dashboard embedding tools to find the one that fulfills your specific data visualization, integration, and security needs.
• Test the dashboard thoroughly: Conduct a thorough test of the dashboard to ensure that it works as expected.
• Embed the dashboard in the right place: Ensure the dashboard is embedded in an appropriate location on your site where users can easily access and interact with it.
• Use a reliable plugin: Employ a WordPress plugin that is easy to use and comes with numerous features that can help you customize how you present your dashboard.
• Customization: Your dashboarding solution should provide extensive customization options to meet your business needs.
• Mobile responsiveness: Ensure the dashboard is responsive on mobile devices to accommodate users on smartphones and tablets.
• Update regularly: Make sure your dashboard can be updated easily, such as with automatic updates, to avoid publishing outdated information and making misinformed decisions.
• User accessibility: Ensure your dashboard is user-friendly, simple, and accessible to all, including users with disabilities, by adhering to web accessibility guidelines.

Example of a Bold BI dashboard embedded in a WordPress site

Let’s check out a dashboard for website analytics embedded in a WordPress site.

Website Analytics Dashboard

The Bold BI Website Analytics Dashboard provides comprehensive data about a website’s performance and user activity. Embedding it into a WordPress site allows users to access key insights directly from your website’s back end, eliminating the need for separate tools. Metrics tracked in the dashboard include visitor behavior, traffic sources, page views, bounce rates, and more. These help you gain an understanding of your audience, optimize content based on data-driven decisions, and improve overall website performance and user experience.

Website Analytics Dashboard in WordPress

In conclusion, embedding dashboards into your WordPress site places mission-critical data visualizations key business performance indicators in an easy-to-access location. Start embedding yours now!

To learn more, you can check out the following blogs:

• Application Analytics: Improve Your Apps Using Embedded Analytics
• Embed Analytics into an Application: A Step-by-Step Guide
• Integrating Dashboards into Applications with the Embed SDK
• Embedding Dashboards for Analytics with the JavaScript SDK
• Embedding Bold BI Dashboards in an Angular Application

Originally published at https://www.boldbi.com on December 6, 2023.