嵌入 6MM Trading Widget：快速开始

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

开始之前

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

最小示例

1
<div id="trading-widget" style="width: 100%; height: 720px"></div>
2
3
<script src="https://app.6mm.com/sdk/trading-widget/v1/index.js"></script>
4
<script>
5
  const widget = TradingWidget.create('#trading-widget', {
6
    baseUrl: 'https://app.6mm.com',
7
    symbol: 'BTCUSDT',
8
    theme: 'dark',
9
    locale: 'zh-CN',
10
    layout: 'default',
11
    display: {
12
      showHeader: false,
13
      showTicker: false,
14
      hidden: [],
15
    },
16
    onReady(event) {
17
      console.log('ready', event)
18
    },
19
    onError(error) {
20
      console.error('error', error)
21
    },
22
  })
23
</script>

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

SDK 地址

显式设置 baseUrl

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

显示控制

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

1
display: {
2
  showHeader: false,
3
  showTicker: false,
4
  hidden: ['account'],
5
}

容器尺寸

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

验证接入结果

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

常见问题

下一步