Skip to main content

iframe Web Embedding Integration

Background

Guandata BI platform supports embedding dashboards into third-party systems via iframe integration. Key points to note for iframe embedding include:

  • SSO Single Sign-On (see Guandata BI-SSO Integration)
  • Hiding extra content on dashboards (such as logo bar, dashboard directory, page title, etc.)
  • Passing page query parameters via URL (see [Add Condition Parameters to Page URL](../6-System Integration/1-Add Condition Parameters to Page URL.md))

image.png

1. Hide Extra Content on PC Pages

  • The native BI system page contains logo bar, dashboard navigation bar, etc. These are often unnecessary when integrating into a third-party system. Guandata provides specific URL query parameters to hide these elements.

image.png

Technical Approach: iframe Embedding; Add Query String to URL

Common PC Page Parameters

  • ?ps=iframe    Hides logo bar and dashboard directory on dashboard page
  • ?ps=iframe2  Hides logo bar, dashboard directory, and page title bar
  • ?ps=iframe3 Hides logo bar on dashboard page
  • ?viewMode=readonly  Hides page and card editing operations, making user permissions temporarily read-only
  • ?ps=embed    Hides all content except the visualization chart on the card detail page

URL example: https://app.guandata.com/page/b81ee1f66f3934de1ba5e447?ps=iframe  

When ps is not embed, the minimum width for embedded cards is 500px.

2. Mobile Page Integration

1. Show Mobile View on PC Access

Scenario: When Guandata pages are integrated into WeCom, DingTalk mini-apps, or custom mini-programs, users may access them on PC. If you only want users to see the mobile view (not allow PC editing), provide the mobile URL.

Mobile URL format: $homeURL/m/page/{pageid}

Example: https://demo.guandata.com/m/page/p5c0e900bbe3746449bca688

2. Hide Page Header and Bottom Favorite Icon (Dashboard Entry)

Scenario: When integrating mobile pages into WeCom, DingTalk mini-apps, or custom mini-programs, only show the page content and hide the header (dashboard entry) to keep users on the page.

Parameter: ?pref.HostNavOnly=true

image.png

Notes

  1. Q: What if the URL already contains a query string? (Example)

A: Use & to connect all parameters. Example:  http://newbi.com?provider=abc&ssotoken=xxxx&key1=ssss  

  1. Q: Can I hide the page title bar (using ?ps=iframe2) but keep the filter bar?

A: Not supported by default. It is recommended to move all filters from the filter bar to the page. In version 5.4.0 and later, you can introduce new config items and set app_header, page_header_titleBar, and page_title. For questions, contact Guandata technical support.