Empowering Applications: Harnessing the Capabilities of Embedded Widgets

Staying ahead of the curve is critical in the ever-evolving application development landscape. Widgets have become potent visuals for designing immersive and interactive experiences, attracting users in unprecedented ways. This blog post is an exhaustive guide how to embed a widget into your application. Prepare to embark on a revolutionary journey that will differentiate your application from the rest.

Benefits of embedding a widget in your application

Harnessing a widget’s potential in embed mode offers several benefits:

1. Time and cost efficiency: Embedding a widget saves development time and reduces costs by leveraging prebuilt functionalities.
2. Easy updates and maintenance: Embedded widgets receive automatic updates and maintenance from developers, keeping your application up to date without manual intervention.
3. Competitive edge: Embedding widgets gives your application a competitive edge with unique features and functionalities.
4. Increased user engagement: Embedded widgets capture users’ attention, promoting exploration and interaction and increasing engagement and satisfaction.
5. Improved data visualization: Widgets improve data visualization, presenting complex information in visually engaging formats.
6. Cross-platform compatibility: Widgets are cross-platform compatible, providing a consistent experience across different devices and platforms.

How to embed a widget from a dashboard

Using the Bold BI wrapper on your HTML page, you can embed a dashboard widget in your application. Use the following steps to embed a dashboard widget in your application using the JavaScript API method.

1. Insert the following Embed SDK URL into the head tag of your .html page.

Embed SDK URL

2. Within the body tag, you must generate a div element using a unique id name you’ve created. This element will serve as the embedding point for the dashboard widget.

Generating a div Element

3. You need to incorporate the function for creating a Bold BI instance with specified properties within the body tag. Use the onload attribute to initiate this function within the body. Additionally, invoke the loadDashboardWidget(“{widget_name/widget_id}”) function, inputting the widget details.

4. To embed the widget, retrieve the widget id from the URL. You can embed the widget by using either the id number associated with it or the specific name assigned to it. Both can be obtained as demonstrated in the following sample.

Getting Widget ID

5. Proceed to embed the widget with either ID or name as shown.

1. Widget name

Embedding with Widget Name

2. Widget ID

Embedding with Widget ID

6. Now execute the sample to embed the dashboard widget. The embedded widget will be displayed as illustrated.

Embedded Widget

Filtering an embedded widget in an application

Embedded widgets can be edited by actions such as sorting, filtering, formatting data values, applying drill-down features, linking, and changing the overall widget appearance. In the following instance, we have edited the widget by applying a filter to showcase specific data in the widget. Follow these steps to edit an embedded widget:

1. In the embedded application, find the BoldBI.create() method and substitute the loadDashboard() method with loadDashboardWidget(). To embed a particular widget, give the widget’s name or ID. Also, enter the corresponding dashboard ID in the dashboardId property.
2. Use the “filterParameters” API member to provide the filter parameter and its value.

Load Filter Parameter

3. The embedded widget will be updated and showcased based on the value of the filter.

Filtered Embedded Widget

How to embed a widget using iFrame

Using an iFrame-based single sign-on (SSO) with token-based authentication, you can embed widgets in Bold BI.

To embed a widget from the dashboard into any application, you’ll need its URL. The process requires activating widget mode and incorporating the widget ID into the embed URL. Here are the steps to embed a widget.

1. Locate the ID of the widget you want to embed.
2. Obtain the URL of the dashboard.
3. Use both the widget ID and the dashboard URL to embed the widget.

Getting the embed widget URL

To get the embed URL follow these steps.

1. Enter the desired dashboard and select the widget you wish to integrate by clicking on More Options.

More Options

2. On the drop-down option, select Get Embed Code and copy the iframe code from the embed code pop-up page.

Getting Embed Code

3. Combine the widget ID and dashboard URL with the copied iframe code in the HTML page to render the widget as shown:

Embed URL

4. Run the sample, the program displays either a login window or dashboard, requiring user login and valid credentials to render the widget.

Login to Bold BI

5. Finally, the embedded widget will be rendered as shown below.

Embedded Widget

You can also embed a widget into other web applications through single sign-on authentication, as explained in this article. When attempting to embed using an iframe URL with a valid embedSignature, you can embed widgets without a login prompt.

I hope you’ve absorbed some valuable insights on how you can tap into the power of embed widgets to unlock fresh possibilities for businesses. By harnessing the ability to customize widgets, you can tailor them to seamlessly blend with your website’s design and enhance its functionality in your business.