---
url: /v6.2/en-us/embed/iframe.md
---
# Customization Guide for Embedded Page Styles

After creating Dashboards and Charts using the HENGSHI SENSE platform, you can embed them into existing systems via iframes. To achieve a unified style, embedding iframes supports a variety of customization options.

![img](/images/topic/develop/embedded-share-dialog.png)

## Customize the iframe of the Dashboard

### Parameter List

The following parameters are supported when embedding a dashboard.

|Parameter Name|Parameter Function|Parameter Type|Parameter Value|
|----|----|----|----|
|copyright|This parameter controls the display status of the dashboard header and footer.|Boolean|Parameter values:true: Display header and footer, default is true. false: Do not display header and footer.|
|header|This parameter controls the display status of the dashboard header.|Boolean|Parameter values:true: Display header, default is true. false: Do not display header.|
|pager|This parameter controls the display status of the dashboard pager.|Boolean|Parameter values:true: Display pager, default is true. false: Do not display pager.|
|scrollable|This parameter controls the scrolling behavior within the dashboard.|Boolean|Parameter values:true: Supports scrolling within the dashboard, default is true. false: Does not support scrolling within the dashboard.|
|chartAccessible|This parameter controls the chart interaction behavior within the dashboard.|Boolean|Parameter values:true: Supports opening charts for interaction, default is true. false: Does not support opening charts for interaction.|
|background|This parameter sets the background color of the dashboard. If the dashboard theme has already set a background color, this parameter will not take effect.|String|Parameter value format: rgba(255,255,255,1).|
|wrapperBackground|This parameter sets the background color of the parent div element of the dashboard, which can override the dashboard theme background color.|String|Parameter value format: rgba(255,255,255,1).|
|chartTitleColor|This parameter sets the color of chart titles within the dashboard. It applies to all chart titles within the dashboard (excluding filters). Use with caution.|String|Parameter value format: rgba(255,255,255,1).|
|chartGap|This parameter sets the spacing between charts within the dashboard.|String|Parameter value should include pixel information, e.g., 10px.|

### Common Embedding Questions

#### 1. How do I show the embedded page in English or another language?

Append the `locale` parameter to the embed URL, for example:

* `?locale=en-US`
* `?locale=zh-CN`
* `?locale=zh-TW`

This is especially useful for multilingual portals, OEM scenarios, or any host system that needs the embedded page to follow the host language.

#### 2. How do I trigger fullscreen from the host page?

In a standard iframe embedding scenario, call fullscreen directly from the host page:

```js
const iframe = document.querySelector('iframe');
iframe.requestFullscreen();
```

This lets the customer's own page controls switch the embedded dashboard into fullscreen mode.

#### 3. How do I refresh the dashboard externally without rebuilding the iframe?

If the host page keeps multiple iframes cached and you do not want to recreate them when switching back, trigger a dashboard refresh with `postMessage`:

```js
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage(
  JSON.stringify({
    event: 'dispatchCustomEvent',
    data: ['hs_dashboard_refresh', {}],
  }),
  '*',
);
```

For more events, see [Embed Interaction Events](events.md).

#### 4. What should I do if I hit cross-domain issues?

Use one of these recommended deployment patterns first:

1. Deploy HENGSHI and the host system under the same main domain, using a sub-path or reverse proxy, for example `https://example.com/bi`.
2. Deploy HENGSHI as a dedicated HTTPS domain such as `https://bi.example.com`, and configure the Base URL and reverse-proxy headers correctly.

For SSO or proxy scenarios, make sure headers such as `X-Forwarded-Host` and `X-Forwarded-Proto` are forwarded correctly. See [Third-Party Software Configuration FAQs](../software-config-faq.md) for related proxy guidance.

The following are deprecated parameters in the dashboard embedding scenario.

|Parameter Name|Parameter Function|Parameter Type|Parameter Value|Deprecation Notes|
|----|----|----|----|----|
|padding|This parameter sets the inner padding of the dashboard.|`String<number>`|Example value: 0 0 0 0|This parameter is no longer supported.|
|chartBackground|This parameter sets the background color of chart controls.|String|Example value: rgba(255,255,255,1)|This parameter is no longer supported.|
|chartPadding|This parameter sets the inner padding of charts.|`String<number>`|Example value: 0 0 0 0|This parameter is no longer supported.|
|borderRadius|This parameter sets the border radius of chart controls.|String|Example value: 2px|Follows the dashboard theme settings.|
|borderWidth|This parameter sets the border width of charts.|String|Example value: 1px|Follows the dashboard theme settings.|
|borderColor|This parameter sets the border color of charts.|String|Parameter value format: rgba(255,255,255,1)|Follows the dashboard theme settings.|
|borderStyle|This parameter sets the border style of charts.|String|Options: solid, dashed, dotted|Follows the dashboard theme settings.|
|filterPadding|This parameter sets the inner padding of filters.|`String<number>`|Example value: 0 0 0 0|This parameter is no longer supported.|

### Example

As shown in the dashboard below, the background color and chart title color are modified when embedding it.

Original dashboard link and style:

![img](/images/topic/develop/embedded-style-sample.png)

Embedded dashboard link and style:
`https://preview.hengshi.com/private/share/E454FF2E910B7B9445C8F66391B25CCA/dashboard/EC0E826AB75FD2AA2C3D755CF8374DD6C?wrapperBackground=rgba(180,246,254,1)&chartTitleColor=rgb(0,0,0)&copyright=false&scrollable=false`

![img](/images/topic/develop/embedded-style-sample-result.png)

## Customize the Chart iframe

### Parameter List

The following parameters are supported when embedding a chart.

|Parameter Name|Parameter Function|Parameter Type|Parameter Value|
|----|----|----|----|
|showAction|This parameter configures the interaction button in the top-right corner.|Boolean|Parameter values:true: Displays the interaction button in the top-right corner (default is true). false: Hides the interaction button in the top-right corner.|
|chartPadding| This parameter sets the chart's inner padding. |`String<number>`|Example parameter value: 0 0 0 0.|

The following parameters are deprecated and no longer supported.

|Parameter Name|Parameter Function|Parameter Type|Parameter Value|Deprecation Notes|
|----|----|----|----|----|
|noFilter |This parameter controls whether to display filters.|Boolean|Parameter values:true: Displays filters (default is true). false: Hides filters.  |Filters are no longer supported when embedding charts.|
|titleColor |This parameter sets the chart title color.|String|Example parameter value: rgba(255,255,255,1). |Chart titles are no longer displayed when embedding pages.|
|chartBackground |This parameter sets the chart background color.|String|Example parameter value: rgba(255,255,255,1). |The chart background color will be overridden by the theme background color used by the chart.|