嵌入 6MM Trading Widget：快速開始

Trading Widget SDK 將6MM交易介面嵌入合作夥伴擁有的網頁中。最快的整合需要一個可見的容器、生產SDK 腳本，以及呼叫TradingWidget.create()。

開始之前

• 從一個可以載入資源的網頁執行範例 https://app.6mm.com。
• 給 widget 容器明確的寬度和高度。
• 在呼叫TradingWidget.create()前先載入SDK。
• 在啟用帳戶或交易功能前，先規劃[認證流程]（/sdk/trading-widget/authentication）。

最小範例

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: 'en',
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 **

在合作夥伴擁有的頁面測試時，傳送 baseUrl 讓 iframe 總是指向 6MM 網域。

顯示控制

合作夥伴嵌入預設會隱藏 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. 在上線前與非生產用戶完成認證測試。

常見問題

下一步