> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.6mm.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.6mm.com/_mcp/server.

# 嵌入 6MM Trading Widget：快速开始

Trading Widget SDK 可以把 6MM 交易界面嵌入合作方自己的网页。最简接入只需要一个可见容器、生产环境 SDK 脚本，以及一次 `TradingWidget.create()` 调用。

<h2 id="before-you-start">
  开始之前
</h2>

* 从能够加载 `https://app.6mm.com` 资源的网页运行示例。
* 为 Widget 容器设置明确的宽度和高度。
* 调用 `TradingWidget.create()` 前先加载 SDK。
* 正式启用账户或交易功能前，先规划[鉴权流程](/zh-CN/sdk/trading-widget/authentication)。

<h2 id="minimal-example">
  最小示例
</h2>

```html
<div id="trading-widget" style="width: 100%; height: 720px"></div>

<script src="https://app.6mm.com/sdk/trading-widget/v1/index.js"></script>
<script>
  const widget = TradingWidget.create('#trading-widget', {
    baseUrl: 'https://app.6mm.com',
    symbol: 'BTCUSDT',
    theme: 'dark',
    locale: 'zh-CN',
    layout: 'default',
    display: {
      showHeader: false,
      showTicker: false,
      hidden: [],
    },
    onReady(event) {
      console.log('ready', event)
    },
    onError(error) {
      console.error('error', error)
    },
  })
</script>
```

接入成功后，SDK 会在 `#trading-widget` 内创建 iframe，并调用 `onReady`。开发阶段应记录 `onError`，以便及时发现配置或资源加载问题。

<h2 id="sdk-urls">
  SDK 地址
</h2>

| 环境   | Script 地址                                                                                                |
| ---- | -------------------------------------------------------------------------------------------------------- |
| 生产环境 | [https://app.6mm.com/sdk/trading-widget/v1/index.js](https://app.6mm.com/sdk/trading-widget/v1/index.js) |

> **显式设置 baseUrl**
>
> 在 Partner 自己页面测试时，建议传 baseUrl，确保 iframe 始终指向 6MM Web 域名。

<h2 id="display-controls">
  显示控制
</h2>

Partner 嵌入场景下，PC 顶部栏和底部行情跑马灯默认隐藏。需要展示这些 shell 区域，或隐藏嵌入式交易页中的大容器时，可使用 `display` 参数。

```js
display: {
  showHeader: false,
  showTicker: false,
  hidden: ['account'],
}
```

<h2 id="container-size">
  容器尺寸
</h2>

| 端   | 建议最小尺寸     |
| --- | ---------- |
| 桌面端 | 1024 x 720 |
| 移动端 | 390 x 700  |

响应式页面可以使用自适应宽度，但应为不同断点设置合适的最小高度。容器高度为零时，SDK 可能已经成功加载，但交易界面仍然不可见。

<h2 id="verify-the-integration">
  验证接入结果
</h2>

1. 在浏览器网络面板确认 SDK 脚本成功返回。
2. 确认 iframe 初始化后触发 `onReady`。
3. 检查配置的 `symbol`、`locale`、主题和隐藏区域。
4. 在桌面端和移动端尺寸下测试页面。
5. 上线前使用非生产用户完成一次鉴权测试。

<h2 id="common-issues">
  常见问题
</h2>

| 现象                     | 检查项                                |
| ---------------------- | ---------------------------------- |
| Widget 区域空白            | 确认容器具有可见宽度和高度。                     |
| 提示 `TradingWidget` 未定义 | 确认 v1 脚本先于创建调用加载。                  |
| 页面或环境不正确               | 显式设置 `baseUrl` 并核对环境。              |
| 一直没有触发 Ready           | 记录 `onError`，检查脚本或 iframe 请求是否被阻止。 |
| 无法显示账户数据               | 完成受支持的 Widget 鉴权流程。                |

<h2 id="next-steps">
  下一步
</h2>

#### [Widget 鉴权](/zh-CN/sdk/trading-widget/authentication)

将嵌入式交易终端连接到已授权用户会话。

#### [参数与事件](/zh-CN/sdk/trading-widget/options-events)

配置交易对、语言、显示方式和生命周期回调。

#### [实例方法](/zh-CN/sdk/trading-widget/instance-methods)

初始化完成后控制 Widget 实例。