Integration via iframe

If you want to directly reuse HENGSHI’s ready-made full ChatBI page inside your own system, instead of building the chat UI, chart display, and result rendering yourself, then iframe is the simplest option.

Start with the overview

If you have not yet clarified the boundary between API, JS SDK, and iframe, read Data Agent Integration Overview first.

First: what layer of capability iframe provides

iframe is the embedding path for HENGSHI’s full-page capability.

That means:

• the full chat page, conversation flow, and result rendering are all handled by HENGSHI
• you only need to embed that page into your own system
• this is the fastest approach and requires the least frontend modification

This approach has very direct characteristics:

• the page effect is the most complete, because the right side is the ready-made ChatBI page from HENGSHI
• the integration cost is the lowest, because you only need to embed an iframe
• requests, conversations, and result rendering are all handled by HENGSHI
• you have the least control over the internal chat layout and styles

If what you need is “your own page layout + HENGSHI full chat window” or “your own chat entry + HENGSHI result card”, read JS SDK Integration instead.

Minimal runnable example

<iframe
  src="https://your-hengshi-host/copilot"
  width="100%"
  height="100%"
  style="border: 0;">
</iframe>

As long as the current browser already has a HENGSHI login session, or you have completed single sign-on integration, the page can display ChatBI directly.

When iframe should be your first choice

• you want the fastest way to launch a usable ChatBI entry
• your frontend resources are limited and you do not want to build a chat UI yourself
• you are willing to reuse HENGSHI’s existing page style
• you do not need to intercept requests or split result cards into your own page modules

Common URL parameters

Specify the data source

1. Converse with the chart’s data source

?appId={App ID}&chartId={Chart ID}

2. Converse with the Dataset model in a data package

?dataAppId={Data Package ID}&datasetId={Dataset ID}

3. Converse with multiple data sources

?dataSources=[{"dataAppId":{Data Package ID1},"datasetId":{Dataset ID1}},{"dataAppId":{Data Package ID2},"datasetId":{Dataset ID2}}]

Tip

dataSources needs to be URL encoded first.

Specify the chart theme

?chartTheme={Dashboard Theme ID}

The Dashboard Theme ID can be found from the theme dropdown while editing a Dashboard in the app creation area.

Display only specified conversations

?conversationId={conversationID1,conversationID2}&chatUid={uid1,uid2}

This is suitable when you want to replay only a few specific Q&A items instead of opening the full history list.

Authentication

For cross-system integration, you can also pass login information using JWT parameters:

?activeAuth=jwt-param&jwtParam={JWT parameter}

Solution boundary

iframe solves the problem of “embed the full HENGSHI page”, but it does not solve the following needs:

• it is not suitable for deep UI customization
• it is not suitable when you need to intercept or rewrite frontend requests
• it is not suitable when you want to split the Q&A result into multiple page modules
• it is not suitable as a “standard chart protocol output” for an external frontend to consume