Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embedding with iframe

Embed the dashboard in an iframe

A dashboard can be embedded in the create, edit, and view modes of any application using a URL. In the create mode, a new dashboard can be created. In the edit mode, an existing dashboard can be edited. In the view mode, users can interact with the dashboard by filtering data, adding comments, and saving the filter views. Follow this steps to embed dashboard in view mode

Steps to embed dashboard in view mode using URL

NOTE: Please follow a similar procedure to display the multi-tab dashboard in view mode.

  1. To obtain the embed URL, click on the context menu of the corresponding dashboard and select the option Get Embed code.
    EmbedCodeOption

  2. Choose the mode value as View to render a dashboard in View mode. ModeOption

  3. By default, the options for Dashboard Comments, Widget Comments, Saved Views, Export, and SSO are disabled. To enable these options, simply slide the button provided in the embed dialog.

    EnableOption

    Dashboard Comments Dashboard comment panel would be shown in embedded view if enabled this parameter.
    Widget Comments Widget comment panel would be shown in embedded view if enabled this parameter.
    Saved Views Dashboard views panel would be shown in embedded view if enabled this parameter.
    Export Dashboard/Widget exporting options would be shown in embedded view if enabled this parameter.
    SSO Single Sign-On authentication is enabled for embedded view if configured authentication is selected as an authentication parameter.

  4. Please copy the embed URL by clicking the copy icon in the Embed Code dialog. CopyEmbedCode

  5. Please embed the copied URL into other web applications.

  6. When the web application is run, it will display either the login window or the dashboard, depending on the type of dashboard. Once you click on “login” and successfully log in with valid user credentials, the dashboard will automatically load. To bypass the login process, use [single sign-on](/embedding-options/iframe-embedding/embedding-with-iframe/#Embed Dashboards using external SSO authentication).

    EmbedLogin EmbedViewDashboard

NOTE: Please note that if SSO enabled parameters are used, a login prompt will appear if you have not logged in and selected SSO authentication. However, if you have already logged in, the dashboard will be rendered based on the user’s permission granted for that specific dashboard.

Available parameter

Name Type In Dashboards In Widgets
dashboard_comments boolean Show/hide dashboard comments NA
widget_comments boolean NA Show/hide widget comments
embed_dashboard_views_edit boolean Enable/Disable the Save and Save As view option in the filter overview dropdown. NA
embed_dashboard_favorite boolean Enable/Disable the favorite icon in the dashboard toolbar. NA
views boolean Show/hide dashboard views NA
export boolean Show/hide dashboard export option Show/hide widget export option
hide_header boolean Show/hide dashboard header NA
hide_dashboard_edit boolean Show/hide the dashboard edit icon. By default the icon will be shown only if user has the permission to edit the specific dashboard otherwise it doesn't shown. NA
hide_tool string Show/hide the dashboard options with Predefined values:
dp-Dashboard Parameter,
fo-Filter Overview,
fs-FullScreen,
rf-Refresh,
om-Option Menu

Example:
&hide_tool=fo,fs,dp,rf,om		 NA
hide_widget_tool string NA Show/hide the widget options with Predefined values:
fr-Filter,
fs-FullScreen,
om-Option Menu

Example:
&hide_widget_tool=fr,fs,om
enable_ai_assistant boolean Show/hide the AI Assistant icon NA
hassso boolean Enable/Disable SSO Authentication Enable/Disable SSO Authentication
externallogin string Predefined values:
windowsad,
azuread,
oauth,
openid		 Predefined values:
windowsad,
azuread,
oauth,
openid
embed_theme string Dashboard theme(custom) which will be applied for entire dashboard. Dashboard theme(custom) which will be applied for all widgets.
embed_datasource_filter object The embedded dashboard can be filtered with passed Dashboard Parameter and URL Parameter.

Example:
&embed_datasource_filter=&&dashboardparametername=parametervalue&urlparametername=parametervalue. 		The embedded dashboard can be filtered with passed Dashboard Parameter and URL Parameter.

Example:
&embed_datasource_filter=&&dashboardparametername=parametervalue&urlparametername=parametervalue.

How to embed the dashboard in create mode using the URL

  1. To create a new dashboard, you need to change the embed URL as demonstrated in the image below.
  <html>
  <body>
    <iframe src='http://localhost:51777/bi/site/site1/dashboard-designer?isembed=true' id='dashboard-iframe'width='100%' allowfullscreen frameborder='0'></iframe>
  </html>
  </body>

  1. Please embed the above URL into any web application and change the site identifier and server URL.

  2. To use the web application, run it. Depending on the type of dashboard, either the login window or the dashboard will be displayed. Click on the login option and enter valid user credentials. After that, the create page will automatically load. EmbedLogin
    EmbedCreateDashboard

Steps to embed dashboard designer using URL

  1. To obtain the embed URL, click on the context menu of the dashboard you wish to embed and select the Get Embed code option. EmbedCodeOption

  2. Select the mode value as Edit for rendering a dashboard to edit or design. ModeOption

  3. The SSO options are disabled by default. To enable this option, slide the button provided in the embed dialog. EnableOption

  4. Please copy the embed URL by clicking on the copy icon in the embed code dialog. CopyEmbedCodeForDesgin

  5. Please embed the copied URL into other web applications.

  6. When the web application is run, it will display either the login window or the designer dashboard. Upon clicking the login button and logging in with valid user credentials, the dashboard designer will be rendered automatically.

To avoid login, use the Single Sign-On. EmbedLogin EmbedDesignDashboard

NOTE: To access Single Sign-On, click on the context menu of the corresponding dashboard and select the Get Embed code option. In the Embed Code dialog box, choose Edit as the Mode value. Enable SSO and select one of the following authentication methods:Windows Active Directory, Azure Active Directory, OAuth 2.0 and OpenID Connect. This is similar to the Single Sign-On view mode.

Embedding dashboard with filter parameter

You can pass parameters to a dashboard by including them in the dashboard URL when embedding it. By passing parameter values within the URL, filters will be applied to the dashboard upon initial load. For more detailed information, you can learn more here.

Dynamic connection string for dashboard embedding

The Dynamic Connection String feature allows you to change the connection string of data sources in dashboard view mode. This feature is only applicable to embedded dashboards using the Dashboard Embedding feature. Dashboards in the Bold BI application will use the connection string used during data source creation. For more information, please visit the provided Dynamic Connection String.

Embed Dashboards using external SSO authentication

Bold BI supports embedding the dashboards into other web applications using external Single Sign-On authentication in the iframe-based embedding. The Bold BI application can be configured to support Windows Active Directory settings, Azure Active Directory settings, OAuth 2.0 settings, and OpenID settings authentications. Follow these steps to obtain the embed code with the Authentication Provider.

  1. Please click on the context menu of the corresponding dashboard and select the Get Embed code option.

    EmbedCodeOption

  2. In the Embed Code dialog box, choose Viewas the mode. Then, enable the SSO and select the Authentication Provider, as shown in the image below.

    EmbedSSOWindows

  3. Copy the embed URL by clicking the copy icon from the Embed Code dialog and paste it into a web application.

  4. To use the web application, please run it and sign in with your credentials. Once signed in, the dashboard will automatically display based on the permissions assigned to your account.

Dashboard Embedding with views using Single Sign-On

A dashboard can be embedded with views using Single Sign-On (SSO). SSO is nothing but an authentication process that allows a user to access multiple applications with one set of login credentials.

To achieve this, you will need an embed code with views, an embed secret code, and an embed signature. In order to embed the dashboard with views using SSO, you will need an embed URL with a view ID. Follow the steps below to obtain the embed code,

  • To obtain the embed URL, click on the Views icon that is highlighted below.

EmbedViews-ViewsIcon

  • Then click on the Link icon of the saved views. Here, you will get the dashboard URL with view id.

EmbedViews-LinkIcon

Then, follow the steps below to obtain the embed secret code and learn about the parameters needed to create the embed signature.

Using the sample, you can embed the dashboard with views using SSO.

Embed the data source using the iFrame

A data source can be created and edited in any application using the URL. In the data source editor, users have the ability to interact with the data source table by filtering data, adding parameters, and saving the filter values.

Steps to embed data source using URL

  1. To obtain the embed URL, click on the More option icon of the desired data source from the data source listing. Then, select the Get Embed Code option from the drop-down menu.

DataSourceUrl

  1. The SSO options are disabled by default. To enable this option, slide the button provided in the embed dialog.

EnableOption

SSO The Single Sign-On authentication is enabled to support embedding the data source into other web applications if the configured authentication is selected as a parameter for authentication.

  1. To copy the embed URL, click on the copy icon in the Embed Code dialog. CopyEmbedCode

  2. Embed the copied URL into other web applications.

  3. To access the web application, run it and the login window will appear. Click on the login button and enter the correct user credentials. This will automatically load the data source design page. Alternatively, you can use single sign-on to bypass the login process.

EmbedLogin
EmbedEditDataSource

Embed data source using external SSO authentication

Bold BI supports embedding the data source into other web applications using external Single Sign-On authentication in iframe-based embedding. The Bold BI application can be configured to support Windows Active Directory, Azure Active Directory, OAuth 2.0 settings and OpenID Support authentications. Follow these steps to obtain the embed code with the Authentication Provider.

  1. To access the respective data source’s context menu, click on it and select the Get Embed code option. In the Embed Code dialog box, enable the SSO feature and choose respective Authentication Provider in the option, similar to what is illustrated in the provided image.

EmbedSSOWindows

  1. To copy the embed URL, click on the copy icon located in the Embed Code dialog. Then, paste it into a web application.

  2. Please run the web application and sign in. The data source will then be automatically rendered according to the permissions granted to the user.

How to embed the datasource in create mode using the URL

  1. Please change the embedded URL to the one provided below in order to create a new data source connection.
    <html>
    <body>
        <iframe src='http://localhost:51777/bi/site/site1/datasource-designer/connection?isembed=true'
        id='dashboard-frame' width='100%' height='100%' allowfullscreen frameborder='0'></iframe>
    </body>
    </html>

  1. Please embed the aforementioned embed URL into any web application and change the site identifier and server URL.

  2. To access the web application, run it and the login window will appear. Click on the login button and enter valid user credentials. This will automatically establish the data source connection, allowing you to utilize different connectors for connecting to the data source. EmbedLogin
    EmbedCreateConnection

Embed the widget of the dashboard using the iFrame

Any widget from the dashboard can be embedded individually in any application using its URL. To enable widget embedding, you must activate widget mode and utilize the widget ID in the embed URL. The following steps must be followed for widget embedding.

  • Find the Id of the widget to be embedded.
  • Get the dashboard URL.
  • Use the widget id and dashboard URL together to embed widget.

How to get the Embed Widget Url

  1. To open the desired dashboard and choose the widget you want to embed, select the More option. Next, from the drop-down menu, select Get Embed Code.

InspectElement

  1. Please copy the iframe code from the pop-up page that displays the embed code.

InspectElement

How to embed the widget using the URL

  1. Now, utilize the copied iframe code in the HTML page to display the specific widget of the dashboard in a concise manner.
<html>
<body>
    <iframe src='http://localhost:53623/bi/site/site1/dashboards/5cfde98c-d352-4863-8a93-d6679263191b/Sales/Sales%20Analysis%20Dashboard?isembed=true&isWidgetMode=true&WidgetId=32ed09f7-49ef-4468-9c56-ccc376dbcaaa'
    id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>
</html>
</body>

  1. Please embed the provided URL into any web application and change the site identifier and server URL.

  2. To use the web application, you need to run it. Depending on the type of dashboard, it will display either the login window or the dashboard itself. Click on the login option and enter the correct user credentials. Once you do that, the widget will automatically render.

EmbedLogin
EmbedViewDashboard

NOTE: You can make the dashboard public and access it anonymously without the need for logging in.

Embedding the dashboard with views

A dashboard can have saved filter views embedded in any application using a URL. This allows users to interact with the dashboard by filtering data, adding comments, and saving the filter views.

Steps to embed dashboard view using URL

  • To obtain the embedded URL, click on the Share icon for the saved views.

EmbedViews-ShareIcon

  • Please click on the Get Embed Code link located in the share dialog box.

EmbedViews-GetEmbedCode

  • By default, the options for Dashboard Comments, Widget Comments, Saved Views, and Export are disabled. To enable these options, you can toggle the switch provided in the embed dialog.

EmbedLogin

Dashboard Comments Dashboard comment panel would be shown in embedded view if enabled this parameter.
Widget Comments Widget comment panel would be shown in embedded view if enabled this parameter.
Saved Views Dashboard views panel would be shown in embedded view if enabled this parameter.
Export Dashboard/Widget exporting options would be shown in embedded view if enabled this parameter.
  • Please copy the embed URL by clicking the copy icon in the Embed Code dialog.

EmbedViews-EmbedURL

  • Please embed the copied URL into another web application.

  • To access the web application, if the dashboard is not available as a public dashboard, run it. The login page will then be displayed. Proceed by clicking the login button and entering valid user credentials. The dashboard will automatically be rendered for you.

EmbedViews-EmbedLogin

For example, below image represents that our dashboard embedded in http://example.com/ website. EmbedViews-EmbedSample

Public embedding

If you wish to embed the dashboard views without requiring user authentication, you must first make both the dashboard and dashboard views public, and then proceed to embed them. The public dashboard will be automatically rendered without the need for credentials. However, it is important to note that you cannot enable the comments panel for public dashboard embedding.

Private embedding

Private dashboards can be embedded with views that are accessible to users in Bold BI who have read permission. These dashboards will require users to log in to the Bold BI server before rendering. Therefore, when private dashboards are embedded and the user is not authenticated, the embedded dashboard will display the login page.

Previous
Next